ngx-edu-sharing-ui 0.7.0

package/src/lib/list-items/list-counts/list-counts.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { ListWidget } from '../list-widget';
+import { ListItem } from '../../types/list-item';
+import { StatisticsGroup } from 'ngx-edu-sharing-api';
+
+@Component({
+    selector: 'es-list-counts',
+    templateUrl: './list-counts.component.html',
+    styleUrls: ['./list-counts.component.scss'],
+})
+export class ListCountsComponent extends ListWidget {
+    static supportedItems = [
+        new ListItem('NODE', 'counts.OVERALL'),
+        new ListItem('NODE', 'counts.VIEW_MATERIAL'),
+        new ListItem('NODE', 'counts.VIEW_MATERIAL_EMBEDDED'),
+        new ListItem('NODE', 'counts.VIEW_MATERIAL_PLAY_MEDIA'),
+        new ListItem('NODE', 'counts.DOWNLOAD_MATERIAL'),
+    ];
+
+    static getCountSingle(node: StatisticsGroup, id: string, group: number = null) {
+        const counts = (node as any).counts;
+        if (id === 'OVERALL') {
+            return Object.keys(counts.counts)
+                .map((c) => (group ? group : counts.counts[c]))
+                .reduce((a, b) => a + b);
+        }
+        return (group ? group : counts.counts[id]) || 0;
+    }
+    static getCount(node: StatisticsGroup, id: string) {
+        const counts = (node as any).counts;
+        let result = this.getCountSingle(node, id);
+        if (Object.keys(counts.groups)?.length > 0) {
+            const i1 = id;
+            if (counts.groups[i1]) {
+                const i2 = Object.keys(counts.groups[i1])[0];
+                if (counts.groups?.[i1]?.[i2]) {
+                    result = Object.keys(counts.groups?.[i1]?.[i2])
+                        .map(
+                            (group) =>
+                                (group || '-') +
+                                ': ' +
+                                this.getCountSingle(node, id, counts.groups?.[i1]?.[i2][group]),
+                        )
+                        .join('\n')
+                        .trim();
+                }
+            }
+        }
+        return result;
+    }
+
+    getId() {
+        return this.item.name.split('.')[1];
+    }
+
+    getCount() {
+        return ListCountsComponent.getCount(this.node as StatisticsGroup, this.getId());
+    }
+}

package/src/lib/list-items/list-items.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { FormatDurationPipe } from './format-duration.pipe';
+import { ListBaseComponent } from './list-base/list-base.component';
+import { ListCollectionInfoComponent } from './list-collection-info/list-collection-info.component';
+import { ListCountsComponent } from './list-counts/list-counts.component';
+import { ListNodeLicenseComponent } from './list-node-license/list-node-license.component';
+import { ListNodeReplicationSourceComponent } from './list-node-replication-source/list-node-replication-source.component';
+import { ListNodeWorkflowComponent } from './list-node-workflow/list-node-workflow.component';
+import { ListTextComponent } from './list-text/list-text.component';
+import { NodeRowComponent } from './node-row/node-row.component';
+import { NodeSourcePipe } from './node-source.pipe';
+import { CommonModule } from '@angular/common';
+import { EduSharingUiCommonModule } from '../common/edu-sharing-ui-common.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+    declarations: [
+        ListBaseComponent,
+        ListCollectionInfoComponent,
+        ListNodeLicenseComponent,
+        ListNodeReplicationSourceComponent,
+        ListNodeWorkflowComponent,
+        ListTextComponent,
+        ListCountsComponent,
+        NodeSourcePipe,
+        FormatDurationPipe,
+        NodeRowComponent,
+    ],
+    imports: [CommonModule, EduSharingUiCommonModule, MatTooltipModule, TranslateModule],
+    exports: [ListBaseComponent, ListTextComponent, FormatDurationPipe, NodeRowComponent],
+})
+export class ListItemsModule {}

