Platform: Display List Item Component V1.0 Technical Design

Display List Item Component

Summary

The display list item is the simplest list item. It shows content in the form of labels and text.

As forms are generally the preferred control for combining labels and fields, display list items are seldom used

Design

<fdp-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-display-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			[key]="{{item.key}}"
                        [value]="{{item.value}}"
			(click)="onitemPress">
    </fdp-display-list-item>
</fdp-list>

Property Bindings

id: string

id of the dislay list item it is optional.

key: string

key/name/label/title of the of item

value: string

value of the of item

Event Bindings

(click)="onitemPress"

Fires when item is clicked.

Template:

<li fd-list-item id="listitem”………………….>
<fd-object-status [inverted]="true|false" [clickable]="true|false"......
 <ng-content></ng-content>
</li>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. Object Status
2. List signature

Additional Notes

1. List signature
2. ObjectStatus

If we are not creating it as a component then we can have a fundamental-ngx existing list item directive to achieve this behavior. Are used along with this component.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-display-list-item can be supported as:

 <fdp-display-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			[key]="{{item.key}}"
                        i18n-value="@@value"
                        value="{{item.value}}"
			(click)="onitemPress">
    </fdp-display-list-item>

Redesign Required: No

---

Questions:

Kevin:

• Remove valueDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService -Done