@storybook/angular 9.1.0-alpha.6 → 9.1.0-alpha.7

package/dist/client/config.js

@@ -1,20 +1,49 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.argTypesEnhancers = exports.parameters = exports.applyDecorators = exports.renderToCanvas = exports.render = void 0;
-require("./globals");
-var render_1 = require("./render");
-Object.defineProperty(exports, "render", { enumerable: true, get: function () { return render_1.render; } });
-Object.defineProperty(exports, "renderToCanvas", { enumerable: true, get: function () { return render_1.renderToCanvas; } });
-var decorateStory_1 = require("./decorateStory");
-Object.defineProperty(exports, "applyDecorators", { enumerable: true, get: function () { return decorateStory_1.decorateStory; } });
-const docs_tools_1 = require("storybook/internal/docs-tools");
-const compodoc_1 = require("./compodoc");
-exports.parameters = {
-    renderer: 'angular',
-    docs: {
-        story: { inline: true },
-        extractArgTypes: compodoc_1.extractArgTypes,
-        extractComponentDescription: compodoc_1.extractComponentDescription,
-    },
-};
-exports.argTypesEnhancers = [docs_tools_1.enhanceArgTypes];
+'use strict';
+
+var global$1 = require('@storybook/global');
+require('@angular/compiler');
+var platformBrowser = require('@angular/platform-browser');
+var rxjs = require('rxjs');
+var telejson = require('telejson');
+var core = require('@angular/core');
+var operators = require('rxjs/operators');
+var common = require('@angular/common');
+var tsDedent = require('ts-dedent');
+var coreEvents = require('storybook/internal/core-events');
+var previewApi = require('storybook/preview-api');
+var docsTools = require('storybook/internal/docs-tools');
+var clientLogger = require('storybook/internal/client-logger');
+
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __decorateClass=(decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))||result);return kind&&result&&__defProp(target,key,result),result},__decorateParam=(index,decorator)=>(target,key)=>decorator(target,key,index);global$1.global.STORYBOOK_ENV="angular";var reflectionCapabilities=new core["ɵReflectionCapabilities"],getComponentInputsOutputs=component=>{let componentMetadata=getComponentDecoratorMetadata(component),componentPropsMetadata=getComponentPropsDecoratorMetadata(component),initialValue={inputs:[],outputs:[]};return componentMetadata&&componentMetadata.inputs&&initialValue.inputs.push(...componentMetadata.inputs.map(i=>({propName:typeof i=="string"?i:i.name,templateName:typeof i=="string"?i:i.alias}))),componentMetadata&&componentMetadata.outputs&&initialValue.outputs.push(...componentMetadata.outputs.map(i=>({propName:i,templateName:i}))),componentPropsMetadata?Object.entries(componentPropsMetadata).reduce((previousValue,[propertyName,values])=>{let value=values.find(v=>v instanceof core.Input||v instanceof core.Output);if(value instanceof core.Input){let inputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousInputsFiltered=previousValue.inputs.filter(i=>i.templateName!==propertyName);return {...previousValue,inputs:[...previousInputsFiltered,inputToAdd]}}if(value instanceof core.Output){let outputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousOutputsFiltered=previousValue.outputs.filter(i=>i.templateName!==propertyName);return {...previousValue,outputs:[...previousOutputsFiltered,outputToAdd]}}return previousValue},initialValue):initialValue};var getComponentPropsDecoratorMetadata=component=>reflectionCapabilities.propMetadata(component),getComponentDecoratorMetadata=component=>reflectionCapabilities.annotations(component).reverse().find(d=>d instanceof core.Component);var isValidIdentifier=name=>/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name),formatPropInTemplate=propertyName=>isValidIdentifier(propertyName)?propertyName:`this['${propertyName}']`,separateInputsOutputsAttributes=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),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))}},computesTemplateFromComponent=(component,initialProps,innerTemplate="")=>{let ngComponentMetadata=getComponentDecoratorMetadata(component),ngComponentInputsOutputs=getComponentInputsOutputs(component);if(!ngComponentMetadata.selector)return '<ng-container *ngComponentOutlet="storyComponent"></ng-container>';let{inputs:initialInputs,outputs:initialOutputs}=separateInputsOutputsAttributes(ngComponentInputsOutputs,initialProps),templateInputs=initialInputs.length>0?` ${initialInputs.map(i=>`[${i}]="${formatPropInTemplate(i)}"`).join(" ")}`:"",templateOutputs=initialOutputs.length>0?` ${initialOutputs.map(i=>`(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}`:"";return buildTemplate(ngComponentMetadata.selector,innerTemplate,templateInputs,templateOutputs)};var buildTemplate=(selector,innerTemplate,inputs,outputs)=>{let voidElements=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],firstSelector=selector.split(",")[0];return [[/(^.*?)(?=[,])/,"$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)=>voidElements.some(element=>elementSelector===element)?template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs} />`):template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs}>${innerTemplate}</$1>`)]].reduce((prevSelector,[searchValue,replacer])=>prevSelector.replace(searchValue,replacer),firstSelector)};var STORY_PROPS=new core.InjectionToken("STORY_PROPS"),storyPropsProvider=storyProps$=>({provide:STORY_PROPS,useFactory:storyDataFactory(storyProps$.asObservable()),deps:[core.NgZone]});function storyDataFactory(data){return ngZone=>new rxjs.Observable(subscriber=>{let sub=data.subscribe(v=>{ngZone.run(()=>subscriber.next(v));},err=>{ngZone.run(()=>subscriber.error(err));},()=>{ngZone.run(()=>subscriber.complete());});return ()=>{sub.unsubscribe();}})}var reflectionCapabilities2=new core["ɵReflectionCapabilities"],isComponentAlreadyDeclared=(componentToFind,moduleDeclarations,moduleImports)=>moduleDeclarations&&moduleDeclarations.flat().some(declaration=>declaration===componentToFind)?!0:moduleImports?moduleImports.flat().some(importItem=>{let extractedNgModuleMetadata=extractNgModuleMetadata(importItem);return extractedNgModuleMetadata?isComponentAlreadyDeclared(componentToFind,extractedNgModuleMetadata.declarations,extractedNgModuleMetadata.imports):!1}):!1,extractNgModuleMetadata=importItem=>{let target=importItem&&importItem.ngModule?importItem.ngModule:importItem,decorators=reflectionCapabilities2.annotations(target);if(!decorators||decorators.length===0)return null;let ngModuleDecorator=decorators.find(decorator=>decorator instanceof core.NgModule);return ngModuleDecorator||null};var reflectionCapabilities3=new core["ɵReflectionCapabilities"];new core.InjectionToken("REMOVED_MODULES");var uniqueArray=arr=>arr.flat(Number.MAX_VALUE).filter(Boolean).filter((value,index,self)=>self.indexOf(value)===index),_PropertyExtractor=class _PropertyExtractor{constructor(metadata,component){this.metadata=metadata;this.component=component;this.declarations=[];this.analyzeMetadata=async metadata=>{let declarations=[...metadata?.declarations||[]],providers=[...metadata?.providers||[]],applicationProviders=[],imports=await Promise.all([...metadata?.imports||[]].map(async imported=>{let[isRestricted,restrictedProviders]=await _PropertyExtractor.analyzeRestricted(imported);return isRestricted?(applicationProviders.unshift(restrictedProviders||[]),null):imported})).then(results=>results.filter(Boolean));return {...metadata,imports,providers,applicationProviders,declarations}};}static warnImportsModuleWithProviders(propertyExtractor){propertyExtractor.imports.some(importedModule=>"ngModule"in importedModule)&&console.warn(tsDedent.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(){let analyzed=await this.analyzeMetadata(this.metadata);if(this.imports=uniqueArray([common.CommonModule,analyzed.imports]),this.providers=uniqueArray(analyzed.providers),this.applicationProviders=uniqueArray(analyzed.applicationProviders),this.declarations=uniqueArray(analyzed.declarations),this.component){let{isDeclarable,isStandalone}=_PropertyExtractor.analyzeDecorators(this.component),isDeclared=isComponentAlreadyDeclared(this.component,analyzed.declarations,this.imports);isStandalone?this.imports.push(this.component):isDeclarable&&!isDeclared&&this.declarations.push(this.component);}}};_PropertyExtractor.analyzeRestricted=async ngModule=>{if(ngModule===platformBrowser.BrowserModule)return console.warn(tsDedent.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.
+        `),[!0];try{let animations=await import('@angular/platform-browser/animations');if(ngModule===animations.BrowserAnimationsModule)return console.warn(tsDedent.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.
+          `),[!0,animations.provideAnimations()];if(ngModule===animations.NoopAnimationsModule)return console.warn(tsDedent.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.
+          `),[!0,animations.provideNoopAnimations()]}catch{return [!1]}return [!1]},_PropertyExtractor.analyzeDecorators=component=>{let decorators=reflectionCapabilities3.annotations(component),isComponent=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Component")),isDirective=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Directive")),isPipe=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Pipe")),isDeclarable=isComponent||isDirective||isPipe,isStandalone=(isComponent||isDirective)&&[...decorators].reverse().find(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Component")||_PropertyExtractor.isDecoratorInstanceOf(d,"Directive"))?.standalone;return isStandalone===void 0&&(isStandalone=!!(core.VERSION.major&&Number(core.VERSION.major)>=19)),{isDeclarable,isStandalone}},_PropertyExtractor.isDecoratorInstanceOf=(decorator,name)=>{let factory;switch(name){case"Component":factory=core.Component;break;case"Directive":factory=core.Directive;break;case"Pipe":factory=core.Pipe;break;case"Injectable":factory=core.Injectable;break;case"Input":factory=core.Input;break;case"Output":factory=core.Output;break;default:throw new Error(`Unknown decorator type: ${name}`)}return decorator instanceof factory||decorator.ngMetadataName===name};var PropertyExtractor=_PropertyExtractor;var getNonInputsOutputsProps=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),outputs=ngComponentInputsOutputs.outputs.filter(o=>o.templateName in props).map(o=>o.templateName);return Object.keys(props).filter(k=>![...inputs,...outputs].includes(k))},createStorybookWrapperComponent=({selector,template,storyComponent,styles,moduleMetadata,initialProps,analyzedMetadata})=>{let viewChildSelector=storyComponent??"__storybook-noop",{imports,declarations,providers}=analyzedMetadata,StorybookComponentModule=class{};StorybookComponentModule=__decorateClass([core.NgModule({declarations,imports,exports:[...declarations,...imports]})],StorybookComponentModule),PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);let StorybookWrapperComponent=class{constructor(storyProps$,changeDetectorRef){this.storyProps$=storyProps$;this.changeDetectorRef=changeDetectorRef;this.storyComponent=storyComponent??"";}ngOnInit(){this.storyWrapperPropsSubscription=this.storyProps$.subscribe((storyProps={})=>{Object.assign(this,storyProps),this.changeDetectorRef.detectChanges(),this.changeDetectorRef.markForCheck();});}ngAfterViewInit(){if(this.storyComponentElementRef){let ngComponentInputsOutputs=getComponentInputsOutputs(storyComponent);getNonInputsOutputsProps(ngComponentInputsOutputs,initialProps).forEach(p=>{this.storyComponentElementRef[p]=initialProps[p];}),this.storyComponentViewContainerRef.injector.get(core.ChangeDetectorRef).markForCheck(),this.changeDetectorRef.detectChanges(),this.storyComponentPropsSubscription=this.storyProps$.pipe(operators.skip(1),operators.map(props=>getNonInputsOutputsProps(ngComponentInputsOutputs,props).reduce((acc,p)=>({...acc,[p]:props[p]}),{}))).subscribe(props=>{Object.assign(this.storyComponentElementRef,props),this.storyComponentViewContainerRef.injector.get(core.ChangeDetectorRef).markForCheck(),this.changeDetectorRef.detectChanges();});}}ngOnDestroy(){this.storyComponentPropsSubscription!=null&&this.storyComponentPropsSubscription.unsubscribe(),this.storyWrapperPropsSubscription!=null&&this.storyWrapperPropsSubscription.unsubscribe();}};return __decorateClass([core.ViewChild(viewChildSelector,{static:!0})],StorybookWrapperComponent.prototype,"storyComponentElementRef",2),__decorateClass([core.ViewChild(viewChildSelector,{read:core.ViewContainerRef,static:!0})],StorybookWrapperComponent.prototype,"storyComponentViewContainerRef",2),StorybookWrapperComponent=__decorateClass([core.Component({selector,template,standalone:!0,imports:[StorybookComponentModule],providers,styles,schemas:moduleMetadata.schemas}),__decorateParam(0,core.Inject(STORY_PROPS)),__decorateParam(1,core.Inject(core.ChangeDetectorRef))],StorybookWrapperComponent),StorybookWrapperComponent};var getApplication=({storyFnAngular,component,targetSelector,analyzedMetadata})=>{let{props,styles,moduleMetadata={}}=storyFnAngular,{template}=storyFnAngular;return !!hasNoTemplate(template)&&component&&(template=computesTemplateFromComponent(component,props,"")),createStorybookWrapperComponent({moduleMetadata,selector:targetSelector,template,storyComponent:component,styles,initialProps:props,analyzedMetadata})};function hasNoTemplate(template){return template==null}var queue=[],isProcessing=!1,resetCompiledComponents=async()=>{try{let{\u0275resetCompiledComponents}=await import('@angular/core');\u0275resetCompiledComponents();}catch{}},queueBootstrapping=fn=>new Promise((resolve,reject)=>{queue.push(()=>fn().then(resolve).catch(reject)),isProcessing||processQueue();}),processQueue=async()=>{for(isProcessing=!0;queue.length>0;){let bootstrappingFn=queue.shift();bootstrappingFn&&(await bootstrappingFn(),await resetCompiledComponents());}isProcessing=!1;};var getProvideZonelessChangeDetectionFn=async()=>{let angularCore=await import('@angular/core');return "provideExperimentalZonelessChangeDetection"in angularCore?angularCore.provideExperimentalZonelessChangeDetection:"provideZonelessChangeDetection"in angularCore?angularCore.provideZonelessChangeDetection:null};var applicationRefs=new Map,STORY_UID_ATTRIBUTE="data-sb-story-uid",AbstractRenderer=class{constructor(){this.previousStoryRenderInfo=new Map;}static resetApplications(domNode){applicationRefs.forEach((appRef,appDOMNode)=>{!appRef.destroyed&&(!domNode||appDOMNode===domNode)&&appRef.destroy();});}async render({storyFnAngular,forced,component,targetDOMNode}){let targetSelector=this.generateTargetSelectorFromStoryId(targetDOMNode.id),newStoryProps$=new rxjs.BehaviorSubject(storyFnAngular.props);if(!this.fullRendererRequired({targetDOMNode,storyFnAngular,moduleMetadata:{...storyFnAngular.moduleMetadata},forced})){this.storyProps$.next(storyFnAngular.props);return}await this.beforeFullRender(targetDOMNode),this.storyProps$&&this.storyProps$.complete(),this.storyProps$=newStoryProps$,this.initAngularRootElement(targetDOMNode,targetSelector);let analyzedMetadata=new PropertyExtractor(storyFnAngular.moduleMetadata,component);await analyzedMetadata.init();let storyUid=this.generateStoryUIdFromRawStoryUid(targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE)),componentSelector=storyUid!==null?`${targetSelector}[${storyUid}]`:targetSelector;storyUid!==null&&targetDOMNode.querySelector(targetSelector).toggleAttribute(storyUid,!0);let application=getApplication({storyFnAngular,component,targetSelector:componentSelector,analyzedMetadata}),providers=[storyPropsProvider(newStoryProps$),...analyzedMetadata.applicationProviders,...storyFnAngular.applicationConfig?.providers??[]];if(STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless){let provideZonelessChangeDetectionFn=await getProvideZonelessChangeDetectionFn();if(provideZonelessChangeDetectionFn)providers.unshift(provideZonelessChangeDetectionFn());else throw new Error("Zoneless change detection requires Angular 18 or higher")}let applicationRef=await queueBootstrapping(()=>platformBrowser.bootstrapApplication(application,{...storyFnAngular.applicationConfig,providers}));applicationRefs.set(targetDOMNode,applicationRef);}generateTargetSelectorFromStoryId(id){let invalidHtmlTag=/[^A-Za-z0-9-]/g;return invalidHtmlTag.test(id)?`sb-${id.replace(invalidHtmlTag,"")}-component`:id}generateStoryUIdFromRawStoryUid(rawStoryUid){if(rawStoryUid===null)return rawStoryUid;let accentCharacters=/[\u0300-\u036f]/g;return rawStoryUid.normalize("NFD").replace(accentCharacters,"")}initAngularRootElement(targetDOMNode,targetSelector){targetDOMNode.innerHTML="",targetDOMNode.appendChild(document.createElement(targetSelector));}fullRendererRequired({targetDOMNode,storyFnAngular,moduleMetadata,forced}){let previousStoryRenderInfo=this.previousStoryRenderInfo.get(targetDOMNode),currentStoryRender={storyFnAngular,moduleMetadataSnapshot:telejson.stringify(moduleMetadata,{maxDepth:50})};return this.previousStoryRenderInfo.set(targetDOMNode,currentStoryRender),!forced||!this.storyProps$||!!storyFnAngular?.template&&previousStoryRenderInfo?.storyFnAngular?.template!==storyFnAngular.template?!0:currentStoryRender.moduleMetadataSnapshot!==previousStoryRenderInfo?.moduleMetadataSnapshot}};var CanvasRenderer=class _CanvasRenderer extends AbstractRenderer{async render(options){await super.render(options);}async beforeFullRender(){_CanvasRenderer.resetApplications();}};var storyCounts=new Map,getNextStoryUID=storyId=>{storyCounts.has(storyId)||storyCounts.set(storyId,-1);let count=storyCounts.get(storyId)+1;return storyCounts.set(storyId,count),`${storyId}-${count}`};var DocsRenderer=class _DocsRenderer extends AbstractRenderer{async render(options){let channel=previewApi.addons.getChannel();channel.once(coreEvents.STORY_CHANGED,async()=>{await _DocsRenderer.resetApplications();}),channel.once(coreEvents.DOCS_RENDERED,async()=>{await _DocsRenderer.resetApplications();}),await super.render({...options,forced:!1});}async beforeFullRender(domNode){_DocsRenderer.resetApplications(domNode);}initAngularRootElement(targetDOMNode,targetSelector){super.initAngularRootElement(targetDOMNode,targetSelector),targetDOMNode.setAttribute(STORY_UID_ATTRIBUTE,getNextStoryUID(targetDOMNode.id));}};var RendererFactory=class{constructor(){this.rendererMap=new Map;}async getRendererInstance(targetDOMNode){let targetId=targetDOMNode.id;if(targetDOMNode===null)return null;let renderType=getRenderType(targetDOMNode);return this.lastRenderType&&this.lastRenderType!==renderType&&(await AbstractRenderer.resetApplications(),clearRootHTMLElement(renderType),this.rendererMap.clear()),this.rendererMap.has(targetId)||this.rendererMap.set(targetId,this.buildRenderer(renderType)),this.lastRenderType=renderType,this.rendererMap.get(targetId)}buildRenderer(renderType){return renderType==="docs"?new DocsRenderer:new CanvasRenderer}},getRenderType=targetDOMNode=>targetDOMNode.id==="storybook-root"?"canvas":"docs";function clearRootHTMLElement(renderType){switch(renderType){case"canvas":global.document.getElementById("storybook-docs").innerHTML="";break;case"docs":global.document.getElementById("storybook-root").innerHTML="";break;}}var rendererFactory=new RendererFactory,render=props=>({props});async function renderToCanvas({storyFn,showMain,forceRemount,storyContext:{component}},element){showMain(),await(await rendererFactory.getRendererInstance(element)).render({storyFnAngular:storyFn(),component,forced:!forceRemount,targetDOMNode:element});}function decorateStory(mainStoryFn,decorators){return [cleanArgsDecorator,...decorators].reduce((previousStoryFn,decorator)=>context=>decorator(update=>previousStoryFn({...context,...previewApi.sanitizeStoryContextUpdate(update)}),context),context=>prepareMain(mainStoryFn(context),context))}var prepareMain=(story,context)=>{let{template}=story,{component}=context,userDefinedTemplate=!hasNoTemplate2(template);return !userDefinedTemplate&&component&&(template=computesTemplateFromComponent(component,story.props,"")),{...story,...template?{template,userDefinedTemplate}:{}}};function hasNoTemplate2(template){return template==null}var cleanArgsDecorator=(storyFn,context)=>{if(!context.argTypes||!context.args)return storyFn();let argsToClean=context.args;return context.args=Object.entries(argsToClean).reduce((obj,[key,arg])=>{let argType=context.argTypes[key];return argType?.action||argType?.control?{...obj,[key]:arg}:obj},{}),storyFn()};var{FEATURES}=global$1.global,isMethod=methodOrProp=>methodOrProp.args!==void 0;var getCompodocJson=()=>global$1.global.__STORYBOOK_COMPODOC_JSON__,checkValidComponentOrDirective=component=>{if(!component.name)throw new Error(`Invalid component ${JSON.stringify(component)}`)},checkValidCompodocJson=compodocJson=>{if(!compodocJson||!compodocJson.components)throw new Error("Invalid compodoc JSON")},hasDecorator=(item,decoratorName)=>item.decorators&&item.decorators.find(x=>x.name===decoratorName),mapPropertyToSection=item=>hasDecorator(item,"ViewChild")?"view child":hasDecorator(item,"ViewChildren")?"view children":hasDecorator(item,"ContentChild")?"content child":hasDecorator(item,"ContentChildren")?"content children":"properties",mapItemToSection=(key,item)=>{switch(key){case"methods":case"methodsClass":return "methods";case"inputsClass":return "inputs";case"outputsClass":return "outputs";case"properties":case"propertiesClass":if(isMethod(item))throw new Error("Cannot be of type Method if key === 'propertiesClass'");return mapPropertyToSection(item);default:throw new Error(`Unknown key: ${key}`)}},findComponentByName=(name,compodocJson)=>compodocJson.components.find(c=>c.name===name)||compodocJson.directives.find(c=>c.name===name)||compodocJson.pipes.find(c=>c.name===name)||compodocJson.injectables.find(c=>c.name===name)||compodocJson.classes.find(c=>c.name===name),getComponentData=component=>{if(!component)return null;checkValidComponentOrDirective(component);let compodocJson=getCompodocJson();if(!compodocJson)return null;checkValidCompodocJson(compodocJson);let{name}=component,metadata=findComponentByName(name,compodocJson);return metadata||clientLogger.logger.warn(`Component not found in compodoc JSON: '${name}'`),metadata},displaySignature=item=>`(${item.args.map(arg=>`${arg.name}${arg.optional?"?":""}: ${arg.type}`).join(", ")}) => ${item.returnType}`,extractTypeFromValue=defaultValue=>{let valueType=typeof defaultValue;return defaultValue||valueType==="number"||valueType==="boolean"||valueType==="string"?valueType:null},extractEnumValues=compodocType=>{let enumType=getCompodocJson()?.miscellaneous?.enumerations?.find(x=>x.name===compodocType);if(enumType?.childs.every(x=>x.value))return enumType.childs.map(x=>x.value);if(typeof compodocType!="string"||compodocType.indexOf("|")===-1)return null;try{return compodocType.split("|").map(value=>JSON.parse(value))}catch{return null}},extractType=(property,defaultValue)=>{let compodocType=property.type||extractTypeFromValue(defaultValue);switch(compodocType){case"string":case"boolean":case"number":return {name:compodocType};case void 0:case null:return {name:"other",value:"void"};default:{let resolvedType=resolveTypealias(compodocType),enumValues=extractEnumValues(resolvedType);return enumValues?{name:"enum",value:enumValues}:{name:"other",value:"empty-enum"}}}},castDefaultValue=(property,defaultValue)=>{let compodocType=property.type;if(["boolean","number","string","EventEmitter"].includes(compodocType))switch(compodocType){case"boolean":return defaultValue==="true";case"number":return Number(defaultValue);case"EventEmitter":return;default:return defaultValue}else switch(defaultValue){case"true":return !0;case"false":return !1;case"null":return null;case"undefined":return;default:return defaultValue}},extractDefaultValueFromComments=(property,value)=>{let commentValue=value;return property.jsdoctags.forEach(tag=>{["default","defaultvalue"].includes(tag.tagName.escapedText)&&(commentValue=new global$1.global.DOMParser().parseFromString(tag.comment,"text/html").body.textContent);}),commentValue},extractDefaultValue=property=>{try{let value=property.defaultValue?.replace(/^'(.*)'$/,"$1");return value=castDefaultValue(property,value),value==null&&property.jsdoctags?.length>0&&(value=extractDefaultValueFromComments(property,value)),value}catch{clientLogger.logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);return}},resolveTypealias=compodocType=>{let typeAlias=getCompodocJson()?.miscellaneous?.typealiases?.find(x=>x.name===compodocType);return typeAlias?resolveTypealias(typeAlias.rawtype):compodocType},extractArgTypesFromData=componentData=>{let sectionToItems={},componentClasses=FEATURES.angularFilterNonInputControls?["inputsClass"]:["propertiesClass","methodsClass","inputsClass","outputsClass"];(["component","directive"].includes(componentData.type)?componentClasses:["properties","methods"]).forEach(key=>{(componentData[key]||[]).forEach(item=>{let section=mapItemToSection(key,item),defaultValue=isMethod(item)?void 0:extractDefaultValue(item),type=isMethod(item)||section!=="inputs"&&section!=="properties"?{name:"other",value:"void"}:extractType(item,defaultValue),action=section==="outputs"?{action:item.name}:{},argType={name:item.name,description:item.rawdescription||item.description,type,...action,table:{category:section,type:{summary:isMethod(item)?displaySignature(item):item.type,required:isMethod(item)?!1:!item.optional},defaultValue:{summary:defaultValue}}};sectionToItems[section]||(sectionToItems[section]=[]),sectionToItems[section].push(argType);});});let SECTIONS=["properties","inputs","outputs","methods","view child","view children","content child","content children"],argTypes={};return SECTIONS.forEach(section=>{let items=sectionToItems[section];items&&items.forEach(argType=>{argTypes[argType.name]=argType;});}),argTypes},extractArgTypes=component=>{let componentData=getComponentData(component);return componentData&&extractArgTypesFromData(componentData)},extractComponentDescription=component=>{let componentData=getComponentData(component);return componentData&&(componentData.rawdescription||componentData.description)};var parameters={renderer:"angular",docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},argTypesEnhancers=[docsTools.enhanceArgTypes];
+
+exports.applyDecorators = decorateStory;
+exports.argTypesEnhancers = argTypesEnhancers;
+exports.parameters = parameters;
+exports.render = render;
+exports.renderToCanvas = renderToCanvas;