package/src/lib/list-items/list-node-license/list-node-license.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="licenseIcon$ | async as licenseIcon">
+  <span *ngIf="indicatorIcons$ | async; else textRepresentation" [matTooltip]="tooltip$ | async"
+    ><img [alt]="tooltip$ | async" [src]="licenseIcon"
+  /></span>
+  <ng-template #textRepresentation>
+    <span>{{ tooltip$ | async }}</span>
+  </ng-template>
+</ng-container>

package/src/lib/list-items/list-node-license/list-node-license.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { ListWidget } from '../list-widget';
+import { TranslateService } from '@ngx-translate/core';
+import * as rxjs from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { ListItem } from '../../types/list-item';
+import { NodeHelperService } from '../../services/node-helper.service';
+import { Node, RestConstants } from 'ngx-edu-sharing-api';
+import { AccessibilityService } from '../../services/accessibility.service';
+
+@Component({
+    selector: 'es-list-node-license',
+    templateUrl: './list-node-license.component.html',
+})
+export class ListNodeLicenseComponent extends ListWidget {
+    static supportedItems = [new ListItem('NODE', RestConstants.CCM_PROP_LICENSE)];
+
+    readonly licenseName$ = this.nodeSubject.pipe(
+        map((node) => this.nodeHelper.getLicenseName(node as Node)),
+    );
+
+    readonly licenseIcon$ = this.nodeSubject.pipe(
+        switchMap((node) => this.nodeHelper.getLicenseIcon(node as Node)),
+    );
+
+    readonly tooltip$ = rxjs.combineLatest([this.licenseName$, this.provideLabelSubject]).pipe(
+        switchMap(([licenseName, provideLabel]) => {
+            if (provideLabel) {
+                return this.translate
+                    .get('NODE.ccm:commonlicense_key')
+                    .pipe(map((commonLicenseKey) => `${commonLicenseKey}: ${licenseName}`));
+            } else {
+                return rxjs.of(licenseName);
+            }
+        }),
+    );
+
+    readonly indicatorIcons$ = this.accessibility.observe('indicatorIcons');
+
+    constructor(
+        private accessibility: AccessibilityService,
+        private nodeHelper: NodeHelperService,
+        private translate: TranslateService,
+    ) {
+        super();
+    }
+}

package/src/lib/list-items/list-node-replication-source/list-node-replication-source.component.html

@@ -0,0 +1,11 @@
+<span *ngIf="indicatorIcons$ | async; else textRepresentation" [matTooltip]="tooltip$ | async">
+  <img
+    [src]="replicationSource$ | async | appNodeSource : { mode: 'url' }"
+    (error)="$any($event.target).style.display = 'none'"
+    [alt]="tooltip$ | async"
+  />
+</span>
+
+<ng-template #textRepresentation>
+  <span>{{ tooltip$ | async }}</span>
+</ng-template>

