import { InjectionToken, Type, EnvironmentProviders } from '@angular/core';

/**
 * Injection Token for the ECMA `CustomElementRegistry` instance, or
 * `null` if the current platform is not browser.
 * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
 */
declare const ELEMENT_REGISTRY: InjectionToken<CustomElementRegistry | null>;

/**
 * Declaration of Angular Element tag names and
 * their corresponding implementations.
 *
 * @see `provideElements`
 *
 * @example
 * ```ts
 *  export const appElements: Elements = {
 *    'my-button': ButtonComponent,
 *    'my-icon': IconComponent,
 *  }
 * ```
 */
interface Elements {
    readonly [name: string]: Type<any>;
}

/**
 * A declarative approach to register Angular Elements.
 *
 * The elements can be either provided synchronously or asynchronously
 * via a promise.
 *
 * @remarks Noop if the current platform is not browser.
 *
 * @example
 *  ```ts
 *  export const appElements: Elements = {
 *    'my-button': ButtonComponent,
 *    'my-icon': IconComponent,
 *    'my-icon-button': IconButtonComponent,
 *  };
 *  ```
 *  ```ts
 *  providers: [
 *    provideElements(appElements),
 *  ]
 *  ```
 *  ```ts
 *  providers: [
 *    provideElements(import('./app-elements').then(m => m.appElements)),
 *  ]
 *  ```
 */
declare function provideElements(elements: Elements | Promise<Elements>): EnvironmentProviders;

export { ELEMENT_REGISTRY, provideElements };
export type { Elements };