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"], false, never>;
}
//# sourceMappingURL=list-item.component.d.ts.map