D-Net

<ng-template #selected_filters_pills let-margin="margin">

  <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">

        <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span

            class="selectedFilterLabel" [class.uk-margin-small-left]="margin"

            title="Remove {{periodFilter.selectedFromAndToValues}}">

    <ng-container *ngIf="filter.countSelectedValues > 0">

      <ng-container *ngFor="let value of filter.values; let i = index;  let end = last; ">

        <ng-container *ngIf="value.selected">

             <span class="uk-grid-margin">

              <span class="selectedFilterLabel " [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"

                    (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=

                    filter.countSelectedValues -1;

                    filterChanged({value:filter}) ">

                    <span class="uk-icon">

                      <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"

                           icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"

                                                          d="M16,16 L4,4"></path><path fill="none"

                                                                                       stroke="#000"

                                                                                       stroke-width="1.6"

                                                                                       d="M16,4 L4,16"></path></svg>

                    </span>

                  </span>

                  <span class="uk-margin-small-left"

                        [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>

                </a>

              </span>

            </span>

        </ng-container>

      </ng-container>

    </ng-container>

  <!--  </div>-->

  <div *ngIf="activeTopic && activeTopic.categories.length > 1" header>

    <nav class=" ">

      <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">

        <ul

            class="customTabs uk-tab  ">

          <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">

            <li *ngIf="isPublicOrIsMember(category.visibility)"

                [class.uk-active]="category.alias ===

                 class="uk-margin-remove-bottom uk-h4"

              ><span class="title">{{category.name}}</span></a>

            </li>

          </ng-template>

        </ul>

    <ul *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"

        class="uk-subnav uk-subnav-pill subCategoriesTabs ">

      <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">

        <li *ngIf="isPublicOrIsMember(subCategory.visibility)"

            [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">

          <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"

             class="uk-margin-remove-bottom uk-h3"

          ><span>{{subCategory.name}}</span></a>

        </li>

      </ng-template>

    </ul>

    <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">

      <span class="uk-grid-margin">Filters: </span>

      <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>

      <div *ngIf="privateStakeholder">

        <div class="uk-text-center uk-height-medium">

          <div class="uk-h3 "><i>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">

              <path d="M0 0h24v24H0z" fill="none"/>

              <path

                  d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>

            </svg>

          </i>

            Private data

      <div *ngIf="!privateStakeholder">

          &&  ((activeSubCategory &&

        activeSubCategory.description &&

        activeSubCategory.description.length > 0) ||

          (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||

          (activeTopic && activeTopic.description && activeTopic.description.length > 0))"

                  (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}

        </div>

                    (

                      (activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && activeSubCategory.numbers[0].indicators.length == 0))

                      &&

                      (activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))

              No indicators available yet. Stay tuned!

            </div>

          </div>

        </div>

            <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">

                   [class.uk-width-1-2@m]="indicator.width === 'medium'"

                   [class.uk-width-1-1]="indicator.width === 'large'" class=" uk-margin-bottom">

                     [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">

                      {{indicator.indicatorPaths[0].filtersApplied}}

                      out of

                      {{countSelectedFilters()}}</div>

                    <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold">

               class="uk-grid uk-grid-medium uk-margin-bottom uk-flex uk-flex-bottom "

            <h3 *ngIf="chart.title && chart.title.length > 0" class="uk-width-1-1 uk-margin-top">{{chart.title}}</h3>

                  [class.uk-width-1-2@m]="indicator.width === 'medium'"

                  [class.uk-width-1-1]="indicator.width === 'large'" class="uk-margin-bottom">

                  </h4>

                       [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"

                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"

                                class="uk-button"

                                (click)="setActiveChart(i, j, indicatorPath.type)"

                                [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">

                          {{indicatorPath.type}}

                        </button>

                      </div>

                        Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of

                              [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"

                              class="uk-width-1-1 uk-height-medium"></iframe>

                      <!--                                        {{chartsActiveType.get(i).safeResourceUrl}}-->

                      <!--                    <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->

                      <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"

                           [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"

                           class="uk-width-1-1 uk-height-medium">

        </div>

     [style.display]="(filterToggle?'none':'inherit')"-->

    <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"

         viewBox="0 0 20 20"

         fill="white" width="24px" height="16px">

      <g>

        <path d="M0,0h24 M24,24H0" fill="none"/>

        <path

      </g>

    </svg>

  </i>

</div>

<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class=" uk-offcanvas filters_switcher"

  <div class="uk-offcanvas-bar offcanvas-white">

        <div class="uk-h4 ">Filters</div>

        <a *ngIf="countSelectedFilters() > 1"

           class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>

        <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>

        applied to a chart, that chart will appear grayed-out.</i></div>

        <li>

                        (onFilterChange)="filter()"></range-filter>

          <li *ngIf="filter.values.length >0">

            <search-filter [filter]="filter" [showResultCount]=false

                           (onFilterChange)="filterChanged($event)"></search-filter>

          </li>

        </ng-container>

    </div>

<span class="descriptionIcon"

      *ngIf="(indicator.description && indicator.description.length > 0)

                       || (indicator.additionalDescription && indicator.additionalDescription.length > 0)"

      uk-icon="info"

      [attr.uk-tooltip]="'title:<div class=\'uk-padding-small\'>'+

  (indicator.description&& indicator.description.length > 0?indicator.description:'') +'<br>'+

(indicator.additionalDescription && indicator.additionalDescription.length?indicator.additionalDescription:'')

  +'</div>'">

  </span>

</ng-template>