SQ-UI/ng-sq-ui

<section class="section primary module-overview">
  <header>
    <h2>Overview:</h2>
  </header>
  <ul>
    <li>
      <span class="emphasis">
        NPM Package Name:
      </span>

      <span class="link-list-item">
        {{npmPackageName}}
      </span>
    </li>
    <li>
      <span class="emphasis">
        Exported As:
      </span>

      <span class="link-list-item">
        {{moduleName}}
      </span>
    </li>
    <li *ngIf="internallyDeclared && internallyDeclared.length > 0">
      <div class="emphasis">
        Internally Declared Modules:
      </div>

      <div>
        <a *ngFor="let internalModule of internallyDeclared; let isLast = last;"
            href="javascript:;"
            class="link-list-item"
            (click)="scrollTo(internalModule.fragment)">
          {{internalModule.name}}<span *ngIf="!isLast">, </span>
        </a>
      </div>
    </li>
    <li *ngIf="dependsOn && dependsOn.length > 0">
      <div class="emphasis">
        Depends On:
      </div>

      <div>
        <a *ngFor="let dependency of dependsOn; let isLast = last;"
           class="link-list-item"
           routerLink="{{dependency.routeLink}}">
          {{dependency.name}}<span *ngIf="!isLast">, </span>
        </a>
      </div>
    </li>
    <li *ngIf="exports && exports.length > 0">
      <div class="emphasis">
        Exports:
      </div>

      <div>
        <ng-container *ngFor="let exportedModule of exports; let isLast = last;">
          <ng-container
            *ngIf="exportedModule.fragment; then fragmentLink; else externalLink">
          </ng-container>

          <ng-template #externalLink>
            <a *ngIf="exportedModule.routeLink"
               class="link-list-item"
               routerLink="{{exportedModule.routeLink}}">
              {{exportedModule.name}}<span *ngIf="!isLast">, </span>
            </a>

            <span *ngIf="!exportedModule.routeLink"
               class="link-list-item">
              {{exportedModule.name}}<span *ngIf="!isLast">, </span>
            </span>
          </ng-template>

          <ng-template #fragmentLink>
            <a href="javascript:;"
               class="link-list-item"
               (click)="scrollTo(exportedModule.fragment)">
              {{exportedModule.name}}<span *ngIf="!isLast">, </span>
            </a>
          </ng-template>
        </ng-container>
      </div>
    </li>
    <li *ngIf="docs && docs.length > 0">
      <div class="emphasis">
        Documentation:
      </div>

      <div>
        <a *ngFor="let doc of docs; let isLast = last;"
           target="_blank"
           class="link-list-item"
           [href]="doc.routeLink">{{doc.name}}
          <i class="fas fa-external-link-square-alt" aria-hidden="true"></i> <span *ngIf="!isLast">, </span>
        </a>
      </div>
    </li>
    <li *ngIf="liveExamples && liveExamples.length > 0">
      <span class="emphasis">
        Code Examples:
      </span>

      <div>
        <a *ngFor="let example of liveExamples; let isLast = last;"
           target="_blank"
           class="link-list-item"
           [href]="example.routeLink">
          {{example.name}}
          <i class="fas fa-external-link-square-alt" aria-hidden="true"></i> <span *ngIf="!isLast">, </span>
        </a>
      </div>
    </li>
  </ul>
</section>