Platform: Input List Item Component V1.0 Technical Design

Input List Item Component

Summary

The input list item contains a label and any sort of input UI element.

Design

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

Property Bindings

id: string

id of the action list item it is optional.

label: string

label of the of item

Event Bindings

(click)="onitemPress"

Fires when item is clicked.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. List signature

Additional Notes

1. List signature

Is used along with this component. In ng-content area user can insert custom data. example : input box, textarea, button, checkbox etc.

---

i18n

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

Special Usecase: No

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

<fdp-input-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			i18n-label="@@label"
			label="{{item.label}}"
			(click)="onitemPress">
     <ng-content></ng-content>
</fdp-input-list-item>

Redesign Required: No

---

Questions:

from Sushma# Input and display list item functionality have the same features but styles and responsive behaviors are different. During style, gap analysis need to enhance the signature such that only 1 component can use in both cases if possible.

can we have an attribute called [componenttype]="display|input" based on which styles will change to the component? though it is deviating for Fori guideline as having them as an independent components.