import { type Token } from '../../DI/Container'; import { type CSSResultGroup } from '../../Dom/Css'; import { type TemplateResult } from '../../Dom/Html'; import type { Constructor } from '../../Types/Constructor'; interface IStyleInit { /** * Defines how styles are applied to the component. Use 'inline' to inject styles directly into the component instead of using adoptedStyleSheets. This is useful when you want to support browsers that do not support adoptedStyleSheets or when you want to apply styles in the light DOM. */ styleAdoption?: 'default' | 'inline'; } interface IProjectionInit { /** * Defines where the component should be rendered. Use 'light' to render the component in the light DOM instead of a shadow root. This is useful when you want to allow styles to penetrate the component or when you want to use the component as a wrapper for other elements. */ projection?: 'shadow' | 'light'; } /** * Represents the `IComponentOptions` interface. * * @public */ export interface IComponentOptions { /** * The name of the custom element. */ selector: string; /** * The styles to apply to the custom element. */ styles?: string | (() => CSSResultGroup) | CSSResultGroup | Array CSSResultGroup) | CSSResultGroup>; /** * The themes to apply to the custom element. */ themes?: Partial CSSResultGroup>>; /** * The template to apply to the custom element. */ template?: string | ((c: TComponent) => TemplateResult) | TemplateResult; /** * The imports to apply to the custom element. * This is useful when the custom element inherits other custom elements. The other custom elements must be imported. * OtherWise the browser will not be able to find them. */ imports?: Array; /** * Bind a property to an attribute or style on the host element. * A key can prefixed with `style.`, `attr.` or `class.`, the part after the prefix is used as the name of the attribute or style to bind to. */ host?: Record; /** * The shadow root options to apply to the custom element. * Use `projection: 'light'` to render into the light DOM instead of a shadow root. */ options?: ShadowRootInit & IStyleInit & IProjectionInit; /** * Provider to apply to the container. * This is useful when the custom element needs to inject classes. */ providers?: Array<{ provide: Token; useClass?: Token; }>; } /** * Class decorator factory that defines the decorated class as a custom element. * * @param options - The options to apply to the custom element. * @public * * @example * ```ts * @Component({ selector: 'my-element' }) * class MyElement extends LitElement { * render() { * return html.nothing ; * } * } * ``` */ export declare function Component(options: IComponentOptions): Function; export {}; //# sourceMappingURL=ComponentDecorator.d.ts.map