import { LitElement, CSSResult } from 'lit'; import { Configuration } from 'gmfapi/store/config'; import { Subscription } from 'rxjs'; /** * This is a base element. * * That includes: * - i18next initialization. * - Bootstrap (custom build + color in vars), Font Awesome, reset and some custom style. * - Configuration directly available by overriding the `initConfig` method. * - RXJS subscription added to subscriptions are unsubscribe on element removal. * Example: * ```js * import {html, css} from 'lit'; * import {customElement} from 'lit/decorators.js'; * * // @ts-ignore * @customElement('my-element') * export default class MyElement extent (window as any).gmfapi.elements.BaseElement { * static styles = [ * ...(window as any).gmfapi.elements.BaseElement.styles, * css`...` * ]; * * initConfig(configuration: Any): void { * ... * }; * * render(): TemplateResult { * return html`${this.getTitle(i18next.t('Title'))} * your template` * } * } * ``` */ export default class GmfBaseElement extends LitElement { /** * @private */ i18nLanguageChangedCallback_: () => void; protected subscriptions: Subscription[]; static resetStyle: CSSResult; static bootstrapStyle: CSSResult; static fontawesomeStyle: CSSResult; static bootstrapVarStyle: CSSResult; static commonStyle: CSSResult; static styles: CSSResult[]; connectedCallback(): void; disconnectedCallback(): void; /** * Init the config and allows to override it in the inherited class. * @param {Configuration} configuration The configuration object. * @abstract * @protected */ initConfig(configuration: Configuration): void; }