@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
182 lines • 6.28 kB
TypeScript
import { ElementRef, EventEmitter, QueryList } from '@angular/core';
import { ListItemActionComponent } from './list-item-action.component';
import { ListItemCollapseComponent } from './list-item-collapse.component';
import { ListItemFooterComponent } from './list-item-footer.component';
import * as i0 from "@angular/core";
/**
* A list item is a representation of an item inside a list and
* can be used to compose different styles in a list (mainly in a
* <c8y-group-list>-component but also in others like the
* <c8y-typeahead>-component):
* - a list with a footer
* - a list with one or multiple actions
* - an icon
* - a checkbox or radio input
*
* The item can be composed via content projection. The following
* example shows a radio list with an icon, two actions
* and a footer:
* ```html
* <c8y-list-group>
* <c8y-li
* *c8yFor="
* let device of devices;
* let i = index;
* "
* >
* <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
* <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
* {{ i + 1 }}. {{ device.name || '-' }}
* <c8y-li-footer>
* Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
* </c8y-li-footer>
* <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
* Delete
* </c8y-li-action>
* <c8y-li-action (click)="(false)" icon="rocket">
* Launch to space
* </c8y-li-action>
* </c8y-li>
* </c8y-list-group>
* ```
*/
export declare class ListItemComponent {
element: ElementRef;
/**
* If set to true, the class "active" is added which
* indicates that the current row is active.
*/
active: boolean;
/**
* If set to true, the class "highlighted" is added which
* indicates that the current row is highlighted.
*/
highlighted: boolean;
/**
* If set to true, the class "c8y-list__item--empty-actions" is added which adds
* additional padding to compensate for the "actions" column in other list items.
*/
emptyActions: boolean;
/**
* If set to true, the item will be displayed in a dense style.
*/
dense: boolean;
/**
* Indicates if the current list item is collapsed. You can trigger the collapsing from
* any element event by toggling this value.
*
* ```html
* <c8y-li #li (click)="li.collapsed = !li.collapsed">
* Toggle
* <c8y-li-collapse>
* I can be toggled by clicking on the row.
* </c8y-li-collapse
* </c8y-li>
* ```
*/
collapsed: boolean;
/**
* Indicates if the current list item is selectable.
*/
selectable: boolean;
/**
* An event emitter which is triggered when the user collapses the content
* via the chevron on the right.
*/
collapsedChange: EventEmitter<boolean>;
/**
* A [[ListItemFooterComponent]] element which can be used to show a footer.
* ```html
* <c8y-li>
* I am the main content
* <c8y-li-footer>
* I am the footer content
* </c8y-li-footer>
* </c8y-li>
* ```
*/
itemFooter: ListItemFooterComponent;
/**
* [[ListItemActionComponent]] elements which can be used to show an action.
* An action is displayed on the right in the dropdown and usually consists of an
* icon and a label.
* ```html
* <c8y-li>
* I am the main content
* <c8y-li-action (click)="launchToSpace(device.id)" icon="rocket">
* Launch
* </c8y-li-action>
* <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
* Delete
* </c8y-li-action>
* </c8y-li>
* ```
*/
itemActions: QueryList<ListItemActionComponent>;
/**
* [[ListItemCollapseComponent]] elements which can be used to show detail views.
* ```html
* <c8y-li>
* I am the main content
* <c8y-li-collapse>
* I am detailed content
* </c8y-li-collapse>
* </c8y-li>
* ```
*/
itemCollapse: ListItemCollapseComponent;
/**
* @ignore
*/
showFooter: boolean;
/**
* @ignore
*/
showActions: boolean;
/**
* @ignore
*/
showCollapse: boolean;
/**
* @ignore
*/
actions: ListItemActionComponent[];
private pulse$;
private destroy$;
private readonly ACTION_ITEM_HEIGHT;
/**
* @ignore
*/
constructor(element: ElementRef);
/**
* @ignore
*/
ngOnInit(): void;
/**
* @ignore
*/
ngAfterContentChecked(): void;
/**
* @ignore
*/
ngOnDestroy(): void;
/**
* Toggles the collapse state and emits this state as
* collapsedChange output as boolean.
* @param $event Pass optional an event to stop propagation.
*/
toggleCollapsed($event?: Event): void;
/**
* Toggles the collapse state in case the `collapseWay` is set to `row` and emits this state as
* collapsedChange output as boolean.
*/
rowToggleCollapsed(): void;
/**
* Highlights the list-item. This method should be used to show the
* user that something within this item was changed.
*/
pulse(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ListItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ListItemComponent, "c8y-list-item, c8y-li", never, { "active": { "alias": "active"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "emptyActions": { "alias": "emptyActions"; "required": false; }; "dense": { "alias": "dense"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; }, { "collapsedChange": "collapsedChange"; }, ["itemFooter", "itemCollapse", "itemActions"], ["c8y-list-item-drag-handle, c8y-li-drag-handle", "c8y-list-item-radio, c8y-li-radio", "c8y-list-item-checkbox, c8y-li-checkbox", "c8y-list-item-icon, c8y-li-icon", "c8y-list-item-body, c8y-li-body", "*", "c8y-list-item-footer, c8y-li-footer", "c8y-list-item-action, c8y-li-action", "c8y-list-item-action, c8y-li-action", "c8y-list-item-collapse, c8y-li-collapse"], true, never>;
}
//# sourceMappingURL=list-item.component.d.ts.map