@storybook/angular 8.3.0-alpha.0 → 8.3.0-alpha.10

package/dist/client/angular-beta/ComputesTemplateFromComponent.test.js

@@ -10,8 +10,309 @@ const core_1 = require("@angular/core");
 const vitest_1 = require("vitest");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
 const input_component_1 = require("./__testfixtures__/input.component");
+(0, vitest_1.describe)('angular template decorator', () => {
+    (0, vitest_1.it)('with props should generate tag with properties', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            accent: input_component_1.ButtonAccent.High,
+            counter: 4,
+            'aria-label': 'Hello world',
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="counter" [accent]="accent" [isDisabled]="isDisabled" [label]="label" [aria-label]="this['aria-label']"></doc-button>`);
+    });
+    (0, vitest_1.it)('with props should generate tag with outputs', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            onClick: ($event) => { },
+            'dash-out': ($event) => { },
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="isDisabled" [label]="label" (onClick)="onClick($event)" (dash-out)="this['dash-out']($event)"></doc-button>`);
+    });
+    (0, vitest_1.it)('with no props should generate simple tag', () => {
+        const component = input_component_1.InputComponent;
+        const props = {};
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual('<doc-button></doc-button>');
+    });
+    (0, vitest_1.describe)('with component without selector', () => {
+        let WithoutSelectorComponent = class WithoutSelectorComponent {
+        };
+        WithoutSelectorComponent = __decorate([
+            (0, core_1.Component)({
+                template: `The content`,
+            })
+        ], WithoutSelectorComponent);
+        (0, vitest_1.it)('should add component ng-container', async () => {
+            const component = WithoutSelectorComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<ng-container *ngComponentOutlet="storyComponent"></ng-container>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute selector', () => {
+        let WithAttributeComponent = class WithAttributeComponent {
+        };
+        WithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeComponent);
+        (0, vitest_1.it)('should add attribute to template', async () => {
+            const component = WithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute and value selector', () => {
+        let WithAttributeValueComponent = class WithAttributeValueComponent {
+        };
+        WithAttributeValueComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeValueComponent);
+        (0, vitest_1.it)('should add attribute to template', async () => {
+            const component = WithAttributeValueComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with void element and attribute selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        (0, vitest_1.it)('should create without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<input foo />`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute and value only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo="bar"></div>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with void element, attribute and value only selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        (0, vitest_1.it)('should create and add attribute to template without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<input foo="bar" />`);
+        });
+    });
+    (0, vitest_1.describe)('with component with class selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        (0, vitest_1.it)('should add class to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button class="foo"></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with class only selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div class="foo"></div>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute and value', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors including 2 attributes and a class', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, button[foo], .button[foo], button[baz]',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `doc-button,
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute only with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `[foo],
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
+        });
+    });
+    (0, vitest_1.it)('with props should generate tag with properties', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            accent: input_component_1.ButtonAccent.High,
+            counter: 4,
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="counter" [accent]="accent" [isDisabled]="isDisabled" [label]="label"></doc-button>`);
+    });
+    (0, vitest_1.it)('with props should generate tag with outputs', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            onClick: ($event) => { },
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="isDisabled" [label]="label" (onClick)="onClick($event)"></doc-button>`);
+    });
+    (0, vitest_1.it)('should generate correct property for overridden name for Input', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            color: '#ffffff',
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [color]="color"></doc-button>`);
+    });
+});
 (0, vitest_1.describe)('angular source decorator', () => {
-    (0, vitest_1.it)('With no props should generate simple tag', () => {
+    (0, vitest_1.it)('with no props should generate simple tag', () => {
         const component = input_component_1.InputComponent;
         const props = {};
         const argTypes = {};
@@ -282,28 +583,30 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
-        (0, vitest_1.it)('With props should generate tag with properties', () => {
+        (0, vitest_1.it)('with props should generate tag with properties', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: true,
                 label: 'Hello world',
                 accent: input_component_1.ButtonAccent.High,
                 counter: 4,
+                'aria-label': 'Hello world',
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'" [aria-label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('With props should generate tag with outputs', () => {
+        (0, vitest_1.it)('with props should generate tag with outputs', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: true,
                 label: 'Hello world',
                 onClick: ($event) => { },
+                'dash-out': ($event) => { },
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)" (dash-out)="this['dash-out']($event)"></doc-button>`);
         });
         (0, vitest_1.it)('should generate correct property for overridden name for Input', () => {
             const component = input_component_1.InputComponent;
@@ -316,7 +619,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
         });
     });
     (0, vitest_1.describe)('with argTypes (from compodoc)', () => {
-        (0, vitest_1.it)('Should handle enum as strongly typed enum', () => {
+        (0, vitest_1.it)('should handle enum as strongly typed enum', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -343,7 +646,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('Should handle enum without values as string', () => {
+        (0, vitest_1.it)('should handle enum without values as string', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -370,7 +673,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('Should handle objects correctly', () => {
+        (0, vitest_1.it)('should handle simple object as stringified', () => {
             const component = input_component_1.InputComponent;
             const someDataObject = {
                 one: 'Hello world',
@@ -380,10 +683,8 @@ const input_component_1 = require("./__testfixtures__/input.component");
                     `a string literal with 'single quotes'`,
                     'a single quoted string with "double quotes"',
                     "a double quoted string with 'single quotes'",
-                    // eslint-disable-next-line prettier/prettier
-                    'a single quoted string with escaped \'single quotes\'',
-                    // eslint-disable-next-line prettier/prettier
-                    "a double quoted string with escaped \"double quotes\"",
+                    "a single quoted string with escaped 'single quotes'",
+                    'a double quoted string with escaped "double quotes"',
                     `a string literal with \'escaped single quotes\'`,
                     `a string literal with \"escaped double quotes\"`,
                 ],
@@ -398,5 +699,32 @@ const input_component_1 = require("./__testfixtures__/input.component");
             // This will have to do for now
             (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="false" [label]="'Hello world'" [someDataObject]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\'']}"></doc-button>`);
         });
+        (0, vitest_1.it)('should handle circular object as stringified', () => {
+            const component = input_component_1.InputComponent;
+            const someDataObject = {
+                one: 'Hello world',
+                two: true,
+                three: [
+                    `a string literal with "double quotes"`,
+                    `a string literal with 'single quotes'`,
+                    'a single quoted string with "double quotes"',
+                    "a double quoted string with 'single quotes'",
+                    "a single quoted string with escaped 'single quotes'",
+                    'a double quoted string with escaped "double quotes"',
+                    `a string literal with \'escaped single quotes\'`,
+                    `a string literal with \"escaped double quotes\"`,
+                ],
+            };
+            someDataObject.ref = someDataObject;
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                someDataObject,
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, null);
+            // Ideally we should stringify the object, but that could cause the story to break because of unescaped values in the JSON object.
+            // This will have to do for now
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="false" [label]="'Hello world'" [someDataObject]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\''], ref: '[Circular]'}"></doc-button>`);
+        });
     });
 });

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

@@ -1,5 +1,5 @@
+import { Parameters, StoryFnAngularReturnType } from '../types';
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class DocsRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;

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

@@ -1,30 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsRenderer = void 0;
-const preview_api_1 = require("storybook/internal/preview-api");
 const core_events_1 = require("storybook/internal/core-events");
-const StoryUID_1 = require("./utils/StoryUID");
+const preview_api_1 = require("storybook/internal/preview-api");
 const AbstractRenderer_1 = require("./AbstractRenderer");
+const StoryUID_1 = require("./utils/StoryUID");
 class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async render(options) {
         const channel = preview_api_1.addons.getChannel();
         /**
-         * Destroy and recreate the PlatformBrowserDynamic of angular
-         * For several stories to be rendered in the same docs we should
-         * not destroy angular between each rendering but do it when the
+         * Destroy and recreate the PlatformBrowserDynamic of angular For several stories to be rendered
+         * in the same docs we should not destroy angular between each rendering but do it when the
          * rendered stories are not needed anymore.
          *
-         * Note for improvement: currently there is one event per story
-         * rendered in the doc. But one event could be enough for the whole docs
-         *
+         * Note for improvement: currently there is one event per story rendered in the doc. But one
+         * event could be enough for the whole docs
          */
         channel.once(core_events_1.STORY_CHANGED, async () => {
             await DocsRenderer.resetApplications();
         });
         /**
-         * Destroy and recreate the PlatformBrowserDynamic of angular
-         * when doc re render. Allows to call ngOnDestroy of angular
-         * for previous component
+         * Destroy and recreate the PlatformBrowserDynamic of angular when doc re render. Allows to call
+         * ngOnDestroy of angular for previous component
          */
         channel.once(core_events_1.DOCS_RENDERED, async () => {
             await DocsRenderer.resetApplications();

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clearRootHTMLElement = exports.getRenderType = exports.RendererFactory = void 0;
 const AbstractRenderer_1 = require("./AbstractRenderer");
-const DocsRenderer_1 = require("./DocsRenderer");
 const CanvasRenderer_1 = require("./CanvasRenderer");
+const DocsRenderer_1 = require("./DocsRenderer");
 class RendererFactory {
     constructor() {
         this.rendererMap = new Map();

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getApplication = void 0;
-const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
     const { props, styles, moduleMetadata = {} } = storyFnAngular;
     let { template } = storyFnAngular;
@@ -10,9 +10,7 @@ const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMet
     if (!hasTemplate && component) {
         template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props, '');
     }
-    /**
-     * Create a component that wraps generated template and gives it props
-     */
+    /** Create a component that wraps generated template and gives it props */
     return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)({
         moduleMetadata,
         selector: targetSelector,

package/dist/client/angular-beta/StorybookModule.test.js

@@ -57,12 +57,12 @@ const PropertyExtractor_1 = require("./utils/PropertyExtractor");
                     selector: 'foo',
                     template: `
           <p id="input">{{ input }}</p>
-          <p id="inputBindingPropertyName">{{ localPropertyName }}</p>
-          <p id="setterCallNb">{{ setterCallNb }}</p>
-          <p id="localProperty">{{ localProperty }}</p>
-          <p id="localFunction">{{ localFunction() }}</p>
-          <p id="output" (click)="output.emit('outputEmitted')"></p>
-          <p id="outputBindingPropertyName" (click)="localOutput.emit('outputEmitted')"></p>
+<p id="inputBindingPropertyName">{{ localPropertyName }}</p>
+<p id="setterCallNb">{{ setterCallNb }}</p>
+<p id="localProperty">{{ localProperty }}</p>
+<p id="localFunction">{{ localFunction() }}</p>
+<p id="output" (click)="output.emit('outputEmitted')"></p>
+<p id="outputBindingPropertyName" (click)="localOutput.emit('outputEmitted')"></p>
         `,
                 })
             ], FooComponent);

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

@@ -1,4 +1,4 @@
-import { Provider, InjectionToken } from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ICollection } from '../types';
 export declare const STORY_PROPS: InjectionToken<Subject<ICollection | undefined>>;

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

@@ -1,9 +1,7 @@
 import { Type } from '@angular/core';
 import { ICollection, NgModuleMetadata } from '../types';
 import { PropertyExtractor } from './utils/PropertyExtractor';
-/**
- * Wraps the story template into a component
- */
+/** Wraps the story template into a component */
 export declare const createStorybookWrapperComponent: ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }: {
     selector: string;
     template: string;

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

@@ -28,9 +28,7 @@ const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
         .map((o) => o.templateName);
     return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
 };
-/**
- * Wraps the story template into a component
- */
+/** Wraps the story template into a component */
 const createStorybookWrapperComponent = ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }) => {
     // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
     // storyComponent was not provided.

package/dist/client/angular-beta/__testfixtures__/input.component.d.ts

@@ -8,6 +8,7 @@ export interface ISomeInterface {
     one: string;
     two: boolean;
     three: any[];
+    ref?: ISomeInterface;
 }
 export declare class InputComponent<T> {
     /** Appearance style of the button. */
@@ -20,7 +21,9 @@ export declare class InputComponent<T> {
     /** Sets the button to a disabled state. */
     isDisabled: boolean;
     label: string;
+    ariaLabel: string;
     /** Specifies some arbitrary object */
     someDataObject: ISomeInterface;
     onClick: EventEmitter<Event>;
+    dashOut: EventEmitter<any>;
 }

package/dist/client/angular-beta/__testfixtures__/input.component.js

@@ -24,6 +24,7 @@ let InputComponent = class InputComponent {
         /** Sets the button to a disabled state. */
         this.isDisabled = false;
         this.onClick = new core_1.EventEmitter();
+        this.dashOut = new core_1.EventEmitter();
     }
 };
 exports.InputComponent = InputComponent;
@@ -51,6 +52,10 @@ __decorate([
     (0, core_1.Input)(),
     __metadata("design:type", String)
 ], InputComponent.prototype, "label", void 0);
+__decorate([
+    (0, core_1.Input)('aria-label'),
+    __metadata("design:type", String)
+], InputComponent.prototype, "ariaLabel", void 0);
 __decorate([
     (0, core_1.Input)(),
     __metadata("design:type", Object)
@@ -59,6 +64,10 @@ __decorate([
     (0, core_1.Output)(),
     __metadata("design:type", Object)
 ], InputComponent.prototype, "onClick", void 0);
+__decorate([
+    (0, core_1.Output)('dash-out'),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "dashOut", void 0);
 exports.InputComponent = InputComponent = __decorate([
     (0, core_1.Component)({
         selector: 'doc-button',

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

@@ -1,14 +1,12 @@
 import { ApplicationRef } from '@angular/core';
 /**
- * Queue bootstrapping, so that only one application can be bootstrapped at a
- * time.
+ * Queue bootstrapping, so that only one application can be bootstrapped at a time.
  *
- * Bootstrapping multiple applications at once can cause Angular to throw an
- * error that a component is declared in multiple modules. This avoids two
- * stories confusing the Angular compiler, by bootstrapping more that one
- * application at a time.
+ * Bootstrapping multiple applications at once can cause Angular to throw an error that a component
+ * is declared in multiple modules. This avoids two stories confusing the Angular compiler, by
+ * bootstrapping more that one application at a time.
  *
- * @param fn callback that should complete the bootstrap process
+ * @param fn Callback that should complete the bootstrap process
  * @returns ApplicationRef from the completed bootstrap process
  */
 export declare const queueBootstrapping: (fn: () => Promise<ApplicationRef>) => Promise<ApplicationRef>;