package/dist/client/config.mjs

@@ -1,14 +1,11 @@
-import './globals';
-export { render, renderToCanvas } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
+import '../chunk-CUDJAP6K.mjs';
+import { computesTemplateFromComponent } from '../chunk-LXSTVAFF.mjs';
+export { render, renderToCanvas } from '../chunk-LXSTVAFF.mjs';
+import { sanitizeStoryContextUpdate } from 'storybook/preview-api';
 import { enhanceArgTypes } from 'storybook/internal/docs-tools';
-import { extractArgTypes, extractComponentDescription } from './compodoc';
-export const parameters = {
-    renderer: 'angular',
-    docs: {
-        story: { inline: true },
-        extractArgTypes,
-        extractComponentDescription,
-    },
-};
-export const argTypesEnhancers = [enhanceArgTypes];
+import { logger } from 'storybook/internal/client-logger';
+import { global } from '@storybook/global';
+
+function decorateStory(mainStoryFn,decorators){return [cleanArgsDecorator,...decorators].reduce((previousStoryFn,decorator)=>context=>decorator(update=>previousStoryFn({...context,...sanitizeStoryContextUpdate(update)}),context),context=>prepareMain(mainStoryFn(context),context))}var prepareMain=(story,context)=>{let{template}=story,{component}=context,userDefinedTemplate=!hasNoTemplate(template);return !userDefinedTemplate&&component&&(template=computesTemplateFromComponent(component,story.props,"")),{...story,...template?{template,userDefinedTemplate}:{}}};function hasNoTemplate(template){return template==null}var cleanArgsDecorator=(storyFn,context)=>{if(!context.argTypes||!context.args)return storyFn();let argsToClean=context.args;return context.args=Object.entries(argsToClean).reduce((obj,[key,arg])=>{let argType=context.argTypes[key];return argType?.action||argType?.control?{...obj,[key]:arg}:obj},{}),storyFn()};var{FEATURES}=global,isMethod=methodOrProp=>methodOrProp.args!==void 0;var getCompodocJson=()=>global.__STORYBOOK_COMPODOC_JSON__,checkValidComponentOrDirective=component=>{if(!component.name)throw new Error(`Invalid component ${JSON.stringify(component)}`)},checkValidCompodocJson=compodocJson=>{if(!compodocJson||!compodocJson.components)throw new Error("Invalid compodoc JSON")},hasDecorator=(item,decoratorName)=>item.decorators&&item.decorators.find(x=>x.name===decoratorName),mapPropertyToSection=item=>hasDecorator(item,"ViewChild")?"view child":hasDecorator(item,"ViewChildren")?"view children":hasDecorator(item,"ContentChild")?"content child":hasDecorator(item,"ContentChildren")?"content children":"properties",mapItemToSection=(key,item)=>{switch(key){case"methods":case"methodsClass":return "methods";case"inputsClass":return "inputs";case"outputsClass":return "outputs";case"properties":case"propertiesClass":if(isMethod(item))throw new Error("Cannot be of type Method if key === 'propertiesClass'");return mapPropertyToSection(item);default:throw new Error(`Unknown key: ${key}`)}},findComponentByName=(name,compodocJson)=>compodocJson.components.find(c=>c.name===name)||compodocJson.directives.find(c=>c.name===name)||compodocJson.pipes.find(c=>c.name===name)||compodocJson.injectables.find(c=>c.name===name)||compodocJson.classes.find(c=>c.name===name),getComponentData=component=>{if(!component)return null;checkValidComponentOrDirective(component);let compodocJson=getCompodocJson();if(!compodocJson)return null;checkValidCompodocJson(compodocJson);let{name}=component,metadata=findComponentByName(name,compodocJson);return metadata||logger.warn(`Component not found in compodoc JSON: '${name}'`),metadata},displaySignature=item=>`(${item.args.map(arg=>`${arg.name}${arg.optional?"?":""}: ${arg.type}`).join(", ")}) => ${item.returnType}`,extractTypeFromValue=defaultValue=>{let valueType=typeof defaultValue;return defaultValue||valueType==="number"||valueType==="boolean"||valueType==="string"?valueType:null},extractEnumValues=compodocType=>{let enumType=getCompodocJson()?.miscellaneous?.enumerations?.find(x=>x.name===compodocType);if(enumType?.childs.every(x=>x.value))return enumType.childs.map(x=>x.value);if(typeof compodocType!="string"||compodocType.indexOf("|")===-1)return null;try{return compodocType.split("|").map(value=>JSON.parse(value))}catch{return null}},extractType=(property,defaultValue)=>{let compodocType=property.type||extractTypeFromValue(defaultValue);switch(compodocType){case"string":case"boolean":case"number":return {name:compodocType};case void 0:case null:return {name:"other",value:"void"};default:{let resolvedType=resolveTypealias(compodocType),enumValues=extractEnumValues(resolvedType);return enumValues?{name:"enum",value:enumValues}:{name:"other",value:"empty-enum"}}}},castDefaultValue=(property,defaultValue)=>{let compodocType=property.type;if(["boolean","number","string","EventEmitter"].includes(compodocType))switch(compodocType){case"boolean":return defaultValue==="true";case"number":return Number(defaultValue);case"EventEmitter":return;default:return defaultValue}else switch(defaultValue){case"true":return !0;case"false":return !1;case"null":return null;case"undefined":return;default:return defaultValue}},extractDefaultValueFromComments=(property,value)=>{let commentValue=value;return property.jsdoctags.forEach(tag=>{["default","defaultvalue"].includes(tag.tagName.escapedText)&&(commentValue=new global.DOMParser().parseFromString(tag.comment,"text/html").body.textContent);}),commentValue},extractDefaultValue=property=>{try{let value=property.defaultValue?.replace(/^'(.*)'$/,"$1");return value=castDefaultValue(property,value),value==null&&property.jsdoctags?.length>0&&(value=extractDefaultValueFromComments(property,value)),value}catch{logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);return}},resolveTypealias=compodocType=>{let typeAlias=getCompodocJson()?.miscellaneous?.typealiases?.find(x=>x.name===compodocType);return typeAlias?resolveTypealias(typeAlias.rawtype):compodocType},extractArgTypesFromData=componentData=>{let sectionToItems={},componentClasses=FEATURES.angularFilterNonInputControls?["inputsClass"]:["propertiesClass","methodsClass","inputsClass","outputsClass"];(["component","directive"].includes(componentData.type)?componentClasses:["properties","methods"]).forEach(key=>{(componentData[key]||[]).forEach(item=>{let section=mapItemToSection(key,item),defaultValue=isMethod(item)?void 0:extractDefaultValue(item),type=isMethod(item)||section!=="inputs"&&section!=="properties"?{name:"other",value:"void"}:extractType(item,defaultValue),action=section==="outputs"?{action:item.name}:{},argType={name:item.name,description:item.rawdescription||item.description,type,...action,table:{category:section,type:{summary:isMethod(item)?displaySignature(item):item.type,required:isMethod(item)?!1:!item.optional},defaultValue:{summary:defaultValue}}};sectionToItems[section]||(sectionToItems[section]=[]),sectionToItems[section].push(argType);});});let SECTIONS=["properties","inputs","outputs","methods","view child","view children","content child","content children"],argTypes={};return SECTIONS.forEach(section=>{let items=sectionToItems[section];items&&items.forEach(argType=>{argTypes[argType.name]=argType;});}),argTypes},extractArgTypes=component=>{let componentData=getComponentData(component);return componentData&&extractArgTypesFromData(componentData)},extractComponentDescription=component=>{let componentData=getComponentData(component);return componentData&&(componentData.rawdescription||componentData.description)};var parameters={renderer:"angular",docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},argTypesEnhancers=[enhanceArgTypes];
+
+export { decorateStory as applyDecorators, argTypesEnhancers, parameters };

