<commit_before>import { CommonModule } from "@angular/common";
import {
    Component,
    ContentChild,
    ContentChildren,
    ElementRef,
    EventEmitter,
    forwardRef,
    HostBinding,
    Input,
    NgModule,
    Output,
    QueryList,
    TemplateRef,
    ViewChild
} from "@angular/core";

import { IgxRippleModule } from "../directives/ripple/ripple.directive";

import { IgxListItemComponent } from "./list-item.component";
import { IgxEmptyListTemplateDirective, IgxListPanState } from "./list.common";

export interface IPanStateChangeEventArgs {
    oldState: IgxListPanState;
    newState: IgxListPanState;
    item: IgxListItemComponent;
}

export interface IListItemClickEventArgs {
    item: IgxListItemComponent;
    event: Event;
}

/**
 * **Ignite UI for Angular List** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)
 *
 * The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering
 * of list items. Each list item is completely templateable and will support any valid HTML or Angular component.
 *
 * Example:
 * ```html
 * <igx-list>
 *   <igx-list-item isHeader="true">Contacts</igx-list-item>
 *   <igx-list-item *ngFor="let contact of contacts">
 *     <span class="name">{{ contact.name }}</span>
 *     <span class="phone">{{ contact.phone }}</span>
 *   </igx-list-item>
 * </igx-list>
 * ```
 */
@Component({
    selector: "igx-list",
    templateUrl: "list.component.html"
})
export class IgxListComponent {

    constructor(private element: ElementRef) {
    }

    @ContentChildren(forwardRef(() => IgxListItemComponent))
    public children: QueryList<IgxListItemComponent>;

    @ContentChild(IgxEmptyListTemplateDirective, { read: IgxEmptyListTemplateDirective })
    public emptyListTemplate: IgxEmptyListTemplateDirective;

    @ViewChild("defaultEmptyList", { read: TemplateRef })
    protected defaultEmptyListTemplate: TemplateRef<any>;

    @Input()
    public allowLeftPanning = false;
    @Input()
    public allowRightPanning = false;

    @Output()
    public onLeftPan = new EventEmitter<IgxListItemComponent>();
    @Output()
    public onRightPan = new EventEmitter<IgxListItemComponent>();
    @Output()
    public onPanStateChange = new EventEmitter<IPanStateChangeEventArgs>();
    @Output()
    public onItemClicked = new EventEmitter<IListItemClickEventArgs>();

    @HostBinding("attr.role")
    public get role() {
        return "list";
    }

    @HostBinding("class")
    public get innerStyle(): string {
        return !this.children || this.children.length === 0 ? "igx-list-empty" : "igx-list";<commit_msg>fix(list): Fix the list class host bindings Closes #959<commit_after>import { CommonModule } from "@angular/common";
import {
    Component,
    ContentChild,
    ContentChildren,
    ElementRef,
    EventEmitter,
    forwardRef,
    HostBinding,
    Input,
    NgModule,
    Output,
    QueryList,
    TemplateRef,
    ViewChild
} from "@angular/core";

import { IgxRippleModule } from "../directives/ripple/ripple.directive";

import { IgxListItemComponent } from "./list-item.component";
import { IgxEmptyListTemplateDirective, IgxListPanState } from "./list.common";

export interface IPanStateChangeEventArgs {
    oldState: IgxListPanState;
    newState: IgxListPanState;
    item: IgxListItemComponent;
}

export interface IListItemClickEventArgs {
    item: IgxListItemComponent;
    event: Event;
}

/**
 * **Ignite UI for Angular List** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)
 *
 * The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering
 * of list items. Each list item is completely templateable and will support any valid HTML or Angular component.
 *
 * Example:
 * ```html
 * <igx-list>
 *   <igx-list-item isHeader="true">Contacts</igx-list-item>
 *   <igx-list-item *ngFor="let contact of contacts">
 *     <span class="name">{{ contact.name }}</span>
 *     <span class="phone">{{ contact.phone }}</span>
 *   </igx-list-item>
 * </igx-list>
 * ```
 */
@Component({
    selector: "igx-list",
    templateUrl: "list.component.html"
})
export class IgxListComponent {

    constructor(private element: ElementRef) {
    }

    @ContentChildren(forwardRef(() => IgxListItemComponent))
    public children: QueryList<IgxListItemComponent>;

    @ContentChild(IgxEmptyListTemplateDirective, { read: IgxEmptyListTemplateDirective })
    public emptyListTemplate: IgxEmptyListTemplateDirective;

    @ViewChild("defaultEmptyList", { read: TemplateRef })
    protected defaultEmptyListTemplate: TemplateRef<any>;

    @Input()
    public allowLeftPanning = false;
    @Input()
    public allowRightPanning = false;

    @Output()
    public onLeftPan = new EventEmitter<IgxListItemComponent>();
    @Output()
    public onRightPan = new EventEmitter<IgxListItemComponent>();
    @Output()
    public onPanStateChange = new EventEmitter<IPanStateChangeEventArgs>();
    @Output()
    public onItemClicked = new EventEmitter<IListItemClickEventArgs>();

    @HostBinding("attr.role")
    public get role() {
        return "list";
    }

    @HostBinding("class.igx-list-empty")
    public get emptyStyle(): boolean {
        return !this.children || this.children.length === 0;
    }

    @HostBinding("class.igx-list")
    public get listStyle(): boolean {
        return this.children && this.children.length > 0;
{'fraction_non_alphanumeric': 0.1205712219812003, 'fraction_numerical': 0.0010845986984815619, 'mean_word_length': 3.913854351687389, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 38, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3681786', 'n_tokens_mistral': 1687, 'n_tokens_neox': 1635, 'n_words': 388}