@storybook/angular 7.0.0-beta.32 → 7.0.0-beta.34

package/dist/builders/build-storybook/index.d.ts

@@ -6,7 +6,7 @@ import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
-    docsMode: boolean;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
     styles?: StyleElement[];

package/dist/builders/build-storybook/index.js

@@ -16,11 +16,11 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docsMode, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
-            docsMode,
+            ...(docs ? { docs } : {}),
             loglevel,
             outputDir,
             quiet,

package/dist/builders/build-storybook/schema.json

@@ -34,7 +34,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -47,13 +47,19 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
         },
         "webpackStatsJson": {
-            "type": ["boolean", "string"],
+            "type": [
+                "boolean",
+                "string"
+            ],
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },
@@ -104,7 +110,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/builders/start-storybook/index.d.ts

@@ -6,7 +6,7 @@ import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
-    docsMode: boolean;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
     styles?: StyleElement[];

package/dist/builders/start-storybook/index.js

@@ -16,12 +16,12 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docsMode, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
             configDir,
-            docsMode,
+            ...(docs ? { docs } : {}),
             host,
             https,
             port,

package/dist/builders/start-storybook/schema.json

@@ -61,7 +61,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -74,7 +74,10 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
@@ -126,7 +129,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
+import { ICollection, Parameters, StoryFnAngularReturnType } from '../types';
 type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;

package/dist/client/angular-beta/AbstractRenderer.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
+const animations_1 = require("@angular/platform-browser/animations");
 const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
