core/list-group/list-item.component.ts

Description

A list item is a representation of an item inside a list and can be used to compose different styles in a list (mainly in a -component but also in others like the -component):

a list with a footer
a list with one or multiple actions
an icon
a checkbox or radio input

The item can be composed via content projection. The following example shows a radio list with an icon, two actions and a footer:

Example :

<c8y-list-group>
  <c8y-li
    *c8yFor="
      let device of devices;
      let i = index;
    "
  >
    <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    {{ i + 1 }}. {{ device.name || '-' }}
    <c8y-li-footer>
      Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
    </c8y-li-footer>
    <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
      Delete
    </c8y-li-action>
    <c8y-li-action (click)="(false)" icon="rocket">
      Launch to space
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>

Example

Metadata

host	`{ }`
selector	`c8y-list-item, c8y-li`
standalone	`true`
imports	`NgClass` `IconDirective` `BsDropdownModule` `DropdownDirectionDirective` `DropdownFocusTrapDirective` `CdkTrapFocus` `NgTemplateOutlet` `CollapseModule` `C8yTranslatePipe`
templateUrl	`./list-item.component.html`

Relationships

Used by

Depends on

NgClass
IconDirective
BsDropdownModule
DropdownDirectionDirective
DropdownFocusTrapDirective
CdkTrapFocus
NgTemplateOutlet
CollapseModule
C8yTranslatePipe

<div
  [ngClass]="{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }"
>
  <div class="c8y-list__item__block">
    <ng-content select="c8y-list-item-drag-handle, c8y-li-drag-handle"></ng-content>
    <ng-content select="c8y-list-item-radio, c8y-li-radio"></ng-content>
    <ng-content select="c8y-list-item-checkbox, c8y-li-checkbox"></ng-content>

    <ng-content select="c8y-list-item-icon, c8y-li-icon"></ng-content>

    <div
      class="c8y-list__item__body text-truncate-wrap"
      (click)="rowToggleCollapsed()"
    >
      <ng-content select="c8y-list-item-body, c8y-li-body"></ng-content>
      <ng-content></ng-content>

      @if (showFooter) {
        <div class="c8y-list__item__footer">
          <ng-content select="c8y-list-item-footer, c8y-li-footer"></ng-content>
        </div>
      }
    </div>

    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {
      <div class="c8y-list__item__actions">
        @if (showCollapse && itemCollapse.collapseWay === 'button') {
          <button
            class="collapse-btn"
            title="{{ 'Expand' | translate }}"
            [attr.aria-expanded]="!collapsed"
            type="button"
            (click)="toggleCollapsed($event)"
            data-cy="c8y-li--collapse-btn"
          >
            <i [c8yIcon]="'chevron-down'"></i>
          </button>
        }

        @if (showActions) {
          <div
            class="dropdown"
            placement="bottom right"
            container="body"
            #liDropdownActions="bs-dropdown"
            dropdown
            #dropDirection="bs-dropdown"
            c8yDropdownFocusTrap
          >
            <button
              class="dropdown-toggle c8y-dropdown"
              title="{{ 'Actions' | translate }}"
              type="button"
              dropdownToggle
              data-cy="c8y-li--actions-btn"
            >
              <i [c8yIcon]="'ellipsis-v'"></i>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              data-cy="list-item--dropdown-menu"
              *dropdownMenu
            >
              <ng-content select="c8y-list-item-action, c8y-li-action"></ng-content>

              @for (action of actions; track action) {
                <ng-container *ngTemplateOutlet="action.template"></ng-container>
              }
            </ul>
          </div>

          <ng-content select="c8y-list-item-action, c8y-li-action"></ng-content>
        }
      </div>
    }
  </div>

  @if (showCollapse) {
    <div
      [collapse]="collapsed"
      [isAnimated]="true"
    >
      <div class="c8y-list__item__collapse--container">
        <ng-content select="c8y-list-item-collapse, c8y-li-collapse"></ng-content>
      </div>
    </div>
  }
</div>