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}}"
                        [valueDirection]="{{item.(ltr|rtl|default)}}"
			(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

[valueDirection]:Direction

Position text of the item value in below positions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item value inherits the text direction from its parent controller.

export type Direction = 'ltr'|'rtl'|'default';

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.

Questions:

Kevin:

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