package/src/lib/list-items/list-node-replication-source/list-node-replication-source.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as rxjs from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { ListWidget } from '../list-widget';
+import { NodeSourcePipe } from '../node-source.pipe';
+import { AccessibilityService } from '../../services/accessibility.service';
+import { NetworkService, Node, RestConstants } from 'ngx-edu-sharing-api';
+import { ListItem } from '../../types/list-item';
+
+@Component({
+    selector: 'es-list-node-replication-source',
+    templateUrl: './list-node-replication-source.component.html',
+    providers: [NodeSourcePipe],
+})
+export class ListNodeReplicationSourceComponent extends ListWidget {
+    static supportedItems = [new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE)];
+
+    readonly replicationSource$ = this.nodeSubject.pipe(
+        map((node) => (node as Node).properties['ccm:replicationsource']?.[0]),
+    );
+
+    readonly text$ = this.replicationSource$.pipe(
+        // Wait for repositories to be available to `restNetwork` since `nodeSource.transform` fails
+        // if it isn't.
+        switchMap((replicationSource) =>
+            this.networkService.getRepositories().pipe(map(() => replicationSource)),
+        ),
+        switchMap((replicationSource) =>
+            this.translate.get(
+                'REPOSITORIES.' + this.nodeSource.transform(replicationSource, { mode: 'escaped' }),
+                { fallback: this.nodeSource.transform(replicationSource, { mode: 'text' }) },
+            ),
+        ),
+    );
+
+    readonly tooltip$ = rxjs.combineLatest([this.text$, this.provideLabelSubject]).pipe(
+        switchMap(([text, provideLabel]) => {
+            if (provideLabel) {
+                return this.translate
+                    .get('NODE.ccm:replicationsource')
+                    .pipe(map((replicationSource) => `${replicationSource}: ${text}`));
+            } else {
+                return rxjs.of(text);
+            }
+        }),
+    );
+
+    readonly indicatorIcons$ = this.accessibility.observe('indicatorIcons');
+
+    constructor(
+        private accessibility: AccessibilityService,
+
+        private nodeSource: NodeSourcePipe,
+        private translate: TranslateService,
+        private networkService: NetworkService,
+    ) {
+        super();
+    }
+}

package/src/lib/list-items/list-node-workflow/list-node-workflow.component.html

@@ -0,0 +1,3 @@
+<div class="workflowStatus" [style.background-color]="getWorkflowStatus().color">
+  {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}
+</div>

package/src/lib/list-items/list-node-workflow/list-node-workflow.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ListWidget } from '../list-widget';
+import { ListItem } from '../../types/list-item';
+import { NodeHelperService } from '../../services/node-helper.service';
+import { Node, RestConstants } from 'ngx-edu-sharing-api';
+
+@Component({
+    selector: 'es-list-node-workflow',
+    templateUrl: './list-node-workflow.component.html',
+})
+export class ListNodeWorkflowComponent extends ListWidget {
+    static supportedItems = [new ListItem('NODE', RestConstants.CCM_PROP_WF_STATUS)];
+
+    constructor(private nodeHelper: NodeHelperService) {
+        super();
+    }
+
+    getWorkflowStatus() {
+        return this.nodeHelper.getWorkflowStatus(this.node as Node).current;
+    }
+}

package/src/lib/list-items/list-text/list-text.component.html

