core/split-view/split-view-list.component.ts

Description

The list panel of a split view, with a titled header, loading and empty states.

Place it inside c8y-sv next to c8y-sv-details, or use it on its own as a full-width list. It picks a lighter background when a details panel is present so the two panes stay distinguishable.

Example :

<c8y-sv-list [title]="'Devices'" [loading]="loading" [showEmptyState]="items.length === 0">
  @for (item of items; track item.id) {
    <c8y-li [c8ySvListItem]="item">{{ item.name }}</c8y-li>
  }
</c8y-sv-list>

Example

<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-sv-list [title]=&quot;&#39;Devices&#39;&quot; [loading]=&quot;loading&quot; [showEmptyState]=&quot;items.length === 0&quot;&gt;</code></pre></div>

Metadata

changeDetection	`ChangeDetectionStrategy.Eager`
host	`{ }`
selector	`c8y-sv-list`
standalone	`true`
imports	`NgClass` `LoadingComponent` `EmptyStateComponent` `C8yTranslatePipe` `C8yTranslateDirective` `GuideDocsComponent` `GuideHrefDirective`
templateUrl	`./split-view-list.component.html`

Relationships

Used by

Depends on

<div
  class="inner-scroll fit-h"
  [attr.aria-label]="title | translate"
  role="region"
  [ngClass]="{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }"
  data-cy="c8y-sv-list"
  #innerScrollDiv
>
  @if (title || hasAlerts) {
    <div
      class="flex-wrap flex-no-shrink sticky-top gap-8"
      [ngClass]="{
        'card-header separator': title && shouldShowTitle
      }"
    >
      @if (title && shouldShowTitle) {
        <h4 class="card-title">
          {{ title | translate }}
        </h4>
      }
      <ng-content select="c8y-sv-header-actions"></ng-content>
      @if (hasAlerts) {
        <ng-content select="c8y-sv-alerts"></ng-content>
      }
    </div>
  }
  <div data-cy="c8y-sv-list--group">
    @if (loading && !showEmptyState) {
      <div class="sticky-top">
        <div class="p-absolute fit-w overflow-hidden p-b-4">
          <c8y-loading
            [layout]="'page'"
            data-cy="c8y-sv-list--loading"
          ></c8y-loading>
        </div>
      </div>
    }
    <ng-content></ng-content>

    @if (showEmptyState) {
      <div class="p-relative p-l-24">
        <c8y-ui-empty-state
          [icon]="emptyStateIcon"
          [title]="emptyStateTitle"
          [subtitle]="emptyStateSubtitle"
          data-cy="c8y-sv-list--empty-state"
        >
          @if (docsUrl) {
            <p c8y-guide-docs>
              <small
                translate
                [translateParams]="{ docsUrl }"
                ngNonBindable
              >
                Find out more in the
                <a c8y-guide-href="{{ docsUrl }}">user documentation</a>.
              </small>
            </p>
          }
        </c8y-ui-empty-state>
      </div>
    }
  </div>

  <ng-content select="c8y-sv-footer"></ng-content>
</div>