import { Component , Input , TemplateRef , ViewChild , ChangeDetectionStrategy , HostBinding , HostListener , ElementRef , ChangeDetectorRef , EventEmitter , OnDestroy , Output , Inject , Optional , QueryList } from '@angular/core' ; import { Highlightable } from '@angular/cdk/a11y' ; import { SelectOptionBase } from './select-option-base' ; import { ENTER , SPACE , hasModifierKey } from 'ngx-tethys/util' ; import { IThyOptionGroupComponent , IThyOptionParentComponent , THY_OPTION_GROUP_COMPONENT , THY_OPTION_PARENT_COMPONENT } from './option.token' ; export class ThyOptionSelectionChangeEvent { constructor ( public option , public isUserInput = false ) { } } export class ThyOptionVisibleChangeEvent { option : ThyOptionComponent ; } @ Component ( { selector : 'thy-option' , templateUrl : './option.component.html' , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ThyOptionComponent extends SelectOptionBase implements OnDestroy , Highlightable { private _selected = false ; private _hidden = false ; private _disabled = false ; @ Input ( ) thyValue : any ; @ Input ( ) thyRawValue : any ; @ Input ( ) thyLabelText : string ; @ Input ( ) thyShowOptionCustom : boolean ; @ Input ( ) thySearchKey : string ; @ HostBinding ( 'class.thy-option-item' ) _isOptionItem = true ; @ ViewChild ( TemplateRef , { static : true } ) template : TemplateRef < any > ; @ Input ( ) @ HostBinding ( `class.disabled` ) set thyDisabled ( value ) { this . _disabled = value ; } get thyDisabled ( ) : boolean { return this . _disabled ; } get disabled ( ) : boolean { return this . hidden || this . _disabled ; } @ HostBinding ( 'class.hidden' ) get hidden ( ) : boolean { return this . _hidden ; } @ HostBinding ( 'attr.tabindex' ) get tabIndex ( ) : string { return this . disabled ? '-1' : '0' ; } @ HostBinding ( `class.active` ) get selected ( ) : boolean { return this . _selected ; } @ Output ( ) readonly selectionChange : EventEmitter < ThyOptionSelectionChangeEvent > = new EventEmitter ( ) ; @ Output ( ) readonly visibleChange : EventEmitter < ThyOptionVisibleChangeEvent > = new EventEmitter ( ) ; constructor ( public element , @ Optional ( ) @ Inject ( THY_OPTION_PARENT_COMPONENT ) public parent , @ Optional ( ) @ Inject ( THY_OPTION_GROUP_COMPONENT ) public group , private cdr ) { super ( ) ; } getHostElement ( ) { return this . element . nativeElement ; } @ HostListener ( 'click' , [ '$event' ] ) onClick ( event ) { this . selectViaInteraction ( ) ; } @ HostListener ( 'keydown' , [ '$event' ] ) handleKeydown ( event ) { if ( ( event . keyCode === ENTER || event . keyCode === SPACE ) && ! hasModifierKey ( event ) ) { this . selectViaInteraction ( ) ; event . preventDefault ( ) ; } } selectViaInteraction ( ) { if ( ! this . disabled ) { this . _selected = this . parent . isMultiple ? ! this . _selected : true ; this . cdr . markForCheck ( ) ; this . emitSelectionChangeEvent ( true ) ; } } select ( event ? ) { if ( ! this . disabled ) { if ( ! this . _selected ) { this . _selected = true ; this . emitSelectionChangeEvent ( ) ; this . cdr . markForCheck ( ) ; } } } deselect ( ) { if ( this . _selected ) { this . _selected = false ; this . emitSelectionChangeEvent ( ) ; this . cdr . markForCheck ( ) ; } } hideOption ( ) { if ( ! this . _hidden ) { this . _hidden = true ; this . visibleChange . emit ( { option : this } ) ; this . cdr . markForCheck ( ) ; } } showOption ( ) { if ( this . _hidden ) { this . _hidden = false ; this . visibleChange . emit ( { option : this } ) ; this . cdr . markForCheck ( ) ; } } matchSearchText ( searchText ) { if ( this . thySearchKey ) { if ( this . thySearchKey . toLowerCase ( ) . indexOf ( searchText . toLowerCase ( ) ) >= 0 ) { return true ; } else { return false ; } } else { if ( this . thyLabelText . toLowerCase ( ) . indexOf ( searchText . toLowerCase ( ) ) >= 0 ) { return true ; } else { return false ; } } } setActiveStyles ( ) { this . getHostElement ( ) . classList . add ( 'hover' ) ; this . cdr . markForCheck ( ) ; } setInactiveStyles ( ) { this . getHostElement ( ) . classList . remove ( 'hover' ) ; this . cdr . markForCheck ( ) ; } getLabel ( ) { return '' ; } private emitSelectionChangeEvent ( isUserInput = false ) { this . selectionChange . emit ( new ThyOptionSelectionChangeEvent ( this , isUserInput ) ) ; } ngOnDestroy ( ) { } }