package/dist/client/docs/config.d.ts

@@ -1,3 +1,6 @@
-import { DecoratorFunction, Parameters } from 'storybook/internal/types';
-export declare const parameters: Parameters;
-export declare const decorators: DecoratorFunction[];
+import { Parameters, DecoratorFunction } from 'storybook/internal/types';
+
+declare const parameters: Parameters;
+declare const decorators: DecoratorFunction[];
+
+export { decorators, parameters };

package/dist/client/docs/config.js

@@ -1,14 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decorators = exports.parameters = void 0;
-const docs_tools_1 = require("storybook/internal/docs-tools");
-const sourceDecorator_1 = require("./sourceDecorator");
-exports.parameters = {
-    docs: {
-        source: {
-            type: docs_tools_1.SourceType.DYNAMIC,
-            language: 'html',
-        },
-    },
-};
-exports.decorators = [sourceDecorator_1.sourceDecorator];
+'use strict';
+
+var docsTools = require('storybook/internal/docs-tools');
+var previewApi = require('storybook/preview-api');
+var core = require('@angular/core');
+require('rxjs');
+require('@angular/compiler');
+require('@angular/platform-browser');
+require('telejson');
+require('rxjs/operators');
+require('@angular/common');
+require('ts-dedent');
+require('storybook/internal/core-events');
+
+new core.InjectionToken("STORY_PROPS");var reflectionCapabilities=new core["ɵReflectionCapabilities"],getComponentInputsOutputs=component=>{let componentMetadata=getComponentDecoratorMetadata(component),componentPropsMetadata=getComponentPropsDecoratorMetadata(component),initialValue={inputs:[],outputs:[]};return componentMetadata&&componentMetadata.inputs&&initialValue.inputs.push(...componentMetadata.inputs.map(i=>({propName:typeof i=="string"?i:i.name,templateName:typeof i=="string"?i:i.alias}))),componentMetadata&&componentMetadata.outputs&&initialValue.outputs.push(...componentMetadata.outputs.map(i=>({propName:i,templateName:i}))),componentPropsMetadata?Object.entries(componentPropsMetadata).reduce((previousValue,[propertyName,values])=>{let value=values.find(v=>v instanceof core.Input||v instanceof core.Output);if(value instanceof core.Input){let inputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousInputsFiltered=previousValue.inputs.filter(i=>i.templateName!==propertyName);return {...previousValue,inputs:[...previousInputsFiltered,inputToAdd]}}if(value instanceof core.Output){let outputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousOutputsFiltered=previousValue.outputs.filter(i=>i.templateName!==propertyName);return {...previousValue,outputs:[...previousOutputsFiltered,outputToAdd]}}return previousValue},initialValue):initialValue};var getComponentPropsDecoratorMetadata=component=>reflectionCapabilities.propMetadata(component),getComponentDecoratorMetadata=component=>reflectionCapabilities.annotations(component).reverse().find(d=>d instanceof core.Component);var isValidIdentifier=name=>/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name),formatPropInTemplate=propertyName=>isValidIdentifier(propertyName)?propertyName:`this['${propertyName}']`,separateInputsOutputsAttributes=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),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))}};function stringifyCircular(obj){let seen=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})}var createAngularInputProperty=({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}"`},computesTemplateSourceFromComponent=(component,initialProps,argTypes)=>{let ngComponentMetadata=getComponentDecoratorMetadata(component);if(!ngComponentMetadata)return null;if(!ngComponentMetadata.selector)return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;let ngComponentInputsOutputs=getComponentInputsOutputs(component),{inputs:initialInputs,outputs:initialOutputs}=separateInputsOutputsAttributes(ngComponentInputsOutputs,initialProps),templateInputs=initialInputs.length>0?` ${initialInputs.map(propertyName=>createAngularInputProperty({propertyName,value:initialProps[propertyName],argType:argTypes?.[propertyName]})).join(" ")}`:"",templateOutputs=initialOutputs.length>0?` ${initialOutputs.map(i=>`(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}`:"";return buildTemplate(ngComponentMetadata.selector,"",templateInputs,templateOutputs)},buildTemplate=(selector,innerTemplate,inputs,outputs)=>{let voidElements=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],firstSelector=selector.split(",")[0];return [[/(^.*?)(?=[,])/,"$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)=>voidElements.some(element=>elementSelector===element)?template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs} />`):template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs}>${innerTemplate}</$1>`)]].reduce((prevSelector,[searchValue,replacer])=>prevSelector.replace(searchValue,replacer),firstSelector)};new core["ɵReflectionCapabilities"];new core["ɵReflectionCapabilities"];new core.InjectionToken("REMOVED_MODULES");var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source;return sourceParams?.type===docsTools.SourceType.DYNAMIC?!1:sourceParams?.code||sourceParams?.type===docsTools.SourceType.CODE},sourceDecorator=(storyFn,context)=>{let story=storyFn(),source=previewApi.useRef(void 0);return previewApi.useEffect(()=>{if(skipSourceRender(context))return;let{props,userDefinedTemplate}=story,{component,argTypes,parameters:parameters2}=context,template=parameters2.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context).template:story.template;if(component&&!userDefinedTemplate){let newSource=computesTemplateSourceFromComponent(component,props,argTypes)||template;newSource&&newSource!==source.current&&(previewApi.emitTransformCode(newSource,context),source.current=newSource);}else template&&template!==source.current&&(previewApi.emitTransformCode(template,context),source.current=template);}),story};var parameters={docs:{source:{type:docsTools.SourceType.DYNAMIC,language:"html"}}},decorators=[sourceDecorator];
+
+exports.decorators = decorators;
+exports.parameters = parameters;

