# All files / ngui-list ngui-list-item.directive.ts

98.15% Statements 53/54
76.36% Branches 42/55
100% Functions 8/8
98.08% Lines 51/52

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    1041x

    1x
    1x
    1x
    1x
    1x

    1x
    1x

    7x
    7x
    7x
    7x
    7x
    7x

    1x
    2x
    2x
    2x
    1x

    1x
    1x
    1x

    2x
    3x
    3x
    3x

    3x
    3x
    3x
    3x

    3x

    1x
    1x

    1x
    1x

    1x

    2x
    2x

    1x
    1x

    1x
    1x

    2x
    1x

    2x
    1x
    1x

    2x
    1x
    1x

    1x
     import {
      Directive,
      ElementRef,
      Host,
      HostListener,
      Input,
      OnInit,
      Optional,
      Renderer2,
      ViewContainerRef
    } from '@angular/core';

    import { NguiListDirective } from './ngui-list.directive';
    import { NguiVirtualListComponent } from './ngui-virtual-list.component';
    import { NguiAutocompleteComponent } from './ngui-autocomplete.component';
    import { NoneSelect } from './none-select';
    import { NoMatchFound } from './no-match-found';

    // tabindex, keydown, keyup(ENTER, ESC), click
    @Directive({
      selector: 'ngui-list-item' // tslint:disable-line
    })
    export class NguiListItemDirective implements OnInit {
      @Input('item') object: any; // tslint:disable-line

      nextSibling: HTMLElement;
      prevSibling: HTMLElement;
      parentListComp: NguiListDirective | NguiVirtualListComponent | NguiAutocompleteComponent;

      constructor(
        private el: ElementRef,
        private renderer: Renderer2,
        private viewContainer: ViewContainerRef,
        @Optional() @Host() private listDirective: NguiListDirective,
        @Optional() @Host() private virtualListComponent: NguiVirtualListComponent,
        @Optional() @Host() private autocompleteComponent: NguiAutocompleteComponent
      ) { }

      ngOnInit(): void {
        this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '0');
        this.parentListComp = this.listDirective || this.virtualListComponent || this.autocompleteComponent;
        if (!this.parentListComp) {
          throw Error('ngui-list-item requires parent of ngui-list, ngui-virtual-list, or ngui-autocomplete.');
        }
        Eif ((this.object instanceof NoneSelect) || (this.object instanceof NoMatchFound)) {
          this.viewContainer.clear();
          this.el.nativeElement.innerHTML = this.object.html;
        }
      }

      // handles keyboard up, down, left, right
      @HostListener('keydown', ['$event']) keydown(event): void {
        const thisListItem = this.el.nativeElement;
        const keyCode = event.which || event.keyCode;
        const parentListEl = this.parentListComp.element.nativeElement;
        const listItems: Array<HTMLElement>
          = Array.from(parentListEl.querySelectorAll('ngui-list-item'));
        const listItemNdx = listItems.indexOf(thisListItem);
        const nextListItem = listItems[listItemNdx + 1] || listItems[0];
        const prevListItem = listItems[listItemNdx - 1] || listItems[listItems.length - 1];

        switch (keyCode) {
          case 37: case 38: // up arrow, left arrow
            prevListItem.focus();
            break;
          case 39: case 40: // down arrow, right arrow
            nextListItem.focus();
            break;
          default:
            break;
        }
      }

      // handles keyboard enter(13), esc(27)
      @HostListener('keyup', ['$event']) keyup(event): void {
        switch (event.key) {
          case 'Enter':
            this.parentListComp.selected.emit(this.object);
            break;
          case 'Escape':
            this.parentListComp.escaped.emit();
            break;
          default:
            break;
        }
      }

      @HostListener('click', ['$event']) mousedown(): void {
        this.parentListComp.selected.emit(this.object);
      }

      @HostListener('focus', ['$event']) focused(): void {
        Eif (this.parentListComp['setFocused']) {
          this.parentListComp['setFocused']('listItem', true);
        }
      }

      @HostListener('blur', ['$event']) blurred(): void {
        Eif (this.parentListComp['setFocused']) {
          this.parentListComp['setFocused']('listItem', false);
        }
      }
    }