import { ElementRef, EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ChangeDetectorRef, NgZone } from "@angular/core"; import { type IMyopComponent, type loaderOptions } from "@myop/sdk/host"; import * as i0 from "@angular/core"; export interface IComponentInstanceConfig { id: string; componentId: string; componentName: string; skinSelector: { [key: string]: any; }; nestedComponents?: IComponentInstanceConfig[]; resolvedExperiences?: { [key: string]: any; }[]; resolvedNestedComponents?: { [key: string]: any; }[]; [key: string]: any; } export interface SizeInfo { width: number; height: number; autoSizingWidth: boolean; autoSizingHeight: boolean; } export interface CtaEvent = Record> { action: keyof TCtaPayloads | string; payload: TCtaPayloads[keyof TCtaPayloads] | any; } /** * Converts kebab-case string to PascalCase * e.g., 'column-reordered' -> 'ColumnReordered' */ export type KebabToPascal = S extends `${infer First}-${infer Rest}` ? `${Capitalize}${KebabToPascal}` : Capitalize; /** * Generates typed event handler props from CTA payloads. * e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }` */ export type EventHandlerProps> = string extends keyof TPayloads ? {} : { [K in keyof TPayloads as `on${KebabToPascal}`]?: (payload: TPayloads[K]) => void; }; /** * Type for the `on` callback prop. */ type OnCallback> = string extends keyof TPayloads ? (action: string, payload: any) => void : (action: K, payload: TPayloads[K]) => void; /** * Typed props interface for accessing component.props with autocomplete. * Contains myop_init_interface and myop_cta_handler with proper types. */ export interface IMyopComponentProps = Record> { /** Initialize the component with data */ myop_init_interface?: (data: TData) => void; /** Handle CTA events from the component */ myop_cta_handler?: (action: K, payload: TCtaPayloads[K]) => void; } /** * Typed Myop component interface with typed props. * Use this type for the component returned in load event. */ export type ITypedMyopComponent = Record> = Omit & { /** Typed props for the component */ props: IMyopComponentProps | null; }; /** * Base props interface for MyopComponent */ interface IBaseProps = Record> { componentId?: string; componentConfig?: IComponentInstanceConfig; data?: TData; fadeDuration?: number; autoSize?: boolean; environment?: string; preview?: boolean; on?: OnCallback; } /** * Full props type including generated event handlers. * Supports both generic `on` callback and individual typed handlers like `onRowClicked`. */ export type IPropTypes = Record> = IBaseProps & EventHandlerProps; export declare class MyopComponentV2 = Record> implements OnInit, OnChanges, OnDestroy { private cdr; private ngZone; componentId?: string; componentConfig?: IComponentInstanceConfig; data?: TData; fadeDuration: number; autoSize: boolean; environment?: string; preview?: boolean; /** * Raw SDK loader options forwarded to hostSDK.loadComponent. * Use this to pass options like `injectCss` (theming), `hooks`, `timeout`, etc. * The `data` input, when provided, takes precedence over `loaderOptions.data`. */ loaderOptions?: loaderOptions; on?: (action: string, payload: any) => void; load: EventEmitter>; error: EventEmitter; sizeChange: EventEmitter; cta: EventEmitter>; myopContainer: ElementRef; customLoader?: TemplateRef; customFallback?: TemplateRef; loader?: TemplateRef; fallback?: TemplateRef; showLoader: boolean; loaderOpacity: number; showFallback: boolean; isComponentLoaded: boolean; autoSizeResult?: SizeInfo; private sizeMode; readonly logoPath = "M151.438 2.7168C177.625 2.76042 248.179 4.2832 300.4 56.7441C350.671 107.245 364.44 114.452 389.967 119.211C392.576 119.436 397.472 119.394 400.802 116.521C403.011 114.614 403.921 109.518 404.265 104.627V5.95996C404.265 4.85556 405.16 3.96023 406.265 3.95996H522.711C523.815 3.95996 524.711 4.85539 524.711 5.95996V122.405C524.711 123.51 523.815 124.405 522.711 124.405H421.998C418.579 124.728 413.852 125.627 410.974 128.095C407.879 130.748 407.042 137.805 406.845 142.661V240.414C406.845 241.436 406.111 242.292 405.093 242.38C366.548 245.717 277.079 228.462 235.837 173.668C202.909 129.919 173.882 122.474 151.458 122.077C150.354 122.058 149.459 121.164 149.459 120.06V4.71582C149.459 3.6114 150.334 2.71519 151.438 2.7168ZM62.2031 0C96.5566 0.000213148 124.405 27.8496 124.405 62.2031C124.405 96.5564 96.5564 124.405 62.2031 124.405C27.8496 124.405 0.000213175 96.5566 0 62.2031C0 27.8495 27.8495 0 62.2031 0Z"; private myopComponent; private isLoading; private pendingLoad; private autoSizeCleanup; private isCancelled; constructor(cdr: ChangeDetectorRef, ngZone: NgZone); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; private cleanup; private reloadComponent; private renderComponent; private updateData; private setupAutoSize; private hideLoader; private handleError; get loaderMinHeight(): string | undefined; get isFillMode(): boolean; get outerStyle(): { [key: string]: string; }; get innerStyle(): { [key: string]: string; }; get loaderStyle(): { [key: string]: string; }; get fallbackStyle(): { [key: string]: string; }; get resolvedLoader(): TemplateRef | undefined; get resolvedFallback(): TemplateRef | undefined; get loaderContainerStyle(): { [key: string]: string; }; get fallbackContainerStyle(): { [key: string]: string; }; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "myop-component", never, { "componentId": { "alias": "componentId"; "required": false; }; "componentConfig": { "alias": "componentConfig"; "required": false; }; "data": { "alias": "data"; "required": false; }; "fadeDuration": { "alias": "fadeDuration"; "required": false; }; "autoSize": { "alias": "autoSize"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "loaderOptions": { "alias": "loaderOptions"; "required": false; }; "on": { "alias": "on"; "required": false; }; "loader": { "alias": "loader"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; }, { "load": "load"; "error": "error"; "sizeChange": "sizeChange"; "cta": "cta"; }, ["customLoader", "customFallback"], never, true, never>; } export {};