import * as ReactDOM from 'react-dom' ; import { camelCase } from '@microsoft/sp-lodash-subset' ; import '@webcomponents/custom-elements/src/native-shim' ; import '@webcomponents/custom-elements/custom-elements.min' ; import { ThemeProvider } from '@microsoft/sp-component-base' ; import { ServiceScope , ServiceKey } from '@microsoft/sp-core-library' ; export abstract class BaseWebComponent extends HTMLElement { /**
     * The root shared service scope for all Web Part instances on the page. Use this scope to consume common services (ex: SPHttpClient, HttpClient , etc.)
     */ public _serviceScope : ServiceScope ; /**
     * INTERNAL USE ONLY. Array of service scopes of Web Part IDs who registered this web component. Use this array to look up correct service scope for a specific Web Part instance ID.
     */ public _webPartServiceScopes : Map < string , ServiceScope > ; /**
     * INTERNAL USE ONLY. Array of service keys of Web Part IDs who registered this web component. Use this array to look up correct service keys context for a specific Web Part instance ID.
     */ public _webPartServiceKeys : Map < string , { [ key ] : ServiceKey < any > ; } > ; /**
     * INTERNAL USE ONLY. For custom web component use `_serviceScope` property and the `DateHelper` service (ex: `this._serviceScope.consume<DateHelper>(DateHelper.ServiceKey)`)
     */ public _moment : any ; protected abstract connectedCallback ( ) ; protected disconnectedCallback ( ) { ReactDOM . unmountComponentAtNode ( this ) ; } returns protected resolveAttributes ( ) { let props = { } as any ; for ( let i = 0 ; i < this . attributes . length ; i ++ ) { if ( this . attributes . item ( i ) ) { let value = this . attributes . item ( i ) . value ; let attr = this . attributes . item ( i ) . name ; const matches = attr . match ( /data-(.+)/ ) ; if ( matches && matches . length === 2 ) { attr = matches [ 1 ] ; } if ( value ) { if ( /^(true|false)$/ . test ( value ) ) { props [ camelCase ( attr ) ] = ( value === 'true' ) ; } else { if ( /^(?:'|").*(?:'|")$/ . test ( value ) ) { props [ camelCase ( attr ) ] = value ; } else { try { props [ camelCase ( attr ) ] = JSON . parse ( value ) ; } catch ( error ) { if ( this . _moment && this . _moment ( value , this . _moment . ISO_8601 , true ) . isValid ( ) ) { props [ camelCase ( attr ) ] = new Date ( Date . parse ( value ) ) ; } else { props [ camelCase ( attr ) ] = value ; } } } } } } } if ( this . _serviceScope && ! props . themeVariant ) { const themeProvider = this . _serviceScope . consume ( ThemeProvider . serviceKey ) ; const themeVariant = themeProvider . tryGetTheme ( ) ; props . themeVariant = themeVariant ; } return props ; } }