@myop/angular 0.0.27 → 0.0.28

package/config.d.ts

@@ -0,0 +1,38 @@
+import { CloudRepository } from "@myop/sdk/helpers";
+/**
+ * Get the current CloudRepository instance
+ */
+export declare const getCloudRepository: () => CloudRepository;
+/**
+ * Check if a component is already preloaded/cached
+ * If env/preview not provided, checks if ANY version is preloaded
+ */
+export declare const isPreloaded: (componentId: string, env?: string, preview?: boolean) => boolean;
+/**
+ * Get the preloaded params for a component
+ */
+export declare const getPreloadedParams: (componentId: string) => {
+    env: string;
+    preview: boolean;
+} | undefined;
+/**
+ * Enable local development mode
+ */
+export declare const enableLocalDev: () => void;
+/**
+ * Set a custom CloudRepository URL
+ */
+export declare const setCloudRepositoryUrl: (url: string) => void;
+/**
+ * Set a custom CloudRepository instance
+ */
+export declare const setCloudRepository: (repository: CloudRepository) => void;
+/**
+ * Set the default environment for component loading
+ */
+export declare const setEnvironment: (env: string) => void;
+/**
+ * Preload components for faster rendering.
+ * Continues even if some components fail to load.
+ */
+export declare const preloadComponents: (ids: string[], env?: string, preview?: boolean) => Promise<PromiseSettledResult<import("@myop/sdk/common").IComponentConfig>[]>;

package/fesm2022/myop-angular.mjs

@@ -1,121 +1,604 @@
 import * as i0 from '@angular/core';
