loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject();
    document.body.appendChild(script);
  });
}

loadStyle(href: string): Promise<void> {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`link[href="${href}"]`)) {
      resolve();
      return;
    }
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.onload = () => resolve();
    link.onerror = () => reject();
    document.head.appendChild(link);
  });
}

async ngAfterViewInit() {
  await this.loadStyle('./assets/octa-form-submission-webcomponent/bundle.css');
  await this.loadScript('./assets/octa-form-submission-webcomponent/bundle.js');
  const el = document.querySelector('octa-form-submission-webcomponent') as any;
  if (el) {
    el.formId = this.id;
    el.edit = true;
    el.showModifyInfo = false;
    el.formData = this.formData;
    el.top = '0';
    el.createDuplicate = false;
    el.formElements = this.formElements;
  }
}

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 👈 Important for Web Components
})
export class AppModule {}