package/dist/client/docs/config.mjs

@@ -1,11 +1,7 @@
+import { computesTemplateSourceFromComponent } from '../../chunk-LXSTVAFF.mjs';
 import { SourceType } from 'storybook/internal/docs-tools';
-import { sourceDecorator } from './sourceDecorator';
-export const parameters = {
-    docs: {
-        source: {
-            type: SourceType.DYNAMIC,
-            language: 'html',
-        },
-    },
-};
-export const decorators = [sourceDecorator];
+import { useRef, useEffect, emitTransformCode } from 'storybook/preview-api';
+
+var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source;return sourceParams?.type===SourceType.DYNAMIC?!1:sourceParams?.code||sourceParams?.type===SourceType.CODE},sourceDecorator=(storyFn,context)=>{let story=storyFn(),source=useRef(void 0);return useEffect(()=>{if(skipSourceRender(context))return;let{props,userDefinedTemplate}=story,{component,argTypes,parameters:parameters2}=context,template=parameters2.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context).template:story.template;if(component&&!userDefinedTemplate){let newSource=computesTemplateSourceFromComponent(component,props,argTypes)||template;newSource&&newSource!==source.current&&(emitTransformCode(newSource,context),source.current=newSource);}else template&&template!==source.current&&(emitTransformCode(template,context),source.current=template);}),story};var parameters={docs:{source:{type:SourceType.DYNAMIC,language:"html"}}},decorators=[sourceDecorator];
+
+export { decorators, parameters };

