Platform: Action List Item Component V1.0 Technical Design

Action List Item Component

Summary

The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.

Design

<fdp-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-action-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			[title]="{{item.name}}"
                        [icon]="{{item.icon}}"
                        [iconClickable]="{{item.(true|false)}}"
                        [adaptTitleSize]="{{item.(true|false)}}"
                        [description]=="{{item. description}}"
			[wrapping]="{{item.(true|false)}}"
                        [infoText]="{{item.information}}"
                        [infoTextState]="{{item.informationState}}"
                        [infoTextStateInverted]="{{item.(true|false)}}"
			(click)="onitemPress">
		</fdp-action-list-item>
</fdp-list>

Property Bindings

id: string

id of the standard list item it is optional.

title: string

title of the of item

[icon]="{{item.icon}}"

Icon that identifies the item

[adaptTitleSize]="{{item.(true|false)}}"

By default, the title font is larger if the description is empty. If you have list items with and without a description, this results in differently sized titles that are harder to read. In this case, switch off the title size adaptation (AdaptTitleSize).

[wrapping]="{{item.(true|false)}}""

The title and description can wrap, the semantic info text does not wrap or truncate.

[description]=="{{item. description}}"

A short description (left-aligned below the title)

[infoText]="{{item.information}}"

Additional Information

[infoTextState]:Status

Defines information status.

export type Status = 'error| information| none| success| warning';

[infoTextStateInverted]="{{item.(true|false)}}"

Attribute used to hold item number. displayed on screen unlike id.

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

Are used along with this component.

Questions:

Kevin:

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