@grafana/runtime/dist/esm/services/AngularLoader.mjs.map

Grafana Runtime Library

{"version":3,"file":"AngularLoader.mjs","sources":["../../../src/services/AngularLoader.ts"],"sourcesContent":["/**\n * Used to enable rendering of Angular components within a\n * React component without losing proper typings.\n *\n * @example\n * ```typescript\n * class Component extends PureComponent<Props> {\n *   element: HTMLElement;\n *   angularComponent: AngularComponent;\n *\n *   componentDidMount() {\n *     const template = '<angular-component />' // angular template here;\n *     const scopeProps = { ctrl: angularController }; // angular scope properties here\n *     const loader = getAngularLoader();\n *     this.angularComponent = loader.load(this.element, scopeProps, template);\n *   }\n *\n *   componentWillUnmount() {\n *     if (this.angularComponent) {\n *       this.angularComponent.destroy();\n *     }\n *   }\n *\n *   render() {\n *     return (\n *       <div ref={element => (this.element = element)} />\n *     );\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface AngularComponent {\n  /**\n   * Should be called when the React component will unmount.\n   */\n  destroy(): void;\n  /**\n   * Can be used to trigger a re-render of the Angular component.\n   */\n  digest(): void;\n  /**\n   * Used to access the Angular scope from the React component.\n   */\n  getScope(): any;\n}\n\n/**\n * Used to load an Angular component from the context of a React component.\n * Please see the {@link AngularComponent} for a proper example.\n *\n * @public\n */\nexport interface AngularLoader {\n  /**\n   *\n   * @param elem - the element that the Angular component will be loaded into.\n   * @param scopeProps - values that will be accessed via the Angular scope.\n   * @param template  - template used by the Angular component.\n   */\n  load(elem: any, scopeProps: any, template: string): AngularComponent;\n}\n\nlet instance: AngularLoader;\n\n/**\n * Used during startup by Grafana to set the AngularLoader so it is available\n * via the {@link getAngularLoader} to the rest of the application.\n *\n * @internal\n */\nexport function setAngularLoader(v: AngularLoader) {\n  instance = v;\n}\n\n/**\n * Used to retrieve the {@link AngularLoader} that enables the use of Angular\n * components within a React component.\n *\n * Please see the {@link AngularComponent} for a proper example.\n *\n * @public\n */\nexport function getAngularLoader(): AngularLoader {\n  return instance;\n}\n"],"names":[],"mappings":"AAgEA,IAAI,QAAA;AAQG,SAAS,iBAAiB,CAAkB,EAAA;AACjD,EAAW,QAAA,GAAA,CAAA;AACb;AAUO,SAAS,gBAAkC,GAAA;AAChD,EAAO,OAAA,QAAA;AACT;;;;"}