package/dist/client/index.d.ts

@@ -1,6 +1,144 @@
-import './globals';
-export * from './public-types';
-export * from './portable-stories';
-export type { StoryFnAngularReturnType as IStory } from './types';
-export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
-export { argsToTemplate } from './argsToTemplate';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';
+export { ArgTypes, Args, Parameters, StrictArgs } from 'storybook/internal/types';
+import * as AngularCore from '@angular/core';
+import { Type } from '@angular/core';
+import { A as AngularRenderer, N as NgModuleMetadata, I as ICollection } from '../types-3b0b7107.js';
+export { P as AngularParameters, S as IStory } from '../types-3b0b7107.js';
+import { ApplicationConfig } from '@angular/platform-browser';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TransformComponentType<TArgs>>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TransformComponentType<TArgs>>;
+/**
+ * Story object that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TransformComponentType<TArgs>>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<AngularRenderer, TArgs>;
+type Preview = ProjectAnnotations<AngularRenderer>;
+/** Utility type that transforms InputSignal and EventEmitter types */
+type TransformComponentType<T> = TransformInputSignalType<TransformOutputSignalType<TransformEventType<T>>>;
+type AngularInputSignal<T> = AngularCore.InputSignal<T>;
+type AngularInputSignalWithTransform<T, U> = AngularCore.InputSignalWithTransform<T, U>;
+type AngularOutputEmitterRef<T> = AngularCore.OutputEmitterRef<T>;
+type AngularHasInputSignal = typeof AngularCore extends {
+    input: infer U;
+} ? true : false;
+type AngularHasOutputSignal = typeof AngularCore extends {
+    output: infer U;
+} ? true : false;
+type InputSignal<T> = AngularHasInputSignal extends true ? AngularInputSignal<T> : never;
+type InputSignalWithTransform<T, U> = AngularHasInputSignal extends true ? AngularInputSignalWithTransform<T, U> : never;
+type OutputEmitterRef<T> = AngularHasOutputSignal extends true ? AngularOutputEmitterRef<T> : never;
+type TransformInputSignalType<T> = {
+    [K in keyof T]: T[K] extends InputSignal<infer E> ? E : T[K] extends InputSignalWithTransform<any, infer U> ? U : T[K];
+};
+type TransformOutputSignalType<T> = {
+    [K in keyof T]: T[K] extends OutputEmitterRef<infer E> ? (e: E) => void : T[K];
+};
+type TransformEventType<T> = {
+    [K in keyof T]: T[K] extends AngularCore.EventEmitter<infer E> ? (e: E) => void : T[K];
+};
+
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/angular';
+ *
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<AngularRenderer>;
+
+declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularRenderer, TArgs>;
+/**
+ * Decorator to set the config options which are available during the application bootstrap
+ * operation
+ */
+declare function applicationConfig<TArgs = any>(
+/** Set of config options available during the application bootstrap operation. */
+config: ApplicationConfig): DecoratorFunction<AngularRenderer, TArgs>;
+declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext$1<AngularRenderer, TArgs>) => ICollection)) => DecoratorFunction<AngularRenderer, TArgs>;
+
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+interface ArgsToTemplateOptions<T> {
+    /**
+     * An array of keys to specifically include in the output. If provided, only the keys from this
+     * array will be included in the output, irrespective of the `exclude` option. Undefined values
+     * will still be excluded from the output.
+     */
+    include?: Array<T>;
+    /**
+     * An array of keys to specifically exclude from the output. If provided, these keys will be
+     * omitted from the output. This option is ignored if the `include` option is also provided
+     */
+    exclude?: Array<T>;
+}
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined
+ * values. Why? Because Angular treats undefined values in property bindings as an actual value and
+ * does not apply the default value of the property as soon as the binding is set. This feels
+ * counter-intuitive and is a common source of bugs in stories.
+ *
+ * @example
+ *
+ * ```ts
+ * // component.ts
+ * ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ * };
+ * ```
+ */
+declare function argsToTemplate<A extends Record<string, any>>(args: A, options?: ArgsToTemplateOptions<keyof A>): string;
+
+export { AngularRenderer, Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations };

