import { Component , Input , HostBinding , ElementRef , ChangeDetectorRef , Inject , forwardRef , InjectionToken , HostListener , Optional , OnInit } from '@angular/core' ; import { FocusableOption , FocusOrigin , Highlightable } from '@angular/cdk/a11y' ; import { coerceBooleanProperty } from 'ngx-tethys/util' ; import { IThyListOptionParentComponent , THY_LIST_OPTION_PARENT_COMPONENT } from '../option.token' ; let _uniqueIdCounter = 0 ; export type ThyListLayout = 'list' | 'grid' ; @ Component ( { selector : 'thy-list-option,[thy-list-option]' , templateUrl : './list-option.component.html' } ) export class ThyListOptionComponent implements Highlightable { @ HostBinding ( `class.thy-list-option` ) get _isListOption ( ) { return this . parentSelectionList . layout === 'list' ; } @ HostBinding ( `class.thy-grid-option` ) get _parentLayout ( ) { return this . parentSelectionList . layout === 'grid' ; } @ HostBinding ( `attr.role` ) _role = 'option' ; @ HostBinding ( `attr.tabindex` ) _tabIndex = - 1 ; @ Input ( ) id = `thy-list-option-${ _uniqueIdCounter ++ }` ; @ Input ( ) thyValue : any ; @ Input ( ) set thyDisabled ( value ) { this . disabled = coerceBooleanProperty ( value ) ; } @ HostBinding ( `class.disabled` ) disabled ? : boolean ; /** Whether the option is selected. */ @ HostBinding ( `class.active` ) get selected ( ) { return this . parentSelectionList . isSelected ( this ) ; } constructor ( public element , private changeDetector , docs-private @ Optional ( ) @ Inject ( THY_LIST_OPTION_PARENT_COMPONENT ) public parentSelectionList ) { } @ HostListener ( 'click' , [ '$event' ] ) onClick ( event ) { if ( this . parentSelectionList . multiple || ! this . parentSelectionList . isSelected ( this ) ) { this . parentSelectionList . toggleOption ( this , event ) ; this . parentSelectionList . setActiveOption ( this ) ; } } /** Allows for programmatic focusing of the option. */ setActiveStyles ( ) { this . element . nativeElement . classList . add ( 'hover' ) ; this . parentSelectionList . scrollIntoView ( this ) ; } setInactiveStyles ( ) { this . element . nativeElement . classList . remove ( 'hover' ) ; } docs-private getLabel ( ) { return '' ; } }