import { $ , addClass , addDisposableListener , Component , getEventPath , removeClass , } from 'src/ts/utils' ; const classActive = 'popover-active' ; const classBottom = 'popover_panel-bottom' ; export class Popover extends Component { readonly panelEl : HTMLElement ; readonly maskEl : HTMLElement ; constructor ( container , private readonly onHide ? , style ? , left ? ) { super ( container , '.popover' ) ; this . maskEl = this . el . appendChild ( $ ( '.popover_mask' ) ) ; this . panelEl = this . el . appendChild ( $ ( '.popover_panel' ) ) ; if ( style ) this . applyPanelStyle ( style ) ; if ( left ) addClass ( this . panelEl , 'popover_panel-left' ) ; addDisposableListener ( this , this . maskEl , 'click' , ( ev ) => { ev . stopPropagation ( ) ; if ( getEventPath ( ev ) . includes ( this . panelEl ) ) return ; this . hide ( ev ) ; } ) ; } resetPos ( ) { removeClass ( this . panelEl , classBottom ) ; } setBottom ( ) { addClass ( this . panelEl , classBottom ) ; } applyPanelStyle ( style ) { Object . assign ( this . panelEl . style , style ) ; } show ( ) { addClass ( this . el , classActive ) ; } hide ( ev ? ) { removeClass ( this . el , classActive ) ; if ( this . onHide ) this . onHide ( ev ) ; } }