@storybook/angular 10.1.0-alpha.8 → 10.1.0-beta.0

package/dist/_browser-chunks/chunk-L4GU2V72.js

@@ -1,939 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
-
-// src/client/render.ts
-var render_exports = {};
-__export(render_exports, {
-  render: () => render,
-  renderToCanvas: () => renderToCanvas,
-  rendererFactory: () => rendererFactory
-});
-import "@angular/compiler";
-
-// src/client/angular-beta/AbstractRenderer.ts
-import { bootstrapApplication } from "@angular/platform-browser";
-import { BehaviorSubject } from "rxjs";
-import { stringify } from "telejson";
-
-// src/client/angular-beta/utils/NgComponentAnalyzer.ts
-import {
-  Component,
-  Directive,
-  Input,
-  Output,
-  Pipe,
-  \u0275ReflectionCapabilities as ReflectionCapabilities
-} from "@angular/core";
-var reflectionCapabilities = new ReflectionCapabilities();
-var getComponentInputsOutputs = /* @__PURE__ */ __name((component) => {
-  const componentMetadata = getComponentDecoratorMetadata(component);
-  const componentPropsMetadata = getComponentPropsDecoratorMetadata(component);
-  const initialValue = {
-    inputs: [],
-    outputs: []
-  };
-  if (componentMetadata && componentMetadata.inputs) {
-    initialValue.inputs.push(
-      ...componentMetadata.inputs.map((i) => ({
-        propName: typeof i === "string" ? i : i.name,
-        templateName: typeof i === "string" ? i : i.alias
-      }))
-    );
-  }
-  if (componentMetadata && componentMetadata.outputs) {
-    initialValue.outputs.push(
-      ...componentMetadata.outputs.map((i) => ({ propName: i, templateName: i }))
-    );
-  }
-  if (!componentPropsMetadata) {
-    return initialValue;
-  }
-  return Object.entries(componentPropsMetadata).reduce((previousValue, [propertyName, values]) => {
-    const value = values.find((v) => v instanceof Input || v instanceof Output);
-    if (value instanceof Input) {
-      const inputToAdd = {
-        propName: propertyName,
-        templateName: value.bindingPropertyName ?? value.alias ?? propertyName
-      };
-      const previousInputsFiltered = previousValue.inputs.filter(
-        (i) => i.templateName !== propertyName
-      );
-      return {
-        ...previousValue,
-        inputs: [...previousInputsFiltered, inputToAdd]
-      };
-    }
-    if (value instanceof Output) {
-      const outputToAdd = {
-        propName: propertyName,
-        templateName: value.bindingPropertyName ?? value.alias ?? propertyName
-      };
-      const previousOutputsFiltered = previousValue.outputs.filter(
-        (i) => i.templateName !== propertyName
-      );
-      return {
-        ...previousValue,
-        outputs: [...previousOutputsFiltered, outputToAdd]
-      };
-    }
-    return previousValue;
-  }, initialValue);
-}, "getComponentInputsOutputs");
-var isComponent = /* @__PURE__ */ __name((component) => {
-  if (!component) {
-    return false;
-  }
-  const decorators = reflectionCapabilities.annotations(component);
-  return (decorators || []).some((d) => d instanceof Component);
-}, "isComponent");
-var getComponentPropsDecoratorMetadata = /* @__PURE__ */ __name((component) => {
-  return reflectionCapabilities.propMetadata(component);
-}, "getComponentPropsDecoratorMetadata");
-var getComponentDecoratorMetadata = /* @__PURE__ */ __name((component) => {
-  const decorators = reflectionCapabilities.annotations(component);
-  return decorators.reverse().find((d) => d instanceof Component);
-}, "getComponentDecoratorMetadata");
-
-// src/client/angular-beta/ComputesTemplateFromComponent.ts
-var isValidIdentifier = /* @__PURE__ */ __name((name) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name), "isValidIdentifier");
-var formatPropInTemplate = /* @__PURE__ */ __name((propertyName) => isValidIdentifier(propertyName) ? propertyName : `this['${propertyName}']`, "formatPropInTemplate");
-var separateInputsOutputsAttributes = /* @__PURE__ */ __name((ngComponentInputsOutputs, props = {}) => {
-  const inputs = ngComponentInputsOutputs.inputs.filter((i) => i.templateName in props).map((i) => i.templateName);
-  const outputs = ngComponentInputsOutputs.outputs.filter((o) => o.templateName in props).map((o) => o.templateName);
-  return {
-    inputs,
-    outputs,
-    otherProps: Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k))
-  };
-}, "separateInputsOutputsAttributes");
-var computesTemplateFromComponent = /* @__PURE__ */ __name((component, initialProps, innerTemplate = "") => {
-  const ngComponentMetadata = getComponentDecoratorMetadata(component);
-  const ngComponentInputsOutputs = getComponentInputsOutputs(component);
-  if (!ngComponentMetadata.selector) {
-    return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
-  }
-  const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(
-    ngComponentInputsOutputs,
-    initialProps
-  );
-  const templateInputs = initialInputs.length > 0 ? ` ${initialInputs.map((i) => `[${i}]="${formatPropInTemplate(i)}"`).join(" ")}` : "";
-  const templateOutputs = initialOutputs.length > 0 ? ` ${initialOutputs.map((i) => `(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}` : "";
-  return buildTemplate(
-    ngComponentMetadata.selector,
-    innerTemplate,
-    templateInputs,
-    templateOutputs
-  );
-}, "computesTemplateFromComponent");
-function stringifyCircular(obj) {
-  const seen = /* @__PURE__ */ new Set();
-  return JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return "[Circular]";
-      }
-      seen.add(value);
-    }
-    return value;
-  });
-}
-__name(stringifyCircular, "stringifyCircular");
-var createAngularInputProperty = /* @__PURE__ */ __name(({
-  propertyName,
-  value,
-  argType
-}) => {
-  let templateValue;
-  switch (typeof value) {
-    case "string":
-      templateValue = `'${value}'`;
-      break;
-    case "object":
-      templateValue = stringifyCircular(value).replace(/'/g, "\u2019").replace(/\\"/g, "\u201D").replace(/"([^-"]+)":/g, "$1: ").replace(/"/g, "'").replace(/\u2019/g, "\\'").replace(/\u201D/g, "\\'").split(",").join(", ");
-      break;
-    default:
-      templateValue = value;
-  }
-  return `[${propertyName}]="${templateValue}"`;
-}, "createAngularInputProperty");
-var computesTemplateSourceFromComponent = /* @__PURE__ */ __name((component, initialProps, argTypes) => {
-  const ngComponentMetadata = getComponentDecoratorMetadata(component);
-  if (!ngComponentMetadata) {
-    return null;
-  }
-  if (!ngComponentMetadata.selector) {
-    return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;
-  }
-  const ngComponentInputsOutputs = getComponentInputsOutputs(component);
-  const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(
-    ngComponentInputsOutputs,
-    initialProps
-  );
-  const templateInputs = initialInputs.length > 0 ? ` ${initialInputs.map(
-    (propertyName) => createAngularInputProperty({
-      propertyName,
-      value: initialProps[propertyName],
-      argType: argTypes?.[propertyName]
-    })
-  ).join(" ")}` : "";
-  const templateOutputs = initialOutputs.length > 0 ? ` ${initialOutputs.map((i) => `(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}` : "";
-  return buildTemplate(ngComponentMetadata.selector, "", templateInputs, templateOutputs);
-}, "computesTemplateSourceFromComponent");
-var buildTemplate = /* @__PURE__ */ __name((selector, innerTemplate, inputs, outputs) => {
-  const voidElements = [
-    "area",
-    "base",
-    "br",
-    "col",
-    "command",
-    "embed",
-    "hr",
-    "img",
-    "input",
-    "keygen",
-    "link",
-    "meta",
-    "param",
-    "source",
-    "track",
-    "wbr"
-  ];
-  const firstSelector = selector.split(",")[0];
-  const templateReplacers = [
-    [/(^.*?)(?=[,])/, "$1"],
-    [/(^\..+)/, "div$1"],
-    [/(^\[.+?])/, "div$1"],
-    [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, `$1`],
-    [/#([\w-]+)/, ` id="$1"`],
-    [/((\.[\w-]+)+)/, (_, c) => ` class="${c.split`.`.join` `.trim()}"`],
-    [/(\[.+?])/g, (_, a) => ` ${a.slice(1, -1)}`],
-    [
-      /([\S]+)(.*)/,
-      (template, elementSelector) => {
-        return voidElements.some((element) => elementSelector === element) ? template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs} />`) : template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs}>${innerTemplate}</$1>`);
-      }
-    ]
-  ];
-  return templateReplacers.reduce(
-    (prevSelector, [searchValue, replacer]) => prevSelector.replace(searchValue, replacer),
-    firstSelector
-  );
-}, "buildTemplate");
-
-// src/client/angular-beta/StorybookWrapperComponent.ts
-import {
-  ChangeDetectorRef,
-  Component as Component3,
-  Inject,
-  NgModule as NgModule2,
-  ViewChild,
-  ViewContainerRef
-} from "@angular/core";
-import { map, skip } from "rxjs/operators";
-
-// src/client/angular-beta/StorybookProvider.ts
-import { InjectionToken, NgZone } from "@angular/core";
-import { Observable } from "rxjs";
-var STORY_PROPS = new InjectionToken("STORY_PROPS");
-var storyPropsProvider = /* @__PURE__ */ __name((storyProps$) => ({
-  provide: STORY_PROPS,
-  useFactory: storyDataFactory(storyProps$.asObservable()),
-  deps: [NgZone]
-}), "storyPropsProvider");
-function storyDataFactory(data) {
-  return (ngZone) => new Observable((subscriber) => {
-    const sub = data.subscribe(
-      (v) => {
-        ngZone.run(() => subscriber.next(v));
-      },
-      (err) => {
-        ngZone.run(() => subscriber.error(err));
-      },
-      () => {
-        ngZone.run(() => subscriber.complete());
-      }
-    );
-    return () => {
-      sub.unsubscribe();
-    };
-  });
-}
-__name(storyDataFactory, "storyDataFactory");
-
-// src/client/angular-beta/utils/PropertyExtractor.ts
-import { CommonModule } from "@angular/common";
-import {
-  Component as Component2,
-  Directive as Directive2,
-  Injectable,
-  InjectionToken as InjectionToken2,
-  Input as Input2,
-  Output as Output2,
-  Pipe as Pipe2,
-  \u0275ReflectionCapabilities as ReflectionCapabilities3,
-  VERSION
-} from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { dedent } from "ts-dedent";
-
-// src/client/angular-beta/utils/NgModulesAnalyzer.ts
-import { NgModule, \u0275ReflectionCapabilities as ReflectionCapabilities2 } from "@angular/core";
-var reflectionCapabilities2 = new ReflectionCapabilities2();
-var isComponentAlreadyDeclared = /* @__PURE__ */ __name((componentToFind, moduleDeclarations, moduleImports) => {
-  if (moduleDeclarations && moduleDeclarations.flat().some((declaration) => declaration === componentToFind)) {
-    return true;
-  }
-  if (!moduleImports) {
-    return false;
-  }
-  return moduleImports.flat().some((importItem) => {
-    const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
-    if (!extractedNgModuleMetadata) {
-      return false;
-    }
-    return isComponentAlreadyDeclared(
-      componentToFind,
-      extractedNgModuleMetadata.declarations,
-      extractedNgModuleMetadata.imports
-    );
-  });
-}, "isComponentAlreadyDeclared");
-var extractNgModuleMetadata = /* @__PURE__ */ __name((importItem) => {
-  const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
-  const decorators = reflectionCapabilities2.annotations(target);
-  if (!decorators || decorators.length === 0) {
-    return null;
-  }
-  const ngModuleDecorator = decorators.find(
-    (decorator) => decorator instanceof NgModule
-  );
-  if (!ngModuleDecorator) {
-    return null;
-  }
-  return ngModuleDecorator;
-}, "extractNgModuleMetadata");
-
-// src/client/angular-beta/utils/PropertyExtractor.ts
-var reflectionCapabilities3 = new ReflectionCapabilities3();
-var REMOVED_MODULES = new InjectionToken2("REMOVED_MODULES");
-var uniqueArray = /* @__PURE__ */ __name((arr) => {
-  return arr.flat(Number.MAX_VALUE).filter(Boolean).filter((value, index, self) => self.indexOf(value) === index);
-}, "uniqueArray");
-var _PropertyExtractor = class _PropertyExtractor {
-  constructor(metadata, component) {
-    this.metadata = metadata;
-    this.component = component;
-    this.declarations = [];
-    /**
-     * Analyze NgModule Metadata
-     *
-     * - Removes Restricted Imports
-     * - Extracts providers from ModuleWithProviders
-     * - Returns a new NgModuleMetadata object
-     */
-    this.analyzeMetadata = /* @__PURE__ */ __name(async (metadata) => {
-      const declarations = [...metadata?.declarations || []];
-      const providers = [...metadata?.providers || []];
-      const applicationProviders = [];
-      const imports = await Promise.all(
-        [...metadata?.imports || []].map(async (imported) => {
-          const [isRestricted, restrictedProviders] = await _PropertyExtractor.analyzeRestricted(imported);
-          if (isRestricted) {
-            applicationProviders.unshift(restrictedProviders || []);
-            return null;
-          }
-          return imported;
-        })
-      ).then((results) => results.filter(Boolean));
-      return { ...metadata, imports, providers, applicationProviders, declarations };
-    }, "analyzeMetadata");
-  }
-  // With the new way of mounting standalone components to the DOM via bootstrapApplication API,
-  // we should now pass ModuleWithProviders to the providers array of the bootstrapApplication function.
-  static warnImportsModuleWithProviders(propertyExtractor) {
-    const hasModuleWithProvidersImport = propertyExtractor.imports.some(
-      (importedModule) => "ngModule" in importedModule
-    );
-    if (hasModuleWithProvidersImport) {
-      console.warn(
-        dedent(
-          `
-          Storybook Warning: 
-          moduleMetadata property 'imports' contains one or more ModuleWithProviders, likely the result of a 'Module.forRoot()'-style call.
-          In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
-          Use the 'applicationConfig' decorator from '@storybook/angular' to pass your ModuleWithProviders to the 'providers' property in combination with the importProvidersFrom helper function from '@angular/core' to extract all the necessary providers.
-          Visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information
-          `
-        )
-      );
-    }
-  }
-  async init() {
-    const analyzed = await this.analyzeMetadata(this.metadata);
-    this.imports = uniqueArray([CommonModule, analyzed.imports]);
-    this.providers = uniqueArray(analyzed.providers);
-    this.applicationProviders = uniqueArray(analyzed.applicationProviders);
-    this.declarations = uniqueArray(analyzed.declarations);
-    if (this.component) {
-      const { isDeclarable, isStandalone } = _PropertyExtractor.analyzeDecorators(this.component);
-      const isDeclared = isComponentAlreadyDeclared(
-        this.component,
-        analyzed.declarations,
-        this.imports
-      );
-      if (isStandalone) {
-        this.imports.push(this.component);
-      } else if (isDeclarable && !isDeclared) {
-        this.declarations.push(this.component);
-      }
-    }
-  }
-};
-__name(_PropertyExtractor, "PropertyExtractor");
-_PropertyExtractor.analyzeRestricted = /* @__PURE__ */ __name(async (ngModule) => {
-  if (ngModule === BrowserModule) {
-    console.warn(
-      dedent`
-          Storybook Warning:
-          You have imported the "BrowserModule", which is not necessary anymore. 
-          In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM.
-          Note that the BrowserModule providers are automatically included when starting an application with bootstrapApplication()
-          Please remove the "BrowserModule" from the list of imports in your moduleMetadata definition to remove this warning.
-        `
-    );
-    return [true];
-  }
-  try {
-    const animations = await import("@angular/platform-browser/animations");
-    if (ngModule === animations.BrowserAnimationsModule) {
-      console.warn(
-        dedent`
-            Storybook Warning:
-            You have added the "BrowserAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
-            In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
-            Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideAnimations" function to the list of "providers".
-            If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up animations. For this case, please add "importProvidersFrom(BrowserAnimationsModule)" to the list of providers of your applicationConfig definition.
-            Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
-          `
-      );
-      return [true, animations.provideAnimations()];
-    }
-    if (ngModule === animations.NoopAnimationsModule) {
-      console.warn(
-        dedent`
-            Storybook Warning:
-            You have added the "NoopAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
-            In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM, which accepts a list of providers to set up application-wide providers.
-            Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideNoopAnimations" function to the list of "providers".
-            If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up noop animations and to extract all necessary providers from NoopAnimationsModule. For this case, please add "importProvidersFrom(NoopAnimationsModule)" to the list of providers of your applicationConfig definition.
-            Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
-          `
-      );
-      return [true, animations.provideNoopAnimations()];
-    }
-  } catch (e) {
-    return [false];
-  }
-  return [false];
-}, "analyzeRestricted");
-_PropertyExtractor.analyzeDecorators = /* @__PURE__ */ __name((component) => {
-  const decorators = reflectionCapabilities3.annotations(component);
-  const isComponent2 = decorators.some((d) => _PropertyExtractor.isDecoratorInstanceOf(d, "Component"));
-  const isDirective = decorators.some((d) => _PropertyExtractor.isDecoratorInstanceOf(d, "Directive"));
-  const isPipe = decorators.some((d) => _PropertyExtractor.isDecoratorInstanceOf(d, "Pipe"));
-  const isDeclarable = isComponent2 || isDirective || isPipe;
-  let isStandalone = (isComponent2 || isDirective) && [...decorators].reverse().find(
-    (d) => _PropertyExtractor.isDecoratorInstanceOf(d, "Component") || _PropertyExtractor.isDecoratorInstanceOf(d, "Directive")
-  )?.standalone;
-  if (isStandalone === void 0) {
-    isStandalone = !!(VERSION.major && Number(VERSION.major) >= 19);
-  }
-  return { isDeclarable, isStandalone };
-}, "analyzeDecorators");
-_PropertyExtractor.isDecoratorInstanceOf = /* @__PURE__ */ __name((decorator, name) => {
-  let factory;
-  switch (name) {
-    case "Component":
-      factory = Component2;
-      break;
-    case "Directive":
-      factory = Directive2;
-      break;
-    case "Pipe":
-      factory = Pipe2;
-      break;
-    case "Injectable":
-      factory = Injectable;
-      break;
-    case "Input":
-      factory = Input2;
-      break;
-    case "Output":
-      factory = Output2;
-      break;
-    default:
-      throw new Error(`Unknown decorator type: ${name}`);
-  }
-  return decorator instanceof factory || decorator.ngMetadataName === name;
-}, "isDecoratorInstanceOf");
-var PropertyExtractor = _PropertyExtractor;
-
-// src/client/angular-beta/StorybookWrapperComponent.ts
-var getNonInputsOutputsProps = /* @__PURE__ */ __name((ngComponentInputsOutputs, props = {}) => {
-  const inputs = ngComponentInputsOutputs.inputs.filter((i) => i.templateName in props).map((i) => i.templateName);
-  const outputs = ngComponentInputsOutputs.outputs.filter((o) => o.templateName in props).map((o) => o.templateName);
-  return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
-}, "getNonInputsOutputsProps");
-var createStorybookWrapperComponent = /* @__PURE__ */ __name(({
-  selector,
-  template,
-  storyComponent,
-  styles,
-  moduleMetadata,
-  initialProps,
-  analyzedMetadata
-}) => {
-  const viewChildSelector = storyComponent ?? "__storybook-noop";
-  const { imports, declarations, providers } = analyzedMetadata;
-  let StorybookComponentModule = class {
-  };
-  __name(StorybookComponentModule, "StorybookComponentModule");
-  StorybookComponentModule = __decorateClass([
-    NgModule2({
-      declarations,
-      imports,
-      exports: [...declarations, ...imports]
-    })
-  ], StorybookComponentModule);
-  PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);
-  let StorybookWrapperComponent = class {
-    constructor(storyProps$, changeDetectorRef) {
-      this.storyProps$ = storyProps$;
-      this.changeDetectorRef = changeDetectorRef;
-      // Used in case of a component without selector
-      this.storyComponent = storyComponent ?? "";
-    }
-    ngOnInit() {
-      this.storyWrapperPropsSubscription = this.storyProps$.subscribe((storyProps = {}) => {
-        Object.assign(this, storyProps);
-        this.changeDetectorRef.detectChanges();
-        this.changeDetectorRef.markForCheck();
-      });
-    }
-    ngAfterViewInit() {
-      if (this.storyComponentElementRef) {
-        const ngComponentInputsOutputs = getComponentInputsOutputs(storyComponent);
-        const initialOtherProps = getNonInputsOutputsProps(ngComponentInputsOutputs, initialProps);
-        initialOtherProps.forEach((p) => {
-          this.storyComponentElementRef[p] = initialProps[p];
-        });
-        this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();
-        this.changeDetectorRef.detectChanges();
-        this.storyComponentPropsSubscription = this.storyProps$.pipe(
-          skip(1),
-          map((props) => {
-            const propsKeyToKeep = getNonInputsOutputsProps(ngComponentInputsOutputs, props);
-            return propsKeyToKeep.reduce((acc, p) => ({ ...acc, [p]: props[p] }), {});
-          })
-        ).subscribe((props) => {
-          Object.assign(this.storyComponentElementRef, props);
-          this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();
-          this.changeDetectorRef.detectChanges();
-        });
-      }
-    }
-    ngOnDestroy() {
-      if (this.storyComponentPropsSubscription != null) {
-        this.storyComponentPropsSubscription.unsubscribe();
-      }
-      if (this.storyWrapperPropsSubscription != null) {
-        this.storyWrapperPropsSubscription.unsubscribe();
-      }
-    }
-  };
-  __name(StorybookWrapperComponent, "StorybookWrapperComponent");
-  __decorateClass([
-    ViewChild(viewChildSelector, { static: true })
-  ], StorybookWrapperComponent.prototype, "storyComponentElementRef", 2);
-  __decorateClass([
-    ViewChild(viewChildSelector, { read: ViewContainerRef, static: true })
-  ], StorybookWrapperComponent.prototype, "storyComponentViewContainerRef", 2);
-  StorybookWrapperComponent = __decorateClass([
-    Component3({
-      selector,
-      template,
-      standalone: true,
-      imports: [StorybookComponentModule],
-      providers,
-      styles,
-      schemas: moduleMetadata.schemas
-    }),
-    __decorateParam(0, Inject(STORY_PROPS)),
-    __decorateParam(1, Inject(ChangeDetectorRef))
-  ], StorybookWrapperComponent);
-  return StorybookWrapperComponent;
-}, "createStorybookWrapperComponent");
-
-// src/client/angular-beta/StorybookModule.ts
-var getApplication = /* @__PURE__ */ __name(({
-  storyFnAngular,
-  component,
-  targetSelector,
-  analyzedMetadata
-}) => {
-  const { props, styles, moduleMetadata = {} } = storyFnAngular;
-  let { template } = storyFnAngular;
-  const hasTemplate = !hasNoTemplate(template);
-  if (!hasTemplate && component) {
-    template = computesTemplateFromComponent(component, props, "");
-  }
-  return createStorybookWrapperComponent({
-    moduleMetadata,
-    selector: targetSelector,
-    template,
-    storyComponent: component,
-    styles,
-    initialProps: props,
-    analyzedMetadata
-  });
-}, "getApplication");
-function hasNoTemplate(template) {
-  return template === null || template === void 0;
-}
-__name(hasNoTemplate, "hasNoTemplate");
-
-// src/client/angular-beta/utils/BootstrapQueue.ts
-var queue = [];
-var isProcessing = false;
-var resetCompiledComponents = /* @__PURE__ */ __name(async () => {
-  try {
-    const { \u0275resetCompiledComponents } = await import("@angular/core");
-    \u0275resetCompiledComponents();
-  } catch (e) {
-  }
-}, "resetCompiledComponents");
-var queueBootstrapping = /* @__PURE__ */ __name((fn) => {
-  return new Promise((resolve, reject) => {
-    queue.push(() => fn().then(resolve).catch(reject));
-    if (!isProcessing) {
-      processQueue();
-    }
-  });
-}, "queueBootstrapping");
-var processQueue = /* @__PURE__ */ __name(async () => {
-  isProcessing = true;
-  while (queue.length > 0) {
-    const bootstrappingFn = queue.shift();
-    if (bootstrappingFn) {
-      await bootstrappingFn();
-      await resetCompiledComponents();
-    }
-  }
-  isProcessing = false;
-}, "processQueue");
-
-// src/client/angular-beta/utils/Zoneless.ts
-var getProvideZonelessChangeDetectionFn = /* @__PURE__ */ __name(async () => {
-  const angularCore = await import("@angular/core");
-  return "provideExperimentalZonelessChangeDetection" in angularCore ? angularCore.provideExperimentalZonelessChangeDetection : "provideZonelessChangeDetection" in angularCore ? angularCore.provideZonelessChangeDetection : null;
-}, "getProvideZonelessChangeDetectionFn");
-
-// src/client/angular-beta/AbstractRenderer.ts
-var applicationRefs = /* @__PURE__ */ new Map();
-var STORY_UID_ATTRIBUTE = "data-sb-story-uid";
-var _AbstractRenderer = class _AbstractRenderer {
-  constructor() {
-    this.previousStoryRenderInfo = /* @__PURE__ */ new Map();
-  }
-  /** Wait and destroy the platform */
-  static resetApplications(domNode) {
-    applicationRefs.forEach((appRef, appDOMNode) => {
-      if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
-        appRef.destroy();
-      }
-    });
-  }
-  /**
-   * Bootstrap main angular module with main component or send only new `props` with storyProps$
-   *
-   * @param storyFnAngular {StoryFnAngularReturnType}
-   * @param forced {boolean} If :
-   *
-   *   - True render will only use the StoryFn `props' in storyProps observable that will update sotry's
-   *       component/template properties. Improves performance without reloading the whole
-   *       module&component if props changes
-   *   - False fully recharges or initializes angular module & component
-   *
-   * @param component {Component}
-   */
-  async render({
-    storyFnAngular,
-    forced,
-    component,
-    targetDOMNode
-  }) {
-    const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
-    const newStoryProps$ = new BehaviorSubject(storyFnAngular.props);
-    if (!this.fullRendererRequired({
-      targetDOMNode,
-      storyFnAngular,
-      moduleMetadata: {
-        ...storyFnAngular.moduleMetadata
-      },
-      forced
-    })) {
-      this.storyProps$.next(storyFnAngular.props);
-      return;
-    }
-    await this.beforeFullRender(targetDOMNode);
-    if (this.storyProps$) {
-      this.storyProps$.complete();
-    }
-    this.storyProps$ = newStoryProps$;
-    this.initAngularRootElement(targetDOMNode, targetSelector);
-    const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
-    await analyzedMetadata.init();
-    const storyUid = this.generateStoryUIdFromRawStoryUid(
-      targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE)
-    );
-    const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
-    if (storyUid !== null) {
-      const element = targetDOMNode.querySelector(targetSelector);
-      element.toggleAttribute(storyUid, true);
-    }
-    const application = getApplication({
-      storyFnAngular,
-      component,
-      targetSelector: componentSelector,
-      analyzedMetadata
-    });
-    const providers = [
-      storyPropsProvider(newStoryProps$),
-      ...analyzedMetadata.applicationProviders,
-      ...storyFnAngular.applicationConfig?.providers ?? []
-    ];
-    if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
-      const provideZonelessChangeDetectionFn = await getProvideZonelessChangeDetectionFn();
-      if (!provideZonelessChangeDetectionFn) {
-        throw new Error("Zoneless change detection requires Angular 18 or higher");
-      } else {
-        providers.unshift(provideZonelessChangeDetectionFn());
-      }
-    }
-    const applicationRef = await queueBootstrapping(() => {
-      return bootstrapApplication(application, {
-        ...storyFnAngular.applicationConfig,
-        providers
-      });
-    });
-    applicationRefs.set(targetDOMNode, applicationRef);
-  }
-  /**
-   * Only ASCII alphanumerics can be used as HTML tag name. https://html.spec.whatwg.org/#elements-2
-   *
-   * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
-   * https://github.com/storybookjs/storybook/issues/15147
-   *
-   * This method returns storyId when it doesn't contain any non-ASCII alphanumerics. Otherwise, it
-   * generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId,
-   * prefixing "sb-", and suffixing "-component"
-   *
-   * @memberof AbstractRenderer
-   * @protected
-   */
-  generateTargetSelectorFromStoryId(id) {
-    const invalidHtmlTag = /[^A-Za-z0-9-]/g;
-    const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
-    return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, "")}-component` : id;
-  }
-  /**
-   * Angular is unable to handle components that have selectors with accented attributes.
-   *
-   * Therefore, stories break when meta's title contains accents.
-   * https://github.com/storybookjs/storybook/issues/29132
-   *
-   * This method filters accents from a given raw id. For example, this method converts
-   * 'Example/Button with an "é" accent' into 'Example/Button with an "e" accent'.
-   *
-   * @memberof AbstractRenderer
-   * @protected
-   */
-  generateStoryUIdFromRawStoryUid(rawStoryUid) {
-    if (rawStoryUid === null) {
-      return rawStoryUid;
-    }
-    const accentCharacters = /[\u0300-\u036f]/g;
-    return rawStoryUid.normalize("NFD").replace(accentCharacters, "");
-  }
-  /** Adds DOM element that angular will use as bootstrap component. */
-  initAngularRootElement(targetDOMNode, targetSelector) {
-    targetDOMNode.innerHTML = "";
-    targetDOMNode.appendChild(document.createElement(targetSelector));
-  }
-  fullRendererRequired({
-    targetDOMNode,
-    storyFnAngular,
-    moduleMetadata,
-    forced
-  }) {
-    const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
-    const currentStoryRender = {
-      storyFnAngular,
-      moduleMetadataSnapshot: stringify(moduleMetadata, { maxDepth: 50 })
-    };
-    this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
-    if (
-      // check `forceRender` of story RenderContext
-      !forced || // if it's the first rendering and storyProps$ is not init
-      !this.storyProps$
-    ) {
-      return true;
-    }
-    const hasChangedTemplate = !!storyFnAngular?.template && previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;
-    if (hasChangedTemplate) {
-      return true;
-    }
-    const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;
-    return hasChangedModuleMetadata;
-  }
-};
-__name(_AbstractRenderer, "AbstractRenderer");
-var AbstractRenderer = _AbstractRenderer;
-
-// src/client/angular-beta/CanvasRenderer.ts
-var _CanvasRenderer = class _CanvasRenderer extends AbstractRenderer {
-  async render(options) {
-    await super.render(options);
-  }
-  async beforeFullRender() {
-    _CanvasRenderer.resetApplications();
-  }
-};
-__name(_CanvasRenderer, "CanvasRenderer");
-var CanvasRenderer = _CanvasRenderer;
-
-// src/client/angular-beta/DocsRenderer.ts
-import { DOCS_RENDERED, STORY_CHANGED } from "storybook/internal/core-events";
-import { addons } from "storybook/preview-api";
-
-// src/client/angular-beta/utils/StoryUID.ts
-var storyCounts = /* @__PURE__ */ new Map();
-var getNextStoryUID = /* @__PURE__ */ __name((storyId) => {
-  if (!storyCounts.has(storyId)) {
-    storyCounts.set(storyId, -1);
-  }
-  const count = storyCounts.get(storyId) + 1;
-  storyCounts.set(storyId, count);
-  return `${storyId}-${count}`;
-}, "getNextStoryUID");
-
-// src/client/angular-beta/DocsRenderer.ts
-var _DocsRenderer = class _DocsRenderer extends AbstractRenderer {
-  async render(options) {
-    const channel = addons.getChannel();
-    channel.once(STORY_CHANGED, async () => {
-      await _DocsRenderer.resetApplications();
-    });
-    channel.once(DOCS_RENDERED, async () => {
-      await _DocsRenderer.resetApplications();
-    });
-    await super.render({ ...options, forced: false });
-  }
-  async beforeFullRender(domNode) {
-    _DocsRenderer.resetApplications(domNode);
-  }
-  initAngularRootElement(targetDOMNode, targetSelector) {
-    super.initAngularRootElement(targetDOMNode, targetSelector);
-    targetDOMNode.setAttribute(STORY_UID_ATTRIBUTE, getNextStoryUID(targetDOMNode.id));
-  }
-};
-__name(_DocsRenderer, "DocsRenderer");
-var DocsRenderer = _DocsRenderer;
-
-// src/client/angular-beta/RendererFactory.ts
-var _RendererFactory = class _RendererFactory {
-  constructor() {
-    this.rendererMap = /* @__PURE__ */ new Map();
-  }
-  async getRendererInstance(targetDOMNode) {
-    const targetId = targetDOMNode.id;
-    if (targetDOMNode === null) {
-      return null;
-    }
-    const renderType = getRenderType(targetDOMNode);
-    if (this.lastRenderType && this.lastRenderType !== renderType) {
-      await AbstractRenderer.resetApplications();
-      clearRootHTMLElement(renderType);
-      this.rendererMap.clear();
-    }
-    if (!this.rendererMap.has(targetId)) {
-      this.rendererMap.set(targetId, this.buildRenderer(renderType));
-    }
-    this.lastRenderType = renderType;
-    return this.rendererMap.get(targetId);
-  }
-  buildRenderer(renderType) {
-    if (renderType === "docs") {
-      return new DocsRenderer();
-    }
-    return new CanvasRenderer();
-  }
-};
-__name(_RendererFactory, "RendererFactory");
-var RendererFactory = _RendererFactory;
-var getRenderType = /* @__PURE__ */ __name((targetDOMNode) => {
-  return targetDOMNode.id === "storybook-root" ? "canvas" : "docs";
-}, "getRenderType");
-function clearRootHTMLElement(renderType) {
-  switch (renderType) {
-    case "canvas":
-      global.document.getElementById("storybook-docs").innerHTML = "";
-      break;
-    case "docs":
-      global.document.getElementById("storybook-root").innerHTML = "";
-      break;
-    default:
-      break;
-  }
-}
-__name(clearRootHTMLElement, "clearRootHTMLElement");
-
-// src/client/render.ts
-var rendererFactory = new RendererFactory();
-var render = /* @__PURE__ */ __name((props) => ({ props }), "render");
-async function renderToCanvas({ storyFn, showMain, forceRemount, storyContext: { component } }, element) {
-  showMain();
-  const renderer = await rendererFactory.getRendererInstance(element);
-  await renderer.render({
-    storyFnAngular: storyFn(),
-    component,
-    forced: !forceRemount,
-    targetDOMNode: element
-  });
-}
-__name(renderToCanvas, "renderToCanvas");
-
-export {
-  __name,
-  isComponent,
-  formatPropInTemplate,
-  computesTemplateFromComponent,
-  computesTemplateSourceFromComponent,
-  render,
-  renderToCanvas,
-  render_exports
-};