@@ -0,0 +1,176 @@
+<label *ngIf="item.config?.showLabel">
+  {{ getI18n(item) | translate }}
+</label>
+<ng-container *ngIf="item.type === 'ORG' || item.type === 'GROUP'">
+  <ng-container [ngSwitch]="item.name">
+    <span *ngSwitchCase="'displayName'" [class.type-danger]="isDangerousGroup()">
+      {{ $any(getNode()).profile.displayName }}
+    </span>
+    <span *ngSwitchCase="'groupType'">
+      {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile.groupType | translate }}
+    </span>
+    <span *ngSwitchDefault>
+      {{ $any(getNode())[item.name] }}
+    </span>
+  </ng-container>
+</ng-container>
+<ng-container *ngIf="item.type === 'USER'">
+  <span *ngIf="isUserProfileAttribute(item.name)">
+    {{ $any(getNode()).profile[item.name] }}
+  </span>
+  <span *ngIf="item.name === 'status'">
+    {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}
+  </span>
+  <span *ngIf="!isUserProfileAttribute(item.name) && item.name !== 'status'">
+    {{ $any(getNode())[item.name] }}
+  </span>
+</ng-container>
+<ng-container
+  [ngSwitch]="item.name"
+  *ngIf="item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'"
+>
+  <span *ngSwitchCase="'name'">
+    {{ $any(getNode()).name }}
+  </span>
+  <span
+    *ngSwitchCase="'title'"
+    [matTooltip]="provideLabel ? $any(getNode()).title || $any(getNode()).name : null"
+  >
+    {{ $any(getNode()).title || $any(getNode()).name }}
+  </span>
+  <span
+    *ngSwitchCase="'cm:title'"
+    [matTooltip]="provideLabel ? $any(getNode()).title || $any(getNode()).name : null"
+  >
+    {{ $any(getNode()).title || $any(getNode()).name }}
+  </span>
+  <span
+    *ngSwitchCase="'cclom:title'"
+    [matTooltip]="provideLabel ? $any(getNode()).title || $any(getNode()).name : null"
+  >
+    {{ $any(getNode()).title || $any(getNode()).name }}
+  </span>
+  <span
+    *ngSwitchCase="'mediatype'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}
+  </span>
+  <span *ngSwitchCase="'size'" [matTooltip]="provideLabel ? (getI18n(item) | translate) : null">
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    {{ $any(getNode()).size | formatSize }}
+  </span>
+  <span
+    *ngSwitchCase="'dimensions'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    {{ $any(getNode()) | NodeImageSize }}
+  </span>
+  <span
+    *ngSwitchCase="'ccm:wf_status'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}
+  </span>
+  <span
+    *ngSwitchCase="'cm:creator'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    {{ $any(getNode()).createdBy | nodePersonName }}
+  </span>
+  <span
+    *ngSwitchCase="'cm:modifier'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.cm:modifier' | translate }}:</span
+    >
+    {{ $any(getNode()).modifiedBy | nodePersonName }}
+  </span>
+  <span
+    *ngSwitchCase="'ccm:replicationsource'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.ccm:replicationsource' | translate }}:</span
+    >
+    {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}
+  </span>
+  <span
+    *ngSwitchCase="'ccm:commonlicense_key'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span
+    >
+    <ng-container *ngIf="$any(getNode()).properties['ccm:commonlicense_key'] as license">
+      {{
+        license[0] === 'CUSTOM'
+          ? $any(getNode()).properties['cclom:rights_description']
+          : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']
+            | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })
+      }}
+    </ng-container>
+    <ng-container *ngIf="!$any(getNode()).properties['ccm:commonlicense_key']">
+      {{ 'LICENSE.NAMES.NONE' | translate }}
+    </ng-container>
+  </span>
+  <span
+    *ngSwitchCase="'ccm:educationaltypicalagerange'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span
+    >
+    <ng-container
+      *ngIf="
+        $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||
+        $any(getNode()).properties['ccm:educationaltypicalagerange_to']
+      "
+    >
+      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -
+      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}
+    </ng-container>
+  </span>
+  <span
+    *ngSwitchCase="'cclom:duration'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.cclom:duration' | translate }}:</span
+    >
+    {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}
+  </span>
+  <span
+    *ngSwitchCase="'ccm:collection_proposal_status'"
+    [matTooltip]="provideLabel ? (getI18n(item) | translate) : null"
+  >
+    <span *ngIf="provideLabel" class="cdk-visually-hidden"
+      >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span
+    >
+    <!-- use node instead of getNode() to access the raw proposal data! -->
+    {{ ('PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]) | translate:{fallback: ''} }}
+  </span>
+  <span *ngSwitchDefault [matTooltip]="provideLabel ? (getI18n(item) | translate) : null">
+    <span *ngIf="provideLabel" class="cdk-visually-hidden">{{ getI18n(item) | translate }}:</span>
+    <ng-container
+      *ngIf="DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1"
+    >
+      {{ displayName$ | async }}
+    </ng-container>
+    <ng-container *ngIf="DATE_FIELDS.includes(item.name)">
+      {{ $any(getNode()).properties[item.name]?.[0] | formatDate: { async: true } | async }}
+    </ng-container>
+    <ng-container *ngIf="VCARD_FIELDS.includes(item.name)">
+      {{
+        $any(getNode()).properties[item.name]
+          ? ($any(getNode()).properties[item.name][0] | vcardName)
+          : ''
+      }}
+    </ng-container>
+  </span>
+</ng-container>

package/src/lib/list-items/list-text/list-text.component.scss

@@ -0,0 +1,3 @@
+.type-danger {
+    color: var(--warning);
+}

package/src/lib/list-items/list-text/list-text.component.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectorRef, Component, OnInit, SimpleChanges } from '@angular/core';
+import { MdsService, Node, Organization, RestConstants, ProposalNode } from 'ngx-edu-sharing-api';
+import { BehaviorSubject, merge } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { ListItem } from '../../types/list-item';
+import { ListWidget } from '../list-widget';
+import { NodeHelperService } from '../../services/node-helper.service';
+import * as Constants from 'ngx-edu-sharing-api';
+
+@Component({
+    selector: 'es-list-text',
+    templateUrl: './list-text.component.html',
+    styleUrls: ['./list-text.component.scss'],
+})
+export class ListTextComponent extends ListWidget implements OnInit {
+    static supportedItems = [
+        new ListItem('NODE', '*'),
+        new ListItem('NODE_PROPOSAL', '*'),
+        new ListItem('COLLECTION', '*'),
+        new ListItem('ORG', '*'),
+        new ListItem('GROUP', '*'),
+        new ListItem('USER', '*'),
+    ];
+    readonly DATE_FIELDS = RestConstants.DATE_FIELDS;
+    readonly VCARD_FIELDS = RestConstants.getAllVCardFields();
+    displayName$ = new BehaviorSubject<string>(null);
+
+    constructor(
+        private nodeHelper: NodeHelperService,
+        private mds: MdsService,
+        private changeDetectorRef: ChangeDetectorRef,
+    ) {
+        super();
+    }
+
+    async ngOnChanges(changes: SimpleChanges) {}
+
+    async ngOnInit() {
+        merge([this.nodeSubject, this.itemSubject])
+            .pipe(switchMap(() => this.updateDisplayname()))
+            .subscribe((displayName) => {});
+    }
+    getNode() {
+        if (this.item.type === 'NODE_PROPOSAL') {
+            return (this.node as ProposalNode).proposal || this.node;
+        } else if ((this.node as Node).type === RestConstants.CCM_TYPE_COLLECTION_PROPOSAL) {
+            return (this.node as Node).relations?.Original ?? this.node;
+        }
+        return this.node;
+    }
+
+    isUserProfileAttribute(attribute: string) {
+        return (
+            [
+                RestConstants.AUTHORITY_FIRSTNAME,
+                RestConstants.AUTHORITY_LASTNAME,
+                RestConstants.AUTHORITY_EMAIL,
+            ].indexOf(attribute) !== -1
+        );
+    }
+    getWorkflowStatus() {
+        return this.nodeHelper.getWorkflowStatus(this.node as Node).current;
+    }
+
+    getI18n(item: ListItem) {
+        return (item.type === 'NODE_PROPOSAL' ? 'NODE_PROPOSAL' : 'NODE') + '.' + item.name;
+    }
+
+    isDangerousGroup() {
+        return (
+            (this.node as Organization).authorityName ===
+            RestConstants.GROUP_ALFRESCO_ADMINISTRATORS
+        );
+    }
+
+    private async updateDisplayname() {
+        const node = this.getNode() as Node;
+        if (!node.properties) {
+            this.displayName$.next('');
+            return;
+        }
+        this.displayName$.next(
+            node.properties[this.item.name + '_DISPLAYNAME']?.length > 0
+                ? node.properties[this.item.name + '_DISPLAYNAME'].join(', ')
+                : node.properties[this.item.name]?.join(', '),
+        );
+
+        const mds = await this.mds
+            .getMetadataSet({
+                repository: node.ref?.repo,
+                metadataSet: node.metadataset || Constants.DEFAULT,
+            })
+            .toPromise();
+        // @TODO
+        /*
+        const widget = MdsHelper.getWidget(this.item.name, null, mds.widgets);
+        if (widget?.values) {
+            const i18n = node.properties[this.item.name]
+                ?.map((prop) => widget.values.filter((v) => v.id === prop)?.[0]?.caption)
+                .filter((cap) => !!cap);
+            if (i18n) {
+                this.displayName$.next(i18n.join(', '));
+            }
+        }
+         */
+    }
+}

package/src/lib/list-items/list-widget.ts

@@ -0,0 +1,52 @@
+import { Input, Type, Directive } from '@angular/core';
+import { Person } from 'ngx-edu-sharing-api';
+import { BehaviorSubject } from 'rxjs';
+import { Node, ProposalNode, Group, Statistics } from 'ngx-edu-sharing-api';
+import { ListItem } from '../types/list-item';
+
+@Directive()
+export class ListWidget {
+    @Input()
+    get node(): Node | ProposalNode | Group | Person | Statistics {
+        return this.nodeSubject.value;
+    }
+    set node(value: Node | ProposalNode | Group | Person | Statistics) {
+        this.nodeSubject.next(value);
+    }
+    protected readonly nodeSubject = new BehaviorSubject<
+        Node | ProposalNode | Group | Person | Statistics
+    >(null); // node (or group/user)
+
+    @Input()
+    get item(): ListItem {
+        return this.itemSubject.value;
+    }
+    set item(value: ListItem) {
+        this.itemSubject.next(value);
+    }
+    protected readonly itemSubject = new BehaviorSubject<ListItem>(null);
+
+    /**
+     * Provide a label for non-obvious fields that describes the field the given value belongs to.
+     *
+     * The label is included in a tooltip and made available for a11y technologies.
+     *
+     * Useful when the value is displayed without context.
+     *
+     * Other tooltips might be added even with this input set to `false`.
+     */
+    @Input()
+    get provideLabel() {
+        return this.provideLabelSubject.value;
+    }
+    set provideLabel(value) {
+        this.provideLabelSubject.next(value);
+    }
+    protected readonly provideLabelSubject = new BehaviorSubject(false);
+
+    constructor() {}
+}
+
+export type ListWidgetClass = {
+    supportedItems: ListItem[];
+} & Type<ListWidget>;

package/src/lib/list-items/node-row/node-row.component.html

@@ -0,0 +1,31 @@
+<div class="node-row" *ngIf="node">
+  <div class="icon-bg">
+    <img
+      [src]="node | esNodeIcon | async"
+      [alt]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+      [matTooltip]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+    />
+  </div>
+  <div class="node-data">
+    <div class="node-data-primary">
+      <es-list-text [node]="node" [item]="columns[0]"> </es-list-text>
+    </div>
+    <div class="node-data-secondary">
+      <es-list-text
+        *ngFor="let column of columns.slice(1)"
+        [node]="node"
+        [item]="column"
+        [provideLabel]="true"
+      ></es-list-text>
+      <ng-container *ngTemplateOutlet="customMetadataRef; context: { node: node }"></ng-container>
+    </div>
+  </div>
+</div>

package/src/lib/list-items/node-row/node-row.component.scss

@@ -0,0 +1,50 @@
+@import '../../../../assets/scss/mixins';
+
+.node-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: var(--tableIconSize) auto;
+    grid-gap: 10px;
+    align-items: center;
+    padding: 10px;
+    white-space: normal;
+    .node-data {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        .node-data-primary {
+            font-weight: bold;
+            padding-bottom: 5px;
+            @include limitLineCount(1, 1.25);
+        }
+
+        .node-data-secondary {
+            color: var(--textLight);
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    .icon-bg {
+        background-color: rgb(var(--palette-foreground-text-dark));
+        border-radius: 50%;
+        width: var(--tableIconSize);
+        height: var(--tableIconSize) !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @include materialShadowBottom();
+    }
+
+    .icon-bg img,
+    .icon-bg i {
+        width: 50%;
+        z-index: 0;
+    }
+
+    .icon-bg i {
+        color: rgb(var(--palette-foreground-text));
+        font-size: 20px;
+    }
+}