package/dist/client/index.js

@@ -1,30 +1,47 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.argsToTemplate = exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
-/// <reference types="webpack-env" />
-require("./globals");
-__exportStar(require("./public-types"), exports);
-__exportStar(require("./portable-stories"), exports);
-var decorators_1 = require("./decorators");
-Object.defineProperty(exports, "moduleMetadata", { enumerable: true, get: function () { return decorators_1.moduleMetadata; } });
-Object.defineProperty(exports, "componentWrapperDecorator", { enumerable: true, get: function () { return decorators_1.componentWrapperDecorator; } });
-Object.defineProperty(exports, "applicationConfig", { enumerable: true, get: function () { return decorators_1.applicationConfig; } });
-var argsToTemplate_1 = require("./argsToTemplate");
-Object.defineProperty(exports, "argsToTemplate", { enumerable: true, get: function () { return argsToTemplate_1.argsToTemplate; } });
-// optimization: stop HMR propagation in webpack
-if (typeof module !== 'undefined')
-    module?.hot?.decline();
+'use strict';
+
+var global$1 = require('@storybook/global');
+var previewApi = require('storybook/preview-api');
+require('@angular/compiler');
+var platformBrowser = require('@angular/platform-browser');
+var rxjs = require('rxjs');
+var telejson = require('telejson');
+var core = require('@angular/core');
+var operators = require('rxjs/operators');
+var common = require('@angular/common');
+var tsDedent = require('ts-dedent');
+var coreEvents = require('storybook/internal/core-events');
+
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var __decorateClass=(decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))||result);return kind&&result&&__defProp(target,key,result),result},__decorateParam=(index,decorator)=>(target,key)=>decorator(target,key,index);global$1.global.STORYBOOK_ENV="angular";var render_exports={};__export(render_exports,{render:()=>render,renderToCanvas:()=>renderToCanvas,rendererFactory:()=>rendererFactory});var reflectionCapabilities=new core["ɵReflectionCapabilities"],getComponentInputsOutputs=component=>{let componentMetadata=getComponentDecoratorMetadata(component),componentPropsMetadata=getComponentPropsDecoratorMetadata(component),initialValue={inputs:[],outputs:[]};return componentMetadata&&componentMetadata.inputs&&initialValue.inputs.push(...componentMetadata.inputs.map(i=>({propName:typeof i=="string"?i:i.name,templateName:typeof i=="string"?i:i.alias}))),componentMetadata&&componentMetadata.outputs&&initialValue.outputs.push(...componentMetadata.outputs.map(i=>({propName:i,templateName:i}))),componentPropsMetadata?Object.entries(componentPropsMetadata).reduce((previousValue,[propertyName,values])=>{let value=values.find(v=>v instanceof core.Input||v instanceof core.Output);if(value instanceof core.Input){let inputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousInputsFiltered=previousValue.inputs.filter(i=>i.templateName!==propertyName);return {...previousValue,inputs:[...previousInputsFiltered,inputToAdd]}}if(value instanceof core.Output){let outputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousOutputsFiltered=previousValue.outputs.filter(i=>i.templateName!==propertyName);return {...previousValue,outputs:[...previousOutputsFiltered,outputToAdd]}}return previousValue},initialValue):initialValue};var isComponent=component=>component?(reflectionCapabilities.annotations(component)||[]).some(d=>d instanceof core.Component):!1;var getComponentPropsDecoratorMetadata=component=>reflectionCapabilities.propMetadata(component),getComponentDecoratorMetadata=component=>reflectionCapabilities.annotations(component).reverse().find(d=>d instanceof core.Component);var isValidIdentifier=name=>/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name),formatPropInTemplate=propertyName=>isValidIdentifier(propertyName)?propertyName:`this['${propertyName}']`,separateInputsOutputsAttributes=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),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))}},computesTemplateFromComponent=(component,initialProps,innerTemplate="")=>{let ngComponentMetadata=getComponentDecoratorMetadata(component),ngComponentInputsOutputs=getComponentInputsOutputs(component);if(!ngComponentMetadata.selector)return '<ng-container *ngComponentOutlet="storyComponent"></ng-container>';let{inputs:initialInputs,outputs:initialOutputs}=separateInputsOutputsAttributes(ngComponentInputsOutputs,initialProps),templateInputs=initialInputs.length>0?` ${initialInputs.map(i=>`[${i}]="${formatPropInTemplate(i)}"`).join(" ")}`:"",templateOutputs=initialOutputs.length>0?` ${initialOutputs.map(i=>`(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}`:"";return buildTemplate(ngComponentMetadata.selector,innerTemplate,templateInputs,templateOutputs)};var buildTemplate=(selector,innerTemplate,inputs,outputs)=>{let voidElements=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],firstSelector=selector.split(",")[0];return [[/(^.*?)(?=[,])/,"$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)=>voidElements.some(element=>elementSelector===element)?template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs} />`):template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs}>${innerTemplate}</$1>`)]].reduce((prevSelector,[searchValue,replacer])=>prevSelector.replace(searchValue,replacer),firstSelector)};var STORY_PROPS=new core.InjectionToken("STORY_PROPS"),storyPropsProvider=storyProps$=>({provide:STORY_PROPS,useFactory:storyDataFactory(storyProps$.asObservable()),deps:[core.NgZone]});function storyDataFactory(data){return ngZone=>new rxjs.Observable(subscriber=>{let sub=data.subscribe(v=>{ngZone.run(()=>subscriber.next(v));},err=>{ngZone.run(()=>subscriber.error(err));},()=>{ngZone.run(()=>subscriber.complete());});return ()=>{sub.unsubscribe();}})}var reflectionCapabilities2=new core["ɵReflectionCapabilities"],isComponentAlreadyDeclared=(componentToFind,moduleDeclarations,moduleImports)=>moduleDeclarations&&moduleDeclarations.flat().some(declaration=>declaration===componentToFind)?!0:moduleImports?moduleImports.flat().some(importItem=>{let extractedNgModuleMetadata=extractNgModuleMetadata(importItem);return extractedNgModuleMetadata?isComponentAlreadyDeclared(componentToFind,extractedNgModuleMetadata.declarations,extractedNgModuleMetadata.imports):!1}):!1,extractNgModuleMetadata=importItem=>{let target=importItem&&importItem.ngModule?importItem.ngModule:importItem,decorators=reflectionCapabilities2.annotations(target);if(!decorators||decorators.length===0)return null;let ngModuleDecorator=decorators.find(decorator=>decorator instanceof core.NgModule);return ngModuleDecorator||null};var reflectionCapabilities3=new core["ɵReflectionCapabilities"];new core.InjectionToken("REMOVED_MODULES");var uniqueArray=arr=>arr.flat(Number.MAX_VALUE).filter(Boolean).filter((value,index,self)=>self.indexOf(value)===index),_PropertyExtractor=class _PropertyExtractor{constructor(metadata,component){this.metadata=metadata;this.component=component;this.declarations=[];this.analyzeMetadata=async metadata=>{let declarations=[...metadata?.declarations||[]],providers=[...metadata?.providers||[]],applicationProviders=[],imports=await Promise.all([...metadata?.imports||[]].map(async imported=>{let[isRestricted,restrictedProviders]=await _PropertyExtractor.analyzeRestricted(imported);return isRestricted?(applicationProviders.unshift(restrictedProviders||[]),null):imported})).then(results=>results.filter(Boolean));return {...metadata,imports,providers,applicationProviders,declarations}};}static warnImportsModuleWithProviders(propertyExtractor){propertyExtractor.imports.some(importedModule=>"ngModule"in importedModule)&&console.warn(tsDedent.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(){let analyzed=await this.analyzeMetadata(this.metadata);if(this.imports=uniqueArray([common.CommonModule,analyzed.imports]),this.providers=uniqueArray(analyzed.providers),this.applicationProviders=uniqueArray(analyzed.applicationProviders),this.declarations=uniqueArray(analyzed.declarations),this.component){let{isDeclarable,isStandalone}=_PropertyExtractor.analyzeDecorators(this.component),isDeclared=isComponentAlreadyDeclared(this.component,analyzed.declarations,this.imports);isStandalone?this.imports.push(this.component):isDeclarable&&!isDeclared&&this.declarations.push(this.component);}}};_PropertyExtractor.analyzeRestricted=async ngModule=>{if(ngModule===platformBrowser.BrowserModule)return console.warn(tsDedent.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.
+        `),[!0];try{let animations=await import('@angular/platform-browser/animations');if(ngModule===animations.BrowserAnimationsModule)return console.warn(tsDedent.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.
+          `),[!0,animations.provideAnimations()];if(ngModule===animations.NoopAnimationsModule)return console.warn(tsDedent.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.
+          `),[!0,animations.provideNoopAnimations()]}catch{return [!1]}return [!1]},_PropertyExtractor.analyzeDecorators=component=>{let decorators=reflectionCapabilities3.annotations(component),isComponent2=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Component")),isDirective=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Directive")),isPipe=decorators.some(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Pipe")),isDeclarable=isComponent2||isDirective||isPipe,isStandalone=(isComponent2||isDirective)&&[...decorators].reverse().find(d=>_PropertyExtractor.isDecoratorInstanceOf(d,"Component")||_PropertyExtractor.isDecoratorInstanceOf(d,"Directive"))?.standalone;return isStandalone===void 0&&(isStandalone=!!(core.VERSION.major&&Number(core.VERSION.major)>=19)),{isDeclarable,isStandalone}},_PropertyExtractor.isDecoratorInstanceOf=(decorator,name)=>{let factory;switch(name){case"Component":factory=core.Component;break;case"Directive":factory=core.Directive;break;case"Pipe":factory=core.Pipe;break;case"Injectable":factory=core.Injectable;break;case"Input":factory=core.Input;break;case"Output":factory=core.Output;break;default:throw new Error(`Unknown decorator type: ${name}`)}return decorator instanceof factory||decorator.ngMetadataName===name};var PropertyExtractor=_PropertyExtractor;var getNonInputsOutputsProps=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),outputs=ngComponentInputsOutputs.outputs.filter(o=>o.templateName in props).map(o=>o.templateName);return Object.keys(props).filter(k=>![...inputs,...outputs].includes(k))},createStorybookWrapperComponent=({selector,template,storyComponent,styles,moduleMetadata:moduleMetadata2,initialProps,analyzedMetadata})=>{let viewChildSelector=storyComponent??"__storybook-noop",{imports,declarations,providers}=analyzedMetadata,StorybookComponentModule=class{};StorybookComponentModule=__decorateClass([core.NgModule({declarations,imports,exports:[...declarations,...imports]})],StorybookComponentModule),PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);let StorybookWrapperComponent=class{constructor(storyProps$,changeDetectorRef){this.storyProps$=storyProps$;this.changeDetectorRef=changeDetectorRef;this.storyComponent=storyComponent??"";}ngOnInit(){this.storyWrapperPropsSubscription=this.storyProps$.subscribe((storyProps={})=>{Object.assign(this,storyProps),this.changeDetectorRef.detectChanges(),this.changeDetectorRef.markForCheck();});}ngAfterViewInit(){if(this.storyComponentElementRef){let ngComponentInputsOutputs=getComponentInputsOutputs(storyComponent);getNonInputsOutputsProps(ngComponentInputsOutputs,initialProps).forEach(p=>{this.storyComponentElementRef[p]=initialProps[p];}),this.storyComponentViewContainerRef.injector.get(core.ChangeDetectorRef).markForCheck(),this.changeDetectorRef.detectChanges(),this.storyComponentPropsSubscription=this.storyProps$.pipe(operators.skip(1),operators.map(props=>getNonInputsOutputsProps(ngComponentInputsOutputs,props).reduce((acc,p)=>({...acc,[p]:props[p]}),{}))).subscribe(props=>{Object.assign(this.storyComponentElementRef,props),this.storyComponentViewContainerRef.injector.get(core.ChangeDetectorRef).markForCheck(),this.changeDetectorRef.detectChanges();});}}ngOnDestroy(){this.storyComponentPropsSubscription!=null&&this.storyComponentPropsSubscription.unsubscribe(),this.storyWrapperPropsSubscription!=null&&this.storyWrapperPropsSubscription.unsubscribe();}};return __decorateClass([core.ViewChild(viewChildSelector,{static:!0})],StorybookWrapperComponent.prototype,"storyComponentElementRef",2),__decorateClass([core.ViewChild(viewChildSelector,{read:core.ViewContainerRef,static:!0})],StorybookWrapperComponent.prototype,"storyComponentViewContainerRef",2),StorybookWrapperComponent=__decorateClass([core.Component({selector,template,standalone:!0,imports:[StorybookComponentModule],providers,styles,schemas:moduleMetadata2.schemas}),__decorateParam(0,core.Inject(STORY_PROPS)),__decorateParam(1,core.Inject(core.ChangeDetectorRef))],StorybookWrapperComponent),StorybookWrapperComponent};var getApplication=({storyFnAngular,component,targetSelector,analyzedMetadata})=>{let{props,styles,moduleMetadata:moduleMetadata2={}}=storyFnAngular,{template}=storyFnAngular;return !!hasNoTemplate(template)&&component&&(template=computesTemplateFromComponent(component,props,"")),createStorybookWrapperComponent({moduleMetadata:moduleMetadata2,selector:targetSelector,template,storyComponent:component,styles,initialProps:props,analyzedMetadata})};function hasNoTemplate(template){return template==null}var queue=[],isProcessing=!1,resetCompiledComponents=async()=>{try{let{\u0275resetCompiledComponents}=await import('@angular/core');\u0275resetCompiledComponents();}catch{}},queueBootstrapping=fn=>new Promise((resolve,reject)=>{queue.push(()=>fn().then(resolve).catch(reject)),isProcessing||processQueue();}),processQueue=async()=>{for(isProcessing=!0;queue.length>0;){let bootstrappingFn=queue.shift();bootstrappingFn&&(await bootstrappingFn(),await resetCompiledComponents());}isProcessing=!1;};var getProvideZonelessChangeDetectionFn=async()=>{let angularCore=await import('@angular/core');return "provideExperimentalZonelessChangeDetection"in angularCore?angularCore.provideExperimentalZonelessChangeDetection:"provideZonelessChangeDetection"in angularCore?angularCore.provideZonelessChangeDetection:null};var applicationRefs=new Map,STORY_UID_ATTRIBUTE="data-sb-story-uid",AbstractRenderer=class{constructor(){this.previousStoryRenderInfo=new Map;}static resetApplications(domNode){applicationRefs.forEach((appRef,appDOMNode)=>{!appRef.destroyed&&(!domNode||appDOMNode===domNode)&&appRef.destroy();});}async render({storyFnAngular,forced,component,targetDOMNode}){let targetSelector=this.generateTargetSelectorFromStoryId(targetDOMNode.id),newStoryProps$=new rxjs.BehaviorSubject(storyFnAngular.props);if(!this.fullRendererRequired({targetDOMNode,storyFnAngular,moduleMetadata:{...storyFnAngular.moduleMetadata},forced})){this.storyProps$.next(storyFnAngular.props);return}await this.beforeFullRender(targetDOMNode),this.storyProps$&&this.storyProps$.complete(),this.storyProps$=newStoryProps$,this.initAngularRootElement(targetDOMNode,targetSelector);let analyzedMetadata=new PropertyExtractor(storyFnAngular.moduleMetadata,component);await analyzedMetadata.init();let storyUid=this.generateStoryUIdFromRawStoryUid(targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE)),componentSelector=storyUid!==null?`${targetSelector}[${storyUid}]`:targetSelector;storyUid!==null&&targetDOMNode.querySelector(targetSelector).toggleAttribute(storyUid,!0);let application=getApplication({storyFnAngular,component,targetSelector:componentSelector,analyzedMetadata}),providers=[storyPropsProvider(newStoryProps$),...analyzedMetadata.applicationProviders,...storyFnAngular.applicationConfig?.providers??[]];if(STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless){let provideZonelessChangeDetectionFn=await getProvideZonelessChangeDetectionFn();if(provideZonelessChangeDetectionFn)providers.unshift(provideZonelessChangeDetectionFn());else throw new Error("Zoneless change detection requires Angular 18 or higher")}let applicationRef=await queueBootstrapping(()=>platformBrowser.bootstrapApplication(application,{...storyFnAngular.applicationConfig,providers}));applicationRefs.set(targetDOMNode,applicationRef);}generateTargetSelectorFromStoryId(id){let invalidHtmlTag=/[^A-Za-z0-9-]/g;return invalidHtmlTag.test(id)?`sb-${id.replace(invalidHtmlTag,"")}-component`:id}generateStoryUIdFromRawStoryUid(rawStoryUid){if(rawStoryUid===null)return rawStoryUid;let accentCharacters=/[\u0300-\u036f]/g;return rawStoryUid.normalize("NFD").replace(accentCharacters,"")}initAngularRootElement(targetDOMNode,targetSelector){targetDOMNode.innerHTML="",targetDOMNode.appendChild(document.createElement(targetSelector));}fullRendererRequired({targetDOMNode,storyFnAngular,moduleMetadata:moduleMetadata2,forced}){let previousStoryRenderInfo=this.previousStoryRenderInfo.get(targetDOMNode),currentStoryRender={storyFnAngular,moduleMetadataSnapshot:telejson.stringify(moduleMetadata2,{maxDepth:50})};return this.previousStoryRenderInfo.set(targetDOMNode,currentStoryRender),!forced||!this.storyProps$||!!storyFnAngular?.template&&previousStoryRenderInfo?.storyFnAngular?.template!==storyFnAngular.template?!0:currentStoryRender.moduleMetadataSnapshot!==previousStoryRenderInfo?.moduleMetadataSnapshot}};var CanvasRenderer=class _CanvasRenderer extends AbstractRenderer{async render(options){await super.render(options);}async beforeFullRender(){_CanvasRenderer.resetApplications();}};var storyCounts=new Map,getNextStoryUID=storyId=>{storyCounts.has(storyId)||storyCounts.set(storyId,-1);let count=storyCounts.get(storyId)+1;return storyCounts.set(storyId,count),`${storyId}-${count}`};var DocsRenderer=class _DocsRenderer extends AbstractRenderer{async render(options){let channel=previewApi.addons.getChannel();channel.once(coreEvents.STORY_CHANGED,async()=>{await _DocsRenderer.resetApplications();}),channel.once(coreEvents.DOCS_RENDERED,async()=>{await _DocsRenderer.resetApplications();}),await super.render({...options,forced:!1});}async beforeFullRender(domNode){_DocsRenderer.resetApplications(domNode);}initAngularRootElement(targetDOMNode,targetSelector){super.initAngularRootElement(targetDOMNode,targetSelector),targetDOMNode.setAttribute(STORY_UID_ATTRIBUTE,getNextStoryUID(targetDOMNode.id));}};var RendererFactory=class{constructor(){this.rendererMap=new Map;}async getRendererInstance(targetDOMNode){let targetId=targetDOMNode.id;if(targetDOMNode===null)return null;let renderType=getRenderType(targetDOMNode);return this.lastRenderType&&this.lastRenderType!==renderType&&(await AbstractRenderer.resetApplications(),clearRootHTMLElement(renderType),this.rendererMap.clear()),this.rendererMap.has(targetId)||this.rendererMap.set(targetId,this.buildRenderer(renderType)),this.lastRenderType=renderType,this.rendererMap.get(targetId)}buildRenderer(renderType){return renderType==="docs"?new DocsRenderer:new CanvasRenderer}},getRenderType=targetDOMNode=>targetDOMNode.id==="storybook-root"?"canvas":"docs";function clearRootHTMLElement(renderType){switch(renderType){case"canvas":global.document.getElementById("storybook-docs").innerHTML="";break;case"docs":global.document.getElementById("storybook-root").innerHTML="";break;}}var rendererFactory=new RendererFactory,render=props=>({props});async function renderToCanvas({storyFn,showMain,forceRemount,storyContext:{component}},element){showMain(),await(await rendererFactory.getRendererInstance(element)).render({storyFnAngular:storyFn(),component,forced:!forceRemount,targetDOMNode:element});}function setProjectAnnotations(projectAnnotations){return previewApi.setDefaultProjectAnnotations(render_exports),previewApi.setProjectAnnotations(projectAnnotations)}var moduleMetadata=metadata=>storyFn=>{let story=storyFn(),storyMetadata=story.moduleMetadata||{};return metadata=metadata||{},{...story,moduleMetadata:{declarations:[...metadata.declarations||[],...storyMetadata.declarations||[]],entryComponents:[...metadata.entryComponents||[],...storyMetadata.entryComponents||[]],imports:[...metadata.imports||[],...storyMetadata.imports||[]],schemas:[...metadata.schemas||[],...storyMetadata.schemas||[]],providers:[...metadata.providers||[],...storyMetadata.providers||[]]}}};function applicationConfig(config){return storyFn=>{let story=storyFn(),storyConfig=story.applicationConfig;return {...story,applicationConfig:storyConfig||config?{...config,...storyConfig,providers:[...config?.providers||[],...storyConfig?.providers||[]]}:void 0}}}var componentWrapperDecorator=(element,props)=>(storyFn,storyContext)=>{let story=storyFn(),currentProps=typeof props=="function"?props(storyContext):props,template=isComponent(element)?computesTemplateFromComponent(element,currentProps??{},story.template):element(story.template);return {...story,template,...currentProps||story.props?{props:{...currentProps,...story.props}}:{}}};function argsToTemplate(args,options={}){let includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter(([key])=>args[key]!==void 0).filter(([key])=>includeSet?includeSet.has(key):excludeSet?!excludeSet.has(key):!0).map(([key,value])=>typeof value=="function"?`(${key})="${formatPropInTemplate(key)}($event)"`:`[${key}]="${formatPropInTemplate(key)}"`).join(" ")}
+
+exports.applicationConfig = applicationConfig;
+exports.argsToTemplate = argsToTemplate;
+exports.componentWrapperDecorator = componentWrapperDecorator;
+exports.moduleMetadata = moduleMetadata;
+exports.setProjectAnnotations = setProjectAnnotations;

package/dist/client/index.mjs

@@ -1,9 +1,3 @@
-/// <reference types="webpack-env" />
-import './globals';
-export * from './public-types';
-export * from './portable-stories';
-export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
-export { argsToTemplate } from './argsToTemplate';
-// optimization: stop HMR propagation in webpack
-if (typeof module !== 'undefined')
-    module?.hot?.decline();
+export { applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations } from '../chunk-KMSSK3DZ.mjs';
+import '../chunk-CUDJAP6K.mjs';
+import '../chunk-LXSTVAFF.mjs';

package/dist/client/preview-prod.d.ts

@@ -1 +1,2 @@
-export {};
+
+export { }

package/dist/client/preview-prod.js

@@ -1,4 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@angular/core");
-(0, core_1.enableProdMode)();
+'use strict';
+
+var core = require('@angular/core');
+
+core.enableProdMode();

package/dist/client/preview-prod.mjs

@@ -1,2 +1,3 @@
 import { enableProdMode } from '@angular/core';
+
 enableProdMode();