import { storeChannel } from "@store" ; import { StoreChannelType , ModalStateType , ModalType } from "@types" ; ( ( ) => { const MainPage = class extends HTMLElement { private modalState : ModalStateType ; private modalElement : HTMLElement | null ; constructor ( ) { super ( ) ; this . modalState = { modalType : ModalType . upload , isHidden : true , } ; this . modalElement = null ; } static SELECTORS = { MODAL_SELECTOR : 'audi-modal' } ; connectedCallback ( ) { this . render ( ) ; this . initElement ( ) ; this . subscribe ( ) ; } render ( ) { const { modalType , isHidden } = this . modalState ; this . innerHTML = `
                <audi-header></audi-header>
                <audi-modal type=${ modalType } aria-hidden=${ isHidden }></audi-modal>
                <audi-main></audi-main>
              ` ; } initElement ( ) { this . modalElement = this . querySelector ( MainPage . SELECTORS . MODAL_SELECTOR ) ; } subscribe ( ) { storeChannel . subscribe ( StoreChannelType . MODAL_STATE_CHANNEL , this . updateModalState , this ) ; } disconnectedCallback ( ) { this . unsubscribe ( ) ; } unsubscribe ( ) { storeChannel . unsubscribe ( StoreChannelType . MODAL_STATE_CHANNEL , this . updateModalState , this ) ; } updateModalState ( newModalState ) { this . modalState = newModalState ; if ( this . modalElement === null ) return ; const { modalType , isHidden } = newModalState ; this . modalElement . setAttribute ( 'type' , modalType ) ; this . modalElement . setAttribute ( 'aria-hidden' , `${ isHidden }` ) ; } } ; customElements . define ( 'audi-main-page' , MainPage ) ; } ) ( ) ; export { } ;