-import { inject, EnvironmentInjector, viewChild, input, linkedSignal, output, effect, ViewContainerRef, ViewChild, Component } from '@angular/core';
-import { hostSDK } from '@myop/sdk/host';
+import { EventEmitter, Input, ContentChild, ViewChild, Output, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { hostSDK, LOADER_GRADIENT, FALLBACK_GRADIENT } from '@myop/sdk/host';
 import { CloudRepository } from '@myop/sdk/helpers';
 
-class MyopContainerComponent {
-    injector;
-    elementRef;
-    environmentInjector = inject(EnvironmentInjector);
-    // protected router = inject(Router,{optional : true });
-    // protected injector = inject(Injector);
-    //protected ComponentFactoryResolver2 = inject(ComponentFactoryResolver);
-    // protected route = inject(ActivatedRoute);
-    // routeData = toSignal<{ flowId: string, componentId: string }>(this.route.data as any);
-    //// View children
-    myopContainer = viewChild('myopContainer');
-    // lazyComponent = viewChild<ElementRef<HTMLDivElement>>('lazyComponent');
-    // @ViewChild('lazyComponent', {read: ViewContainerRef}) lazyComponent?: ViewContainerRef;
-    //lazyComponent?: ViewContainerRef;
-    myopContainerRef;
-    //// INPUTS
-    _flowId = input(undefined, { alias: 'flowId' });
-    flowId = linkedSignal(() => this._flowId() || undefined);
-    _componentId = input('', { alias: 'componentId' });
-    componentId = linkedSignal(() => this._componentId() || '');
-    //_inputs = input<{ [key: string]: any }>();
-    _inputs = input({}, { alias: 'inputs' });
-    inputs = linkedSignal(() => this._inputs() || {});
-    //// Outputs
-    componentReady = output();
-    constructor(appRef, injector, elementRef) {
-        this.injector = injector;
-        this.elementRef = elementRef;
-        effect(async () => {
-            //  console.log(this.ComponentFactoryResolver2, this.environmentInjector);
-            if (this.componentId()) {
-                if (this.myopContainer()?.nativeElement) {
-                    const componentConfig = await CloudRepository.Main.fetchComponent(this.componentId(), this.flowId());
-                    const component = await hostSDK.loadComponent(componentConfig, this.myopContainer()?.nativeElement, {
-                        // @ts-ignore
-                        _environment: {
-                            inputs: this._inputs,
-                            //TODO: fix that (angular in angular mode)
-                            _angularContainerRef: this.myopContainerRef,
-                            //environmentInjector: this.environmentInjector,
-                            //appRef: appRef,
-                            doIt: (LazyLoadedComponent) => {
-                                // console.log('init into : ', LazyLoadedComponent, this.myopContainerRef);
-                                // this.myopContainerRef?.createComponent(LazyLoadedComponent);
-                                return;
-                            }
+let _cloudRepository = CloudRepository.Main;
+/**
+ * Get the current CloudRepository instance
+ */
+const getCloudRepository = () => _cloudRepository;
+/**
+ * Check if a component is already preloaded/cached
+ * If env/preview not provided, checks if ANY version is preloaded
+ */
+const isPreloaded = (componentId, env, preview) => {
+    return _cloudRepository.isPreloaded(componentId, env, preview);
+};
+/**
+ * Get the preloaded params for a component
+ */
+const getPreloadedParams = (componentId) => {
+    return _cloudRepository.getPreloadedParams(componentId);
+};
+/**
+ * Enable local development mode
+ */
+const enableLocalDev = () => {
+    _cloudRepository = new CloudRepository("http://localhost:9292");
+};
+/**
+ * Set a custom CloudRepository URL
+ */
+const setCloudRepositoryUrl = (url) => {
+    _cloudRepository = new CloudRepository(url);
+};
+/**
+ * Set a custom CloudRepository instance
+ */
+const setCloudRepository = (repository) => {
+    _cloudRepository = repository;
+};
+/**
+ * Set the default environment for component loading
+ */
+const setEnvironment = (env) => {
+    _cloudRepository.setEnvironment(env);
+};
+/**
+ * Preload components for faster rendering.
+ * Continues even if some components fail to load.
+ */
+const preloadComponents = async (ids, env, preview) => {
+    return Promise.allSettled(ids.map((id) => _cloudRepository.fetchComponentV2(id, env, preview)));
+};
+
+// Myop Logo SVG path (shared with SDK)
+const MYOP_LOGO_PATH$2 = "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";
+class MyopComponentV2 {
+    cdr;
+    ngZone;
+    // Inputs
+    componentId;
+    componentConfig;
+    data;
+    fadeDuration = 200;
+    autoSize = false;
+    environment;
+    preview;
+    on;
+    // Outputs
+    load = new EventEmitter();
+    error = new EventEmitter();
+    sizeChange = new EventEmitter();
+    cta = new EventEmitter();
+    // View refs
+    myopContainer;
+    // Content projection refs (for ng-template approach)
+    customLoader;
+    customFallback;
+    // Input refs (for component approach - e.g., [loader]="loaderTemplate")
+    loader;
+    fallback;
+    // Internal state
+    showLoader = true;
+    loaderOpacity = 1;
+    showFallback = false;
+    isComponentLoaded = false;
+    autoSizeResult;
+    // Logo path for template
+    logoPath = MYOP_LOGO_PATH$2;
+    // Private state
+    myopComponent = null;
+    isLoading = false;
+    pendingLoad = false;
+    autoSizeCleanup = null;
+    isCancelled = false;
+    constructor(cdr, ngZone) {
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+    }
+    ngOnInit() {
+        // Check if preloaded to skip loader
+        if (this.componentId && isPreloaded(this.componentId)) {
+            this.showLoader = false;
+        }
+        if (this.componentId || this.componentConfig) {
+            this.renderComponent();
+        }
+    }
+    ngOnChanges(changes) {
+        // Handle componentId change - reload component
+        if (changes["componentId"] && !changes["componentId"].firstChange) {
+            this.reloadComponent();
+        }
+        // Handle data change - call myop_init_interface
+        if (changes["data"] && !changes["data"].firstChange) {
+            this.updateData(changes["data"].currentValue);
+        }
+    }
+    ngOnDestroy() {
+        this.isCancelled = true;
+        this.cleanup();
+    }
+    cleanup() {
+        if (this.autoSizeCleanup) {
+            this.autoSizeCleanup();
+            this.autoSizeCleanup = null;
+        }
+        if (this.myopComponent) {
+            this.myopComponent.dispose();
+            this.myopComponent = null;
+        }
+    }
+    async reloadComponent() {
+        // Reset state
+        this.isComponentLoaded = false;
+        this.showFallback = false;
+        this.showLoader = true;
+        this.loaderOpacity = 1;
+        // Cleanup old component
+        this.cleanup();
+        if (this.isLoading) {
+            this.pendingLoad = true;
+        }
+        else {
+            await this.renderComponent();
+        }
+        this.cdr.markForCheck();
+    }
+    async renderComponent() {
+        this.isLoading = true;
+        this.isCancelled = false;
+        try {
+            if (!this.componentId && !this.componentConfig) {
+                this.handleError("No component configuration provided");
+                return;
+            }
+            // Only pass preview if explicitly true (Angular may default undefined to falsy)
+            const previewParam = this.preview === true ? true : undefined;
+            const componentConfig = (this.componentConfig
+                ? this.componentConfig
+                : await getCloudRepository().fetchComponentV2(this.componentId, this.environment, previewParam));
+            if (this.isCancelled)
+                return;
+            if (!this.myopContainer?.nativeElement) {
+                this.handleError("Container element not found");
+                return;
+            }
+            const loadedComponent = await hostSDK.loadComponent(componentConfig, this.myopContainer.nativeElement, {
+                data: this.data,
+                _environment: {
+                    props: {
+                        componentId: this.componentId,
+                        data: this.data,
+                        environment: this.environment,
+                        preview: this.preview,
+                        autoSize: this.autoSize,
+                    },
+                },
+            });
+            if (this.isCancelled) {
+                loadedComponent.dispose();
+                return;
+            }
+            this.myopComponent = loadedComponent;
+            // Wait for component to be fully initiated
+            await this.myopComponent.initiated();
+            if (this.isCancelled) {
+                this.myopComponent?.dispose();
+                return;
+            }
+            // Wait for browser paint
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            if (this.isCancelled ||
+                !this.myopComponent ||
+                this.myopComponent.markedForDisposed) {
+                if (this.myopComponent && !this.myopComponent.markedForDisposed) {
+                    this.myopComponent.dispose();
+                }
+                return;
+            }
+            this.isComponentLoaded = true;
+            // For non-autoSize mode, hide loader immediately
+            if (!this.autoSize) {
+                this.hideLoader();
+            }
+            else {
+                this.setupAutoSize();
+            }
+            // Setup CTA handler
+            if (this.myopComponent?.props) {
+                this.myopComponent.props.myop_cta_handler = (action, payload) => {
+                    // Run in Angular zone to trigger change detection
+                    this.ngZone.run(() => {
+                        // Call generic `on` handler if provided
+                        if (this.on) {
+                            this.on(action, payload);
                         }
+                        this.cta.emit({ action, payload });
                     });
-                    this.componentReady.emit(component);
-                }
+                };
+            }
+            this.ngZone.run(() => {
+                this.load.emit(this.myopComponent);
+                this.cdr.markForCheck();
+            });
+        }
+        catch (err) {
+            if (!this.isCancelled) {
+                this.handleError(err?.message || "Unknown error");
+            }
+        }
+        finally {
+            this.isLoading = false;
+            // Handle pending load
+            if (this.pendingLoad && !this.isCancelled) {
+                this.pendingLoad = false;
+                await this.renderComponent();
             }
+        }
+    }
+    updateData(newData) {
+        if (!this.isComponentLoaded || !this.myopComponent) {
+            return;
+        }
+        // Call myop_init_interface to update the component with new data
+        const initInterface = this.myopComponent.props?.myop_init_interface;
+        if (initInterface) {
+            initInterface(newData);
+        }
+    }
+    setupAutoSize() {
+        if (!this.isComponentLoaded || !this.myopComponent?.observeAutoSize) {
+            return;
+        }
+        let isFirstMeasurement = true;
+        this.autoSizeCleanup = this.myopComponent.observeAutoSize({
+            explicitWidth: undefined,
+            explicitHeight: undefined,
+            forceAutoSize: this.autoSize,
+            loaderMinHeight: 50,
+            onSizeChange: (result) => {
+                this.ngZone.run(() => {
+                    this.sizeChange.emit(result);
+                    this.autoSizeResult = result;
+                    // Hide loader after first measurement
+                    if (isFirstMeasurement) {
+                        isFirstMeasurement = false;
+                        this.hideLoader();
+                    }
+                    this.cdr.markForCheck();
+                });
+            },
         });
     }
-    ngOnChanges(changes) {
-        if (changes['dynamicInput']) {
-            //console.log('Dynamic input changed:', this.dynamicInput);
-            // Handle the input dynamically here
-        }
-    }
-    ngAfterViewInit() {
-        // const viewContainer = this.elementRef.nativeElement.querySelector('#lazyComponent');
-        // if (viewContainer) {
-        //   this.lazyComponent = this.injector.get(ViewContainerRef);
-        // }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MyopContainerComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: MyopContainerComponent, isStandalone: true, selector: "myop-container", inputs: { _flowId: { classPropertyName: "_flowId", publicName: "flowId", isSignal: true, isRequired: false, transformFunction: null }, _componentId: { classPropertyName: "_componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, _inputs: { classPropertyName: "_inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentReady: "componentReady" }, viewQueries: [{ propertyName: "myopContainer", first: true, predicate: ["myopContainer"], descendants: true, isSignal: true }, { propertyName: "myopContainerRef", first: true, predicate: ["myopContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
-    <div #myopContainer>
-      <ng-content>
-        <!--  Not Loaded-->
-      </ng-content>
-      <ng-content select="[error]">
-      </ng-content>
+    hideLoader() {
+        this.loaderOpacity = 0;
+        this.cdr.markForCheck();
+        setTimeout(() => {
+            this.showLoader = false;
+            this.cdr.markForCheck();
+        }, this.fadeDuration);
+    }
+    handleError(errorMsg) {
+        console.error("[MyopComponent] Error:", errorMsg);
+        this.hideLoader();
+        this.showFallback = true;
+        this.error.emit(errorMsg);
+        this.cdr.markForCheck();
+    }
+    // Computed styles
+    get shouldAutoSize() {
+        return !!(this.autoSizeResult?.autoSizingWidth ||
+            this.autoSizeResult?.autoSizingHeight);
+    }
+    get loaderMinHeight() {
+        return this.showLoader ? "50px" : undefined;
+    }
+    get outerStyle() {
+        return {
+            position: "relative",
+            width: this.autoSizeResult?.autoSizingWidth
+                ? `${this.autoSizeResult.width}px`
+                : "100%",
+            height: this.autoSizeResult?.autoSizingHeight
+                ? `${this.autoSizeResult.height}px`
+                : "100%",
+            minHeight: this.loaderMinHeight || "",
+            overflow: this.shouldAutoSize ? "hidden" : "inherit",
+        };
+    }
+    get innerStyle() {
+        return {
+            position: "absolute",
+            inset: "0",
+            overflow: this.shouldAutoSize ? "hidden" : "",
+        };
+    }
+    // Loader styles using SDK gradient
+    get loaderStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            zIndex: "1",
+            background: LOADER_GRADIENT,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: String(this.loaderOpacity),
+            transition: `opacity ${this.fadeDuration}ms ease-out`,
+        };
+    }
+    // Fallback styles using SDK gradient (kept for backwards compatibility)
+    get fallbackStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            background: FALLBACK_GRADIENT,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        };
+    }
+    // Resolved loader template (input takes precedence over content projection)
+    get resolvedLoader() {
+        return this.loader || this.customLoader;
+    }
+    // Resolved fallback template (input takes precedence over content projection)
+    get resolvedFallback() {
+        return this.fallback || this.customFallback;
+    }
+    // Container style for loader (no background - let the template handle styling)
+    get loaderContainerStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            zIndex: "1",
+            opacity: String(this.loaderOpacity),
+            transition: `opacity ${this.fadeDuration}ms ease-out`,
+        };
+    }
+    // Container style for fallback (no background - let the template handle styling)
+    get fallbackContainerStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopComponentV2, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MyopComponentV2, isStandalone: true, selector: "myop-component", inputs: { componentId: "componentId", componentConfig: "componentConfig", data: "data", fadeDuration: "fadeDuration", autoSize: "autoSize", environment: "environment", preview: "preview", on: "on", loader: "loader", fallback: "fallback" }, outputs: { load: "load", error: "error", sizeChange: "sizeChange", cta: "cta" }, queries: [{ propertyName: "customLoader", first: true, predicate: ["loader"], descendants: true }, { propertyName: "customFallback", first: true, predicate: ["fallback"], descendants: true }], viewQueries: [{ propertyName: "myopContainer", first: true, predicate: ["myopContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div [ngStyle]="outerStyle">
+      <div #myopContainer [ngStyle]="innerStyle"></div>
+      @if (showLoader && resolvedLoader) {
+        <div [ngStyle]="loaderContainerStyle">
+          <ng-container *ngTemplateOutlet="resolvedLoader"></ng-container>
+        </div>
+      }
+      @if (showFallback) {
+        @if (resolvedFallback) {
+          <div [ngStyle]="fallbackContainerStyle">
+            <ng-container *ngTemplateOutlet="resolvedFallback"></ng-container>
+          </div>
+        } @else {
+          <div [ngStyle]="fallbackStyle">
+            <svg
+              width="80"
+              viewBox="0 0 525 243"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path [attr.d]="logoPath" fill="white" />
+            </svg>
+          </div>
+        }
+      }
     </div>
-
-    <!--    <div #lazyComponent>-->
-
-    <!--    </div> -->
-  `, isInline: true });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MyopContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopComponentV2, decorators: [{
             type: Component,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'myop-container',
+                    selector: "myop-component",
                     standalone: true,
+                    imports: [CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div #myopContainer>
-      <ng-content>
-        <!--  Not Loaded-->
-      </ng-content>
-      <ng-content select="[error]">
-      </ng-content>
+    <div [ngStyle]="outerStyle">
+      <div #myopContainer [ngStyle]="innerStyle"></div>
+      @if (showLoader && resolvedLoader) {
+        <div [ngStyle]="loaderContainerStyle">
+          <ng-container *ngTemplateOutlet="resolvedLoader"></ng-container>
+        </div>
+      }
+      @if (showFallback) {
+        @if (resolvedFallback) {
+          <div [ngStyle]="fallbackContainerStyle">
+            <ng-container *ngTemplateOutlet="resolvedFallback"></ng-container>
+          </div>
+        } @else {
+          <div [ngStyle]="fallbackStyle">
+            <svg
+              width="80"
+              viewBox="0 0 525 243"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path [attr.d]="logoPath" fill="white" />
+            </svg>
+          </div>
+        }
+      }
     </div>
-
-    <!--    <div #lazyComponent>-->
-
-    <!--    </div> -->
-  `
+  `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { myopContainerRef: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { componentId: [{
+                type: Input
+            }], componentConfig: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], fadeDuration: [{
+                type: Input
+            }], autoSize: [{
+                type: Input
+            }], environment: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], on: [{
+                type: Input
+            }], load: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], sizeChange: [{
+                type: Output
+            }], cta: [{
+                type: Output
+            }], myopContainer: [{
                 type: ViewChild,
-                args: ['myopContainer', { read: ViewContainerRef }]
+                args: ["myopContainer", { static: true }]
+            }], customLoader: [{
+                type: ContentChild,
+                args: ["loader"]
+            }], customFallback: [{
+                type: ContentChild,
+                args: ["fallback"]
+            }], loader: [{
+                type: Input
+            }], fallback: [{
+                type: Input
             }] } });
 
+// Myop Logo SVG path
+const MYOP_LOGO_PATH$1 = "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";
+class MyopLoaderComponent {
+    logoPath = MYOP_LOGO_PATH$1;
+    get loaderStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            background: LOADER_GRADIENT,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: MyopLoaderComponent, isStandalone: true, selector: "myop-loader", ngImport: i0, template: `
+    <div [ngStyle]="loaderStyle">
+      <svg
+        width="80"
+        viewBox="0 0 525 243"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path [attr.d]="logoPath" fill="white" />
+      </svg>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "myop-loader",
+                    standalone: true,
+                    imports: [CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div [ngStyle]="loaderStyle">
+      <svg
+        width="80"
+        viewBox="0 0 525 243"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path [attr.d]="logoPath" fill="white" />
+      </svg>
+    </div>
+  `,
+                }]
+        }] });
+
+// Myop Logo SVG path
+const MYOP_LOGO_PATH = "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";
+class MyopFallbackComponent {
+    logoPath = MYOP_LOGO_PATH;
+    get fallbackStyle() {
+        return {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            background: FALLBACK_GRADIENT,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopFallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: MyopFallbackComponent, isStandalone: true, selector: "myop-fallback", ngImport: i0, template: `
+    <div [ngStyle]="fallbackStyle">
+      <svg
+        width="80"
+        viewBox="0 0 525 243"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path [attr.d]="logoPath" fill="white" />
+      </svg>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MyopFallbackComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "myop-fallback",
+                    standalone: true,
+                    imports: [CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div [ngStyle]="fallbackStyle">
+      <svg
+        width="80"
+        viewBox="0 0 525 243"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path [attr.d]="logoPath" fill="white" />
+      </svg>
+    </div>
+  `,
+                }]
+        }] });
+
 /*
- * Public API
+ * Public API Surface of @myop/angular
  */
-//export * from './lib/exposeAngularComponent';
+// Main component
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MyopContainerComponent };
+export { MyopComponentV2 as MyopComponent, MyopFallbackComponent as MyopFallback, MyopFallbackComponent, MyopLoaderComponent as MyopLoader, MyopLoaderComponent, enableLocalDev, getCloudRepository, getPreloadedParams, isPreloaded, preloadComponents, setCloudRepository, setCloudRepositoryUrl, setEnvironment };
 //# sourceMappingURL=myop-angular.mjs.map

package/fesm2022/myop-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"myop-angular.mjs","sources":["../../../projects/components/src/lib/myop-container.component.ts","../../../projects/components/src/public-api.ts","../../../projects/components/src/myop-angular.ts"],"sourcesContent":["import {\n  Component,\n  EnvironmentInjector,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  output,\n  viewChild,\n  ViewChild,\n  ViewContainerRef,\n  Type,\n  ApplicationRef,\n  Injector, SimpleChanges, OnChanges\n} from '@angular/core';\nimport {hostSDK, IMyopComponent} from '@myop/sdk/host';\nimport {CloudRepository} from '@myop/sdk/helpers';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'myop-container',\n  standalone: true,\n  template: `\n    <div #myopContainer>\n      <ng-content>\n        <!--  Not Loaded-->\n      </ng-content>\n      <ng-content select=\"[error]\">\n      </ng-content>\n    </div>\n\n    <!--    <div #lazyComponent>-->\n\n    <!--    </div> -->\n  `\n})\nexport class MyopContainerComponent implements OnChanges {\n\n  protected environmentInjector = inject(EnvironmentInjector);\n  // protected router = inject(Router,{optional : true });\n  // protected injector = inject(Injector);\n\n  //protected ComponentFactoryResolver2 = inject(ComponentFactoryResolver);\n\n  // protected route = inject(ActivatedRoute);\n  // routeData = toSignal<{ flowId: string, componentId: string }>(this.route.data as any);\n\n  //// View children\n  myopContainer = viewChild<ElementRef<HTMLDivElement>>('myopContainer');\n  // lazyComponent = viewChild<ElementRef<HTMLDivElement>>('lazyComponent');\n\n  // @ViewChild('lazyComponent', {read: ViewContainerRef}) lazyComponent?: ViewContainerRef;\n  //lazyComponent?: ViewContainerRef;\n\n  @ViewChild('myopContainer', {read: ViewContainerRef})\n  myopContainerRef!: ViewContainerRef;\n\n  //// INPUTS\n  _flowId = input<string | undefined>(undefined, {alias: 'flowId'});\n  flowId = linkedSignal(() => this._flowId() || undefined);\n\n  _componentId = input<string>('', {alias: 'componentId'});\n  componentId = linkedSignal(() => this._componentId() || '');\n\n  //_inputs = input<{ [key: string]: any }>();\n  _inputs = input<{ [key: string]: any }>({}, {alias: 'inputs'});\n\n  inputs = linkedSignal(() => this._inputs() || {});\n\n  //// Outputs\n  componentReady = output<IMyopComponent>()\n\n  constructor(appRef: ApplicationRef, private injector: Injector, private elementRef: ElementRef) {\n\n    effect(async () => {\n      //  console.log(this.ComponentFactoryResolver2, this.environmentInjector);\n      if (this.componentId()) {\n        if (this.myopContainer()?.nativeElement) {\n\n          const componentConfig = await CloudRepository.Main.fetchComponent(this.componentId(), this.flowId());\n          const component = await hostSDK.loadComponent(\n            componentConfig,\n            this.myopContainer()?.nativeElement as any,\n            {\n              // @ts-ignore\n              _environment: {\n                inputs: this._inputs,\n                //TODO: fix that (angular in angular mode)\n                _angularContainerRef : this.myopContainerRef,\n                //environmentInjector: this.environmentInjector,\n                //appRef: appRef,\n                doIt: (LazyLoadedComponent: Type<any>) => {\n\n                  // console.log('init into : ', LazyLoadedComponent, this.myopContainerRef);\n                  // this.myopContainerRef?.createComponent(LazyLoadedComponent);\n\n                  return;\n                }\n              }\n            });\n\n          this.componentReady.emit(component);\n        }\n      }\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['dynamicInput']) {\n      //console.log('Dynamic input changed:', this.dynamicInput);\n      // Handle the input dynamically here\n    }\n  }\n\n  ngAfterViewInit(): void {\n    // const viewContainer = this.elementRef.nativeElement.querySelector('#lazyComponent');\n    // if (viewContainer) {\n    //   this.lazyComponent = this.injector.get(ViewContainerRef);\n    // }\n  }\n}\n","/*\n * Public API\n */\n\nexport * from './lib/myop-container.component';\n//export * from './lib/exposeAngularComponent';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"myop-angular.mjs","sources":["../../../projects/components/src/config.ts","../../../projects/components/src/lib/myop.component.ts","../../../projects/components/src/lib/myop-loader.component.ts","../../../projects/components/src/lib/myop-fallback.component.ts","../../../projects/components/src/public-api.ts","../../../projects/components/src/myop-angular.ts"],"sourcesContent":["import { CloudRepository } from \"@myop/sdk/helpers\";\n\nlet _cloudRepository = CloudRepository.Main;\n\n/**\n * Get the current CloudRepository instance\n */\nexport const getCloudRepository = () => _cloudRepository;\n\n/**\n * Check if a component is already preloaded/cached\n * If env/preview not provided, checks if ANY version is preloaded\n */\nexport const isPreloaded = (\n  componentId: string,\n  env?: string,\n  preview?: boolean\n): boolean => {\n  return _cloudRepository.isPreloaded(componentId, env, preview);\n};\n\n/**\n * Get the preloaded params for a component\n */\nexport const getPreloadedParams = (componentId: string) => {\n  return _cloudRepository.getPreloadedParams(componentId);\n};\n\n/**\n * Enable local development mode\n */\nexport const enableLocalDev = () => {\n  _cloudRepository = new CloudRepository(\"http://localhost:9292\");\n};\n\n/**\n * Set a custom CloudRepository URL\n */\nexport const setCloudRepositoryUrl = (url: string) => {\n  _cloudRepository = new CloudRepository(url);\n};\n\n/**\n * Set a custom CloudRepository instance\n */\nexport const setCloudRepository = (repository: CloudRepository) => {\n  _cloudRepository = repository;\n};\n\n/**\n * Set the default environment for component loading\n */\nexport const setEnvironment = (env: string) => {\n  _cloudRepository.setEnvironment(env);\n};\n\n/**\n * Preload components for faster rendering.\n * Continues even if some components fail to load.\n */\nexport const preloadComponents = async (\n  ids: string[],\n  env?: string,\n  preview?: boolean\n) => {\n  return Promise.allSettled(\n    ids.map((id) => _cloudRepository.fetchComponentV2(id, env, preview))\n  );\n};\n","import {\n  Component,\n  ElementRef,\n  Input,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnChanges,\n  OnDestroy,\n  SimpleChanges,\n  ViewChild,\n  TemplateRef,\n  ContentChild,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  NgZone,\n} from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport {\n  hostSDK,\n  type IMyopComponent,\n  LOADER_GRADIENT,\n  FALLBACK_GRADIENT,\n} from \"@myop/sdk/host\";\nimport { getCloudRepository, isPreloaded } from \"../config\";\n\n// Myop Logo SVG path (shared with SDK)\nconst MYOP_LOGO_PATH =\n  \"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\";\n\nexport interface IComponentInstanceConfig {\n  id: string;\n  componentId: string;\n  componentName: string;\n  skinSelector: { [key: string]: any };\n  nestedComponents?: IComponentInstanceConfig[];\n  resolvedExperiences?: { [key: string]: any }[];\n  resolvedNestedComponents?: { [key: string]: any }[];\n  [key: string]: any;\n}\n\nexport interface SizeInfo {\n  width: number;\n  height: number;\n  autoSizingWidth: boolean;\n  autoSizingHeight: boolean;\n}\n\nexport interface CtaEvent<TCtaPayloads extends Record<string, any> = Record<string, any>> {\n  action: keyof TCtaPayloads | string;\n  payload: TCtaPayloads[keyof TCtaPayloads] | any;\n}\n\n/**\n * Converts kebab-case string to PascalCase\n * e.g., 'column-reordered' -> 'ColumnReordered'\n */\nexport type KebabToPascal<S extends string> =\n  S extends `${infer First}-${infer Rest}`\n    ? `${Capitalize<First>}${KebabToPascal<Rest>}`\n    : Capitalize<S>;\n\n/**\n * Generates typed event handler props from CTA payloads.\n * e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`\n */\nexport type EventHandlerProps<TPayloads extends Record<string, any>> =\n  string extends keyof TPayloads\n    ? {}\n    : {\n        [K in keyof TPayloads as `on${KebabToPascal<K & string>}`]?: (\n          payload: TPayloads[K]\n        ) => void;\n      };\n\n/**\n * Type for the `on` callback prop.\n */\ntype OnCallback<TPayloads extends Record<string, any>> =\n  string extends keyof TPayloads\n    ? (action: string, payload: any) => void\n    : <K extends keyof TPayloads>(action: K, payload: TPayloads[K]) => void;\n\n/**\n * Typed props interface for accessing component.props with autocomplete.\n * Contains myop_init_interface and myop_cta_handler with proper types.\n */\nexport interface IMyopComponentProps<\n  TData = any,\n  TCtaPayloads extends Record<string, any> = Record<string, any>\n> {\n  /** Initialize the component with data */\n  myop_init_interface?: (data: TData) => void;\n  /** Handle CTA events from the component */\n  myop_cta_handler?: <K extends keyof TCtaPayloads>(action: K, payload: TCtaPayloads[K]) => void;\n}\n\n/**\n * Typed Myop component interface with typed props.\n * Use this type for the component returned in load event.\n */\nexport type ITypedMyopComponent<\n  TData = any,\n  TCtaPayloads extends Record<string, any> = Record<string, any>\n> = Omit<IMyopComponent, 'props'> & {\n  /** Typed props for the component */\n  props: IMyopComponentProps<TData, TCtaPayloads> | null;\n};\n\n/**\n * Base props interface for MyopComponent\n */\ninterface IBaseProps<\n  TData = any,\n  TCtaPayloads extends Record<string, any> = Record<string, any>\n> {\n  componentId?: string;\n  componentConfig?: IComponentInstanceConfig;\n  data?: TData;\n  fadeDuration?: number;\n  autoSize?: boolean;\n  environment?: string;\n  preview?: boolean;\n  on?: OnCallback<TCtaPayloads>;\n}\n\n/**\n * Full props type including generated event handlers.\n * Supports both generic `on` callback and individual typed handlers like `onRowClicked`.\n */\nexport type IPropTypes<\n  TData = any,\n  TCtaPayloads extends Record<string, any> = Record<string, any>\n> = IBaseProps<TData, TCtaPayloads> & EventHandlerProps<TCtaPayloads>;\n\n@Component({\n  selector: \"myop-component\",\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [ngStyle]=\"outerStyle\">\n      <div #myopContainer [ngStyle]=\"innerStyle\"></div>\n      @if (showLoader && resolvedLoader) {\n        <div [ngStyle]=\"loaderContainerStyle\">\n          <ng-container *ngTemplateOutlet=\"resolvedLoader\"></ng-container>\n        </div>\n      }\n      @if (showFallback) {\n        @if (resolvedFallback) {\n          <div [ngStyle]=\"fallbackContainerStyle\">\n            <ng-container *ngTemplateOutlet=\"resolvedFallback\"></ng-container>\n          </div>\n        } @else {\n          <div [ngStyle]=\"fallbackStyle\">\n            <svg\n              width=\"80\"\n              viewBox=\"0 0 525 243\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path [attr.d]=\"logoPath\" fill=\"white\" />\n            </svg>\n          </div>\n        }\n      }\n    </div>\n  `,\n})\nexport class MyopComponentV2<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>>\n  implements OnInit, OnChanges, OnDestroy\n{\n  // Inputs\n  @Input() componentId?: string;\n  @Input() componentConfig?: IComponentInstanceConfig;\n  @Input() data?: TData;\n  @Input() fadeDuration: number = 200;\n  @Input() autoSize: boolean = false;\n  @Input() environment?: string;\n  @Input() preview?: boolean;\n  @Input() on?: (action: string, payload: any) => void;\n\n  // Outputs\n  @Output() load = new EventEmitter<ITypedMyopComponent<TData, TCtaPayloads>>();\n  @Output() error = new EventEmitter<string>();\n  @Output() sizeChange = new EventEmitter<SizeInfo>();\n  @Output() cta = new EventEmitter<CtaEvent<TCtaPayloads>>();\n\n  // View refs\n  @ViewChild(\"myopContainer\", { static: true })\n  myopContainer!: ElementRef<HTMLDivElement>;\n\n  // Content projection refs (for ng-template approach)\n  @ContentChild(\"loader\") customLoader?: TemplateRef<any>;\n  @ContentChild(\"fallback\") customFallback?: TemplateRef<any>;\n\n  // Input refs (for component approach - e.g., [loader]=\"loaderTemplate\")\n  @Input() loader?: TemplateRef<any>;\n  @Input() fallback?: TemplateRef<any>;\n\n  // Internal state\n  showLoader: boolean = true;\n  loaderOpacity: number = 1;\n  showFallback: boolean = false;\n  isComponentLoaded: boolean = false;\n  autoSizeResult?: SizeInfo;\n\n  // Logo path for template\n  readonly logoPath = MYOP_LOGO_PATH;\n\n  // Private state\n  private myopComponent: IMyopComponent | null = null;\n  private isLoading: boolean = false;\n  private pendingLoad: boolean = false;\n  private autoSizeCleanup: (() => void) | null = null;\n  private isCancelled: boolean = false;\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private ngZone: NgZone\n  ) {}\n\n  ngOnInit(): void {\n    // Check if preloaded to skip loader\n    if (this.componentId && isPreloaded(this.componentId)) {\n      this.showLoader = false;\n    }\n\n    if (this.componentId || this.componentConfig) {\n      this.renderComponent();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    // Handle componentId change - reload component\n    if (changes[\"componentId\"] && !changes[\"componentId\"].firstChange) {\n      this.reloadComponent();\n    }\n\n    // Handle data change - call myop_init_interface\n    if (changes[\"data\"] && !changes[\"data\"].firstChange) {\n      this.updateData(changes[\"data\"].currentValue);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.isCancelled = true;\n    this.cleanup();\n  }\n\n  private cleanup(): void {\n    if (this.autoSizeCleanup) {\n      this.autoSizeCleanup();\n      this.autoSizeCleanup = null;\n    }\n    if (this.myopComponent) {\n      this.myopComponent.dispose();\n      this.myopComponent = null;\n    }\n  }\n\n  private async reloadComponent(): Promise<void> {\n    // Reset state\n    this.isComponentLoaded = false;\n    this.showFallback = false;\n    this.showLoader = true;\n    this.loaderOpacity = 1;\n\n    // Cleanup old component\n    this.cleanup();\n\n    if (this.isLoading) {\n      this.pendingLoad = true;\n    } else {\n      await this.renderComponent();\n    }\n\n    this.cdr.markForCheck();\n  }\n\n  private async renderComponent(): Promise<void> {\n    this.isLoading = true;\n    this.isCancelled = false;\n\n    try {\n      if (!this.componentId && !this.componentConfig) {\n        this.handleError(\"No component configuration provided\");\n        return;\n      }\n\n      // Only pass preview if explicitly true (Angular may default undefined to falsy)\n      const previewParam = this.preview === true ? true : undefined;\n\n      const componentConfig = (this.componentConfig\n        ? this.componentConfig\n        : await getCloudRepository().fetchComponentV2(\n            this.componentId!,\n            this.environment,\n            previewParam\n          )) as any;\n\n      if (this.isCancelled) return;\n\n      if (!this.myopContainer?.nativeElement) {\n        this.handleError(\"Container element not found\");\n        return;\n      }\n\n      const loadedComponent = await hostSDK.loadComponent(\n        componentConfig,\n        this.myopContainer.nativeElement,\n        {\n          data: this.data,\n          _environment: {\n            props: {\n              componentId: this.componentId,\n              data: this.data,\n              environment: this.environment,\n              preview: this.preview,\n              autoSize: this.autoSize,\n            },\n          },\n        }\n      );\n\n      if (this.isCancelled) {\n        loadedComponent.dispose();\n        return;\n      }\n\n      this.myopComponent = loadedComponent;\n\n      // Wait for component to be fully initiated\n      await this.myopComponent.initiated();\n\n      if (this.isCancelled) {\n        this.myopComponent?.dispose();\n        return;\n      }\n\n      // Wait for browser paint\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n\n      if (\n        this.isCancelled ||\n        !this.myopComponent ||\n        this.myopComponent.markedForDisposed\n      ) {\n        if (this.myopComponent && !this.myopComponent.markedForDisposed) {\n          this.myopComponent.dispose();\n        }\n        return;\n      }\n\n      this.isComponentLoaded = true;\n\n      // For non-autoSize mode, hide loader immediately\n      if (!this.autoSize) {\n        this.hideLoader();\n      } else {\n        this.setupAutoSize();\n      }\n\n      // Setup CTA handler\n      if (this.myopComponent?.props) {\n        this.myopComponent.props.myop_cta_handler = (\n          action: string,\n          payload?: any\n        ) => {\n          // Run in Angular zone to trigger change detection\n          this.ngZone.run(() => {\n            // Call generic `on` handler if provided\n            if (this.on) {\n              this.on(action, payload);\n            }\n\n            this.cta.emit({ action, payload });\n          });\n        };\n      }\n\n      this.ngZone.run(() => {\n        this.load.emit(this.myopComponent!);\n        this.cdr.markForCheck();\n      });\n    } catch (err: any) {\n      if (!this.isCancelled) {\n        this.handleError(err?.message || \"Unknown error\");\n      }\n    } finally {\n      this.isLoading = false;\n\n      // Handle pending load\n      if (this.pendingLoad && !this.isCancelled) {\n        this.pendingLoad = false;\n        await this.renderComponent();\n      }\n    }\n  }\n\n  private updateData(newData: TData): void {\n    if (!this.isComponentLoaded || !this.myopComponent) {\n      return;\n    }\n\n    // Call myop_init_interface to update the component with new data\n    const initInterface = this.myopComponent.props?.myop_init_interface;\n    if (initInterface) {\n      initInterface(newData);\n    }\n  }\n\n  private setupAutoSize(): void {\n    if (!this.isComponentLoaded || !this.myopComponent?.observeAutoSize) {\n      return;\n    }\n\n    let isFirstMeasurement = true;\n\n    this.autoSizeCleanup = this.myopComponent.observeAutoSize({\n      explicitWidth: undefined,\n      explicitHeight: undefined,\n      forceAutoSize: this.autoSize,\n      loaderMinHeight: 50,\n      onSizeChange: (result: SizeInfo) => {\n        this.ngZone.run(() => {\n          this.sizeChange.emit(result);\n          this.autoSizeResult = result;\n\n          // Hide loader after first measurement\n          if (isFirstMeasurement) {\n            isFirstMeasurement = false;\n            this.hideLoader();\n          }\n\n          this.cdr.markForCheck();\n        });\n      },\n    });\n  }\n\n  private hideLoader(): void {\n    this.loaderOpacity = 0;\n    this.cdr.markForCheck();\n\n    setTimeout(() => {\n      this.showLoader = false;\n      this.cdr.markForCheck();\n    }, this.fadeDuration);\n  }\n\n  private handleError(errorMsg: string): void {\n    console.error(\"[MyopComponent] Error:\", errorMsg);\n    this.hideLoader();\n    this.showFallback = true;\n    this.error.emit(errorMsg);\n    this.cdr.markForCheck();\n  }\n\n  // Computed styles\n  get shouldAutoSize(): boolean {\n    return !!(\n      this.autoSizeResult?.autoSizingWidth ||\n      this.autoSizeResult?.autoSizingHeight\n    );\n  }\n\n  get loaderMinHeight(): string | undefined {\n    return this.showLoader ? \"50px\" : undefined;\n  }\n\n  get outerStyle(): { [key: string]: string } {\n    return {\n      position: \"relative\",\n      width: this.autoSizeResult?.autoSizingWidth\n        ? `${this.autoSizeResult.width}px`\n        : \"100%\",\n      height: this.autoSizeResult?.autoSizingHeight\n        ? `${this.autoSizeResult.height}px`\n        : \"100%\",\n      minHeight: this.loaderMinHeight || \"\",\n      overflow: this.shouldAutoSize ? \"hidden\" : \"inherit\",\n    };\n  }\n\n  get innerStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      inset: \"0\",\n      overflow: this.shouldAutoSize ? \"hidden\" : \"\",\n    };\n  }\n\n  // Loader styles using SDK gradient\n  get loaderStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      zIndex: \"1\",\n      background: LOADER_GRADIENT,\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      opacity: String(this.loaderOpacity),\n      transition: `opacity ${this.fadeDuration}ms ease-out`,\n    };\n  }\n\n  // Fallback styles using SDK gradient (kept for backwards compatibility)\n  get fallbackStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      background: FALLBACK_GRADIENT,\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    };\n  }\n\n  // Resolved loader template (input takes precedence over content projection)\n  get resolvedLoader(): TemplateRef<any> | undefined {\n    return this.loader || this.customLoader;\n  }\n\n  // Resolved fallback template (input takes precedence over content projection)\n  get resolvedFallback(): TemplateRef<any> | undefined {\n    return this.fallback || this.customFallback;\n  }\n\n  // Container style for loader (no background - let the template handle styling)\n  get loaderContainerStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      zIndex: \"1\",\n      opacity: String(this.loaderOpacity),\n      transition: `opacity ${this.fadeDuration}ms ease-out`,\n    };\n  }\n\n  // Container style for fallback (no background - let the template handle styling)\n  get fallbackContainerStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n    };\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n} from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { LOADER_GRADIENT } from \"@myop/sdk/host\";\n\n// Myop Logo SVG path\nconst MYOP_LOGO_PATH =\n  \"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\";\n\n@Component({\n  selector: \"myop-loader\",\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [ngStyle]=\"loaderStyle\">\n      <svg\n        width=\"80\"\n        viewBox=\"0 0 525 243\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path [attr.d]=\"logoPath\" fill=\"white\" />\n      </svg>\n    </div>\n  `,\n})\nexport class MyopLoaderComponent {\n  readonly logoPath = MYOP_LOGO_PATH;\n\n  get loaderStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      background: LOADER_GRADIENT,\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    };\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n} from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FALLBACK_GRADIENT } from \"@myop/sdk/host\";\n\n// Myop Logo SVG path\nconst MYOP_LOGO_PATH =\n  \"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\";\n\n@Component({\n  selector: \"myop-fallback\",\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [ngStyle]=\"fallbackStyle\">\n      <svg\n        width=\"80\"\n        viewBox=\"0 0 525 243\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path [attr.d]=\"logoPath\" fill=\"white\" />\n      </svg>\n    </div>\n  `,\n})\nexport class MyopFallbackComponent {\n  readonly logoPath = MYOP_LOGO_PATH;\n\n  get fallbackStyle(): { [key: string]: string } {\n    return {\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      background: FALLBACK_GRADIENT,\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    };\n  }\n}\n","/*\n * Public API Surface of @myop/angular\n */\n\n// Main component\nexport { MyopComponentV2 as MyopComponent } from \"./lib/myop.component\";\nexport type {\n  IComponentInstanceConfig,\n  SizeInfo,\n  CtaEvent,\n  IPropTypes,\n  KebabToPascal,\n  EventHandlerProps,\n  IMyopComponentProps,\n  ITypedMyopComponent,\n} from \"./lib/myop.component\";\n\n// Loader and Fallback components (for opt-in usage)\nexport { MyopLoaderComponent, MyopLoaderComponent as MyopLoader } from \"./lib/myop-loader.component\";\nexport { MyopFallbackComponent, MyopFallbackComponent as MyopFallback } from \"./lib/myop-fallback.component\";\n\n// Configuration utilities\nexport {\n  getCloudRepository,\n  isPreloaded,\n  getPreloadedParams,\n  enableLocalDev,\n  setCloudRepositoryUrl,\n  setCloudRepository,\n  setEnvironment,\n  preloadComponents,\n} from \"./config\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["MYOP_LOGO_PATH"],"mappings":"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"}

package/lib/myop-fallback.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class MyopFallbackComponent {
+    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";
+    get fallbackStyle(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyopFallbackComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyopFallbackComponent, "myop-fallback", never, {}, {}, never, never, true, never>;
+}

package/lib/myop-loader.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class MyopLoaderComponent {
+    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";
+    get loaderStyle(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyopLoaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyopLoaderComponent, "myop-loader", never, {}, {}, never, never, true, never>;
+}

package/lib/myop.component.d.ts

@@ -0,0 +1,149 @@
+import { ElementRef, EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ChangeDetectorRef, NgZone } from "@angular/core";
+import { type IMyopComponent } 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<TCtaPayloads extends Record<string, any> = Record<string, any>> {
+    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 string> = S extends `${infer First}-${infer Rest}` ? `${Capitalize<First>}${KebabToPascal<Rest>}` : Capitalize<S>;
+/**
+ * Generates typed event handler props from CTA payloads.
+ * e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`
+ */
+export type EventHandlerProps<TPayloads extends Record<string, any>> = string extends keyof TPayloads ? {} : {
+    [K in keyof TPayloads as `on${KebabToPascal<K & string>}`]?: (payload: TPayloads[K]) => void;
+};
+/**
+ * Type for the `on` callback prop.
+ */
+type OnCallback<TPayloads extends Record<string, any>> = string extends keyof TPayloads ? (action: string, payload: any) => void : <K extends keyof TPayloads>(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<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> {
+    /** Initialize the component with data */
+    myop_init_interface?: (data: TData) => void;
+    /** Handle CTA events from the component */
+    myop_cta_handler?: <K extends keyof TCtaPayloads>(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<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> = Omit<IMyopComponent, 'props'> & {
+    /** Typed props for the component */
+    props: IMyopComponentProps<TData, TCtaPayloads> | null;
+};
+/**
+ * Base props interface for MyopComponent
+ */
+interface IBaseProps<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> {
+    componentId?: string;
+    componentConfig?: IComponentInstanceConfig;
+    data?: TData;
+    fadeDuration?: number;
+    autoSize?: boolean;
+    environment?: string;
+    preview?: boolean;
+    on?: OnCallback<TCtaPayloads>;
+}
+/**
+ * Full props type including generated event handlers.
+ * Supports both generic `on` callback and individual typed handlers like `onRowClicked`.
+ */
+export type IPropTypes<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> = IBaseProps<TData, TCtaPayloads> & EventHandlerProps<TCtaPayloads>;
+export declare class MyopComponentV2<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> implements OnInit, OnChanges, OnDestroy {
+    private cdr;
+    private ngZone;
+    componentId?: string;
+    componentConfig?: IComponentInstanceConfig;
+    data?: TData;
+    fadeDuration: number;
+    autoSize: boolean;
+    environment?: string;
+    preview?: boolean;
+    on?: (action: string, payload: any) => void;
+    load: EventEmitter<ITypedMyopComponent<TData, TCtaPayloads>>;
+    error: EventEmitter<string>;
+    sizeChange: EventEmitter<SizeInfo>;
+    cta: EventEmitter<CtaEvent<TCtaPayloads>>;
+    myopContainer: ElementRef<HTMLDivElement>;
+    customLoader?: TemplateRef<any>;
+    customFallback?: TemplateRef<any>;
+    loader?: TemplateRef<any>;
+    fallback?: TemplateRef<any>;
+    showLoader: boolean;
+    loaderOpacity: number;
+    showFallback: boolean;
+    isComponentLoaded: boolean;
+    autoSizeResult?: SizeInfo;
+    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 shouldAutoSize(): boolean;
+    get loaderMinHeight(): string | undefined;
+    get outerStyle(): {
+        [key: string]: string;
+    };
+    get innerStyle(): {
+        [key: string]: string;
+    };
+    get loaderStyle(): {
+        [key: string]: string;
+    };
+    get fallbackStyle(): {
+        [key: string]: string;
+    };
+    get resolvedLoader(): TemplateRef<any> | undefined;
+    get resolvedFallback(): TemplateRef<any> | undefined;
+    get loaderContainerStyle(): {
+        [key: string]: string;
+    };
+    get fallbackContainerStyle(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyopComponentV2<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyopComponentV2<any, any>, "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; }; "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 {};

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@myop/angular",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
+    "@angular/core": "^19.2.0",
+    "@myop/sdk": "*"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -1 +1,5 @@
-export * from './lib/myop-container.component';
+export { MyopComponentV2 as MyopComponent } from "./lib/myop.component";
+export type { IComponentInstanceConfig, SizeInfo, CtaEvent, IPropTypes, KebabToPascal, EventHandlerProps, IMyopComponentProps, ITypedMyopComponent, } from "./lib/myop.component";
+export { MyopLoaderComponent, MyopLoaderComponent as MyopLoader } from "./lib/myop-loader.component";
+export { MyopFallbackComponent, MyopFallbackComponent as MyopFallback } from "./lib/myop-fallback.component";
+export { getCloudRepository, isPreloaded, getPreloadedParams, enableLocalDev, setCloudRepositoryUrl, setCloudRepository, setEnvironment, preloadComponents, } from "./config";

package/lib/myop-container.component.d.ts

@@ -1,26 +0,0 @@
-import { EnvironmentInjector, ElementRef, ViewContainerRef, ApplicationRef, Injector, SimpleChanges, OnChanges } from '@angular/core';
-import { IMyopComponent } from '@myop/sdk/host';
-import * as i0 from "@angular/core";
-export declare class MyopContainerComponent implements OnChanges {
-    private injector;
-    private elementRef;
-    protected environmentInjector: EnvironmentInjector;
-    myopContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
-    myopContainerRef: ViewContainerRef;
-    _flowId: import("@angular/core").InputSignal<string | undefined>;
-    flowId: import("@angular/core").WritableSignal<string | undefined>;
-    _componentId: import("@angular/core").InputSignal<string>;
-    componentId: import("@angular/core").WritableSignal<string>;
-    _inputs: import("@angular/core").InputSignal<{
-        [key: string]: any;
-    }>;
-    inputs: import("@angular/core").WritableSignal<{
-        [key: string]: any;
-    }>;
-    componentReady: import("@angular/core").OutputEmitterRef<IMyopComponent<any, any>>;
-    constructor(appRef: ApplicationRef, injector: Injector, elementRef: ElementRef);
-    ngOnChanges(changes: SimpleChanges): void;
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MyopContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MyopContainerComponent, "myop-container", never, { "_flowId": { "alias": "flowId"; "required": false; "isSignal": true; }; "_componentId": { "alias": "componentId"; "required": false; "isSignal": true; }; "_inputs": { "alias": "inputs"; "required": false; "isSignal": true; }; }, { "componentReady": "componentReady"; }, never, ["*", "[error]"], true, never>;
-}