@@ -71,6 +72,11 @@ class AbstractRenderer {
     async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
         const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
+        const hasAnimationsDefined = !!storyFnAngular.moduleMetadata?.imports?.includes(animations_1.BrowserAnimationsModule);
+        if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) {
+            // eslint-disable-next-line no-param-reassign
+            storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter((importedModule) => importedModule !== animations_1.BrowserAnimationsModule);
+        }
         if (!this.fullRendererRequired({
             storyFnAngular,
             moduleMetadata: {
@@ -89,7 +95,10 @@ class AbstractRenderer {
         this.initAngularRootElement(targetDOMNode, targetSelector);
         const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
         const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
-            providers: [(0, StorybookProvider_1.storyPropsProvider)(newStoryProps$)],
+            providers: [
+                ...(hasAnimationsDefined ? [(0, animations_1.provideAnimations)()] : []),
+                (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+            ],
         });
         applicationRefs.add(applicationRef);
         await this.afterFullRender();

package/dist/client/angular-beta/StorybookWrapperComponent.js

@@ -13,13 +13,12 @@ var __param = (this && this.__param) || function (paramIndex, decorator) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStorybookWrapperComponent = exports.componentNgModules = void 0;
-const common_1 = require("@angular/common");
 const core_1 = require("@angular/core");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const StorybookProvider_1 = require("./StorybookProvider");
 const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
-const NgModulesAnalyzer_1 = require("./utils/NgModulesAnalyzer");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
     const inputs = ngComponentInputsOutputs.inputs
         .filter((i) => i.templateName in props)
@@ -29,6 +28,7 @@ const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
         .map((o) => o.templateName);
     return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
 };
+// component modules cache
 exports.componentNgModules = new Map();
 /**
  * Wraps the story template into a component
@@ -40,39 +40,26 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
     // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
     // storyComponent was not provided.
     const viewChildSelector = storyComponent ?? '__storybook-noop';
-    const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(storyComponent);
-    // Look recursively (deep) if the component is not already declared by an import module
-    const requiresComponentDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(storyComponent) &&
-        !(0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(storyComponent, moduleMetadata.declarations, moduleMetadata.imports) &&
-        !isStandalone;
-    const providersNgModules = (moduleMetadata.providers ?? []).map((provider) => {
-        if (!exports.componentNgModules.get(provider)) {
-            let ProviderModule = class ProviderModule {
-            };
-            ProviderModule = __decorate([
-                (0, core_1.NgModule)({
-                    providers: [provider],
-                })
-            ], ProviderModule);
-            exports.componentNgModules.set(provider, ProviderModule);
-        }
-        return exports.componentNgModules.get(provider);
-    });
-    if (!exports.componentNgModules.get(storyComponent)) {
-        const declarations = [
-            ...(requiresComponentDeclaration ? [storyComponent] : []),
-            ...(moduleMetadata.declarations ?? []),
-        ];
+    const imports = (0, PropertyExtractor_1.extractImports)(moduleMetadata);
+    const declarations = (0, PropertyExtractor_1.extractDeclarations)(moduleMetadata, storyComponent);
+    const providers = (0, PropertyExtractor_1.extractProviders)(moduleMetadata);
+    // Only create a new module if it doesn't already exist
+    // This is to prevent the module from being recreated on every story change
+    // Declarations & Imports are only added once
+    // Providers are added on every story change to allow for story-specific providers
+    let ngModule = exports.componentNgModules.get(storyComponent);
+    if (!ngModule) {
         let StorybookComponentModule = class StorybookComponentModule {
         };
         StorybookComponentModule = __decorate([
             (0, core_1.NgModule)({
                 declarations,
-                imports: [common_1.CommonModule, ...(moduleMetadata.imports ?? [])],
-                exports: [...declarations, ...(moduleMetadata.imports ?? [])],
+                imports,
+                exports: [...declarations, ...imports],
             })
         ], StorybookComponentModule);
         exports.componentNgModules.set(storyComponent, StorybookComponentModule);
+        ngModule = exports.componentNgModules.get(storyComponent);
     }
     let StorybookWrapperComponent = class StorybookWrapperComponent {
         constructor(storyProps$, changeDetectorRef) {
@@ -142,12 +129,8 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
             selector,
             template,
             standalone: true,
-            imports: [
-                common_1.CommonModule,
-                exports.componentNgModules.get(storyComponent),
-                ...providersNgModules,
-                ...(isStandalone ? [storyComponent] : []),
-            ],
+            imports: [ngModule],
+            providers,
             styles,
             schemas: moduleMetadata.schemas,
         }),

package/dist/client/angular-beta/utils/NgModulesAnalyzer.d.ts

@@ -3,4 +3,4 @@
  *
  * Checks recursively if the component has already been declared in all import Module
  */
-export declare const isComponentAlreadyDeclaredInModules: (componentToFind: any, moduleDeclarations: any[], moduleImports: any[]) => boolean;
+export declare const isComponentAlreadyDeclared: (componentToFind: any, moduleDeclarations: any[], moduleImports: any[]) => boolean;

package/dist/client/angular-beta/utils/NgModulesAnalyzer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isComponentAlreadyDeclaredInModules = void 0;
+exports.isComponentAlreadyDeclared = void 0;
 const core_1 = require("@angular/core");
 const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
 /**
@@ -8,7 +8,7 @@ const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
  *
  * Checks recursively if the component has already been declared in all import Module
  */
-const isComponentAlreadyDeclaredInModules = (componentToFind, moduleDeclarations, moduleImports) => {
+const isComponentAlreadyDeclared = (componentToFind, moduleDeclarations, moduleImports) => {
     if (moduleDeclarations &&
         moduleDeclarations.some((declaration) => declaration === componentToFind)) {
         // Found component in declarations array
@@ -23,10 +23,10 @@ const isComponentAlreadyDeclaredInModules = (componentToFind, moduleDeclarations
             // Not an NgModule
             return false;
         }
-        return (0, exports.isComponentAlreadyDeclaredInModules)(componentToFind, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
+        return (0, exports.isComponentAlreadyDeclared)(componentToFind, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
     });
 };
-exports.isComponentAlreadyDeclaredInModules = isComponentAlreadyDeclaredInModules;
+exports.isComponentAlreadyDeclared = isComponentAlreadyDeclared;
 const extractNgModuleMetadata = (importItem) => {
     const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
     const decorators = reflectionCapabilities.annotations(target);

package/dist/client/angular-beta/utils/NgModulesAnalyzer.test.js

@@ -12,12 +12,12 @@ const AlphaModule = (0, core_1.NgModule)({ imports: [BetaModule] })(class {
 });
 describe('isComponentAlreadyDeclaredInModules', () => {
     it('should return true when the component is already declared in one of modules', () => {
-        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(FooComponent, [], [AlphaModule])).toEqual(true);
+        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(FooComponent, [], [AlphaModule])).toEqual(true);
     });
     it('should return true if the component is in moduleDeclarations', () => {
-        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(BarComponent, [BarComponent], [AlphaModule])).toEqual(true);
+        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(BarComponent, [BarComponent], [AlphaModule])).toEqual(true);
     });
     it('should return false if the component is not declared', () => {
-        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(BarComponent, [], [AlphaModule])).toEqual(false);
+        expect((0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(BarComponent, [], [AlphaModule])).toEqual(false);
     });
 });

package/dist/client/angular-beta/utils/PropertyExtractor.d.ts

@@ -0,0 +1,34 @@
+import { Provider } from '@angular/core';
+import { NgModuleMetadata } from '../../types';
+/**
+ * Extract Imports from NgModule
+ *
+ * CommonModule is always imported
+ *
+ * metadata.imports are flattened deeply and extracted into a new array
+ *
+ * - If ModuleWithProviders (e.g. forRoot() & forChild() ) is used, the ngModule is extracted without providers.
+ *
+ */
+export declare const extractImports: (metadata: NgModuleMetadata) => any[];
+/**
+ * Extract providers from NgModule
+ *
+ * - A new array is returned with:
+ *   - metadata.providers
+ *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
+ *
+ * - Use this in combination with extractImports to get all providers for a specific module
+ *
+ */
+export declare const extractProviders: (metadata: NgModuleMetadata) => Provider[];
+/**
+ * Extract declarations from NgModule
+ *
+ * - If a story component is provided, it will be added to the declarations array if:
+ *    - It is a component or directive or pipe
+ *    - It is not already declared
+ *    - It is not a standalone component
+ *
+ */
+export declare const extractDeclarations: (metadata: NgModuleMetadata, storyComponent?: any) => any[];

package/dist/client/angular-beta/utils/PropertyExtractor.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractDeclarations = exports.extractProviders = exports.extractImports = void 0;
+const common_1 = require("@angular/common");
+const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
+const NgModulesAnalyzer_1 = require("./NgModulesAnalyzer");
+const uniqueArray = (arr) => {
+    return arr.flat(Number.MAX_VALUE).filter((value, index, self) => self.indexOf(value) === index);
+};
+/**
+ * Extract Imports from NgModule
+ *
+ * CommonModule is always imported
+ *
+ * metadata.imports are flattened deeply and extracted into a new array
+ *
+ * - If ModuleWithProviders (e.g. forRoot() & forChild() ) is used, the ngModule is extracted without providers.
+ *
+ */
+const extractImports = (metadata) => {
+    const imports = [common_1.CommonModule];
+    const modules = (metadata.imports || []).flat(Number.MAX_VALUE);
+    const withProviders = modules.filter((moduleDef) => !!moduleDef?.ngModule);
+    const withoutProviders = modules.filter((moduleDef) => !withProviders.includes(moduleDef));
+    return uniqueArray([
+        imports,
+        withoutProviders,
+        withProviders.map((moduleDef) => moduleDef.ngModule),
+    ]);
+};
+exports.extractImports = extractImports;
+/**
+ * Extract providers from NgModule
+ *
+ * - A new array is returned with:
+ *   - metadata.providers
+ *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
+ *
+ * - Use this in combination with extractImports to get all providers for a specific module
+ *
+ */
+const extractProviders = (metadata) => {
+    const providers = (metadata.providers || []);
+    const moduleProviders = (metadata.imports || [])
+        .flat(Number.MAX_VALUE)
+        .filter((moduleDef) => !!moduleDef?.ngModule)
+        .map((moduleDef) => moduleDef.providers || []);
+    return uniqueArray([].concat(moduleProviders, providers));
+};
+exports.extractProviders = extractProviders;
+/**
+ * Extract declarations from NgModule
+ *
+ * - If a story component is provided, it will be added to the declarations array if:
+ *    - It is a component or directive or pipe
+ *    - It is not already declared
+ *    - It is not a standalone component
+ *
+ */
+const extractDeclarations = (metadata, storyComponent) => {
+    const declarations = metadata.declarations || [];
+    if (storyComponent) {
+        const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(storyComponent);
+        const isDeclared = (0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(storyComponent, declarations, metadata.imports);
+        const requiresDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(storyComponent) && !isDeclared && !isStandalone;
+        if (requiresDeclaration) {
+            declarations.push(storyComponent);
+        }
+    }
+    return uniqueArray(declarations);
+};
+exports.extractDeclarations = extractDeclarations;

package/dist/client/angular-beta/utils/PropertyExtractor.test.d.ts

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

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const PropertyExtractor_1 = require("./PropertyExtractor");
+const TEST_TOKEN = new core_1.InjectionToken('testToken');
+const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
+const TestService = (0, core_1.Injectable)()(class {
+});
+const TestComponent1 = (0, core_1.Component)({})(class {
+});
+const TestComponent2 = (0, core_1.Component)({})(class {
+});
+const StandaloneTestComponent = (0, core_1.Component)({ standalone: true })(class {
+});
+const TestDirective = (0, core_1.Directive)({})(class {
+});
+const TestModuleWithDeclarations = (0, core_1.NgModule)({ declarations: [TestComponent1] })(class {
+});
+const TestModuleWithImportsAndProviders = (0, core_1.NgModule)({
+    imports: [TestModuleWithDeclarations],
+    providers: [TestTokenProvider],
+})(class {
+});
+describe('PropertyExtractor', () => {
+    describe('extractImports', () => {
+        it('should return an array of imports', () => {
+            const imports = (0, PropertyExtractor_1.extractImports)({ imports: [TestModuleWithImportsAndProviders] });
+            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
+        });
+        it('should return an array of unique imports without providers', () => {
+            const imports = (0, PropertyExtractor_1.extractImports)({
+                imports: [
+                    TestModuleWithImportsAndProviders,
+                    { ngModule: TestModuleWithImportsAndProviders, providers: [] },
+                ],
+            });
+            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
+        });
+    });
+    describe('extractDeclarations', () => {
+        it('should return an array of declarations', () => {
+            const declarations = (0, PropertyExtractor_1.extractDeclarations)({ declarations: [TestComponent1] }, TestComponent2);
+            expect(declarations).toEqual([TestComponent1, TestComponent2]);
+        });
+        it('should ignore pre-declared components', () => {
+            // TestComponent1 is declared as part of TestModuleWithDeclarations
+            // TestModuleWithDeclarations is imported by TestModuleWithImportsAndProviders
+            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
+                imports: [TestModuleWithImportsAndProviders],
+                declarations: [TestComponent2, StandaloneTestComponent, TestDirective],
+            }, TestComponent1);
+            expect(declarations).toEqual([TestComponent2, StandaloneTestComponent, TestDirective]);
+        });
+        it('should ignore standalone components', () => {
+            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
+                imports: [TestModuleWithImportsAndProviders],
+                declarations: [TestComponent1, TestComponent2, TestDirective],
+            }, StandaloneTestComponent);
+            expect(declarations).toEqual([TestComponent1, TestComponent2, TestDirective]);
+        });
+        it('should ignore non components/directives/pipes', () => {
+            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
+                imports: [TestModuleWithImportsAndProviders],
+                declarations: [TestComponent1, TestComponent2, StandaloneTestComponent],
+            }, TestService);
+            expect(declarations).toEqual([TestComponent1, TestComponent2, StandaloneTestComponent]);
+        });
+    });
+    describe('extractProviders', () => {
+        it('should return an array of providers', () => {
+            const providers = (0, PropertyExtractor_1.extractProviders)({
+                providers: [TestService],
+            });
+            expect(providers).toEqual([TestService]);
+        });
+        it('should return an array of providers extracted from ModuleWithProviders', () => {
+            const providers = (0, PropertyExtractor_1.extractProviders)({
+                imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
+            });
+            expect(providers).toEqual([TestService]);
+        });
+        it('should return an array of unique providers', () => {
+            const providers = (0, PropertyExtractor_1.extractProviders)({
+                imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
+                providers: [TestService, { provide: TEST_TOKEN, useValue: 123 }],
+            });
+            expect(providers).toEqual([
+                TestService,
+                {
+                    provide: new core_1.InjectionToken('testToken'),
+                    useValue: 123,
+                },
+            ]);
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-beta.32",
+  "version": "7.0.0-beta.34",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-beta.32",
-    "@storybook/cli": "7.0.0-beta.32",
-    "@storybook/client-logger": "7.0.0-beta.32",
-    "@storybook/core-client": "7.0.0-beta.32",
-    "@storybook/core-common": "7.0.0-beta.32",
-    "@storybook/core-events": "7.0.0-beta.32",
-    "@storybook/core-server": "7.0.0-beta.32",
-    "@storybook/core-webpack": "7.0.0-beta.32",
-    "@storybook/docs-tools": "7.0.0-beta.32",
+    "@storybook/builder-webpack5": "7.0.0-beta.34",
+    "@storybook/cli": "7.0.0-beta.34",
+    "@storybook/client-logger": "7.0.0-beta.34",
+    "@storybook/core-client": "7.0.0-beta.34",
+    "@storybook/core-common": "7.0.0-beta.34",
+    "@storybook/core-events": "7.0.0-beta.34",
+    "@storybook/core-server": "7.0.0-beta.34",
+    "@storybook/core-webpack": "7.0.0-beta.34",
+    "@storybook/docs-tools": "7.0.0-beta.34",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-beta.32",
-    "@storybook/node-logger": "7.0.0-beta.32",
-    "@storybook/preview-api": "7.0.0-beta.32",
-    "@storybook/types": "7.0.0-beta.32",
+    "@storybook/manager-api": "7.0.0-beta.34",
+    "@storybook/node-logger": "7.0.0-beta.34",
+    "@storybook/preview-api": "7.0.0-beta.34",
+    "@storybook/types": "7.0.0-beta.34",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -67,16 +67,17 @@
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1500.4",
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular-devkit/core": "^15.0.4",
-    "@angular/cli": "^15.0.4",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
+    "@angular-devkit/build-angular": "^15.1.1",
+    "@angular-devkit/core": "^15.1.1",
+    "@angular/animations": "^15.1.1",
+    "@angular/cli": "^15.1.1",
+    "@angular/common": "^15.1.1",
+    "@angular/compiler": "^15.1.1",
+    "@angular/compiler-cli": "^15.1.1",
+    "@angular/core": "^15.1.1",
+    "@angular/forms": "^15.1.1",
+    "@angular/platform-browser": "^15.1.1",
+    "@angular/platform-browser-dynamic": "^15.1.1",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -90,17 +91,17 @@
     "zone.js": "^0.12.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0",
-    "@angular-devkit/build-angular": ">=14.0.0",
-    "@angular-devkit/core": ">=14.0.0",
-    "@angular/cli": ">=14.0.0",
-    "@angular/common": ">=14.0.0",
-    "@angular/compiler": ">=14.0.0",
-    "@angular/compiler-cli": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "@angular/forms": ">=14.0.0",
-    "@angular/platform-browser": ">=14.0.0",
-    "@angular/platform-browser-dynamic": ">=14.0.0",
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 16.0.0",
+    "@angular/cli": ">=14.1.0 < 16.0.0",
+    "@angular/common": ">=14.1.0 < 16.0.0",
+    "@angular/compiler": ">=14.1.0 < 16.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 16.0.0",
+    "@angular/core": ">=14.1.0 < 16.0.0",
+    "@angular/forms": ">=14.1.0 < 16.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 16.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
     "@babel/core": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -123,5 +124,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "99f5bb60dddd80bf94d55d05411fd7e7d730b009"
+  "gitHead": "b8c17b23e92257c5a09b592dc6b557ba7b94ccea"
 }

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  margin-top: 1rem;
+}
+
+.open-close-container {
+  border: 1px solid #dddddd;
+  margin-top: 1em;
+  padding: 20px 20px 0px 20px;
+  color: #000000;
+  font-weight: bold;
+  font-size: 20px;
+}

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html

@@ -0,0 +1,7 @@
+<nav>
+  <button type="button" (click)="toggle()">Toggle Open/Close</button>
+</nav>
+
+<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
+  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
+</div>

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-open-close',
+  animations: [
+    trigger('openClose', [
+      // ...
+      state(
+        'open',
+        style({
+          height: '200px',
+          opacity: 1,
+          backgroundColor: 'yellow',
+        })
+      ),
+      state(
+        'closed',
+        style({
+          height: '100px',
+          opacity: 0.8,
+          backgroundColor: 'blue',
+        })
+      ),
+      transition('open => closed', [animate('0.1s')]),
+      transition('closed => open', [animate('0.1s')]),
+    ]),
+  ],
+  templateUrl: 'open-close.component.html',
+  styleUrls: ['open-close.component.css'],
+})
+export class OpenCloseComponent {
+  isOpen = true;
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+}

package/template/stories/core/moduleMetadata/with-browser-animations.stories.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+  parameters: {
+    chromatic: { delay: 100 },
+  },
+} as Meta;
+
+export const WithBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [BrowserAnimationsModule],
+  },
+});
+
+WithBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};