@storybook/angular 6.5.0-alpha.7 → 6.5.0-beta.1

package/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js

@@ -27,51 +27,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 /* eslint-disable no-undef */
-var core_1 = require("@angular/core");
-var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
-var rxjs_1 = require("rxjs");
-var telejson_1 = require("telejson");
-var StorybookModule_1 = require("./StorybookModule");
+const core_1 = require("@angular/core");
+const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const rxjs_1 = require("rxjs");
+const telejson_1 = require("telejson");
+const StorybookModule_1 = require("./StorybookModule");
 // platform must be init only if render is called at least once
-var platformRef;
+let platformRef;
 function getPlatform(newPlatform) {
     if (!platformRef || newPlatform) {
         platformRef = platform_browser_dynamic_1.platformBrowserDynamic();
     }
     return platformRef;
 }
-var AbstractRenderer = /** @class */ (function () {
-    function AbstractRenderer(storyId) {
+class AbstractRenderer {
+    constructor(storyId) {
         this.storyId = storyId;
         if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
             try {
@@ -87,26 +60,22 @@ var AbstractRenderer = /** @class */ (function () {
     /**
      * Wait and destroy the platform
      */
-    AbstractRenderer.resetPlatformBrowserDynamic = function () {
-        var _this = this;
-        return new Promise(function (resolve) {
+    static resetPlatformBrowserDynamic() {
+        return new Promise((resolve) => {
             if (platformRef && !platformRef.destroyed) {
-                platformRef.onDestroy(function () { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        resolve();
-                        return [2 /*return*/];
-                    });
-                }); });
+                platformRef.onDestroy(() => __awaiter(this, void 0, void 0, function* () {
+                    resolve();
+                }));
                 // Destroys the current Angular platform and all Angular applications on the page.
                 // So call each angular ngOnDestroy and avoid memory leaks
                 platformRef.destroy();
                 return;
             }
             resolve();
-        }).then(function () {
+        }).then(() => {
             getPlatform(true);
         });
-    };
+    }
     /**
      * Bootstrap main angular module with main component or send only new `props` with storyProps$
      *
@@ -117,45 +86,31 @@ var AbstractRenderer = /** @class */ (function () {
      * @param component {Component}
      * @param parameters {Parameters}
      */
-    AbstractRenderer.prototype.render = function (_a) {
-        var _b;
-        var storyFnAngular = _a.storyFnAngular, forced = _a.forced, parameters = _a.parameters, component = _a.component, targetDOMNode = _a.targetDOMNode;
-        return __awaiter(this, void 0, void 0, function () {
-            var targetSelector, newStoryProps$, moduleMetadata;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        targetSelector = "" + this.generateTargetSelectorFromStoryId();
-                        newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-                        moduleMetadata = StorybookModule_1.getStorybookModuleMetadata({ storyFnAngular: storyFnAngular, component: component, targetSelector: targetSelector }, newStoryProps$);
-                        if (!this.fullRendererRequired({
-                            storyFnAngular: storyFnAngular,
-                            moduleMetadata: moduleMetadata,
-                            forced: forced,
-                        })) {
-                            this.storyProps$.next(storyFnAngular.props);
-                            return [2 /*return*/];
-                        }
-                        return [4 /*yield*/, this.beforeFullRender()];
-                    case 1:
-                        _c.sent();
-                        // Complete last BehaviorSubject and set a new one for the current module
-                        if (this.storyProps$) {
-                            this.storyProps$.complete();
-                        }
-                        this.storyProps$ = newStoryProps$;
-                        this.initAngularRootElement(targetDOMNode, targetSelector);
-                        return [4 /*yield*/, getPlatform().bootstrapModule(StorybookModule_1.createStorybookModule(moduleMetadata), (_b = parameters.bootstrapModuleOptions) !== null && _b !== void 0 ? _b : undefined)];
-                    case 2:
-                        _c.sent();
-                        return [4 /*yield*/, this.afterFullRender()];
-                    case 3:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
+    render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
+            const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
+            const moduleMetadata = StorybookModule_1.getStorybookModuleMetadata({ storyFnAngular, component, targetSelector }, newStoryProps$);
+            if (!this.fullRendererRequired({
+                storyFnAngular,
+                moduleMetadata,
+                forced,
+            })) {
+                this.storyProps$.next(storyFnAngular.props);
+                return;
+            }
+            yield this.beforeFullRender();
+            // Complete last BehaviorSubject and set a new one for the current module
+            if (this.storyProps$) {
+                this.storyProps$.complete();
+            }
+            this.storyProps$ = newStoryProps$;
+            this.initAngularRootElement(targetDOMNode, targetSelector);
+            yield getPlatform().bootstrapModule(StorybookModule_1.createStorybookModule(moduleMetadata), (_a = parameters.bootstrapModuleOptions) !== null && _a !== void 0 ? _a : undefined);
+            yield this.afterFullRender();
         });
-    };
+    }
     /**
      * Only ASCII alphanumerics can be used as HTML tag name.
      * https://html.spec.whatwg.org/#elements-2
@@ -168,25 +123,24 @@ var AbstractRenderer = /** @class */ (function () {
      * @protected
      * @memberof AbstractRenderer
      */
-    AbstractRenderer.prototype.generateTargetSelectorFromStoryId = function () {
-        var invalidHtmlTag = /[^A-Za-z0-9-]/g;
-        var storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);
+    generateTargetSelectorFromStoryId() {
+        const invalidHtmlTag = /[^A-Za-z0-9-]/g;
+        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);
         return storyIdIsInvalidHtmlTagName
-            ? "sb-" + this.storyId.replace(invalidHtmlTag, '') + "-component"
+            ? `sb-${this.storyId.replace(invalidHtmlTag, '')}-component`
             : this.storyId;
-    };
-    AbstractRenderer.prototype.initAngularRootElement = function (targetDOMNode, targetSelector) {
+    }
+    initAngularRootElement(targetDOMNode, targetSelector) {
         // Adds DOM element that angular will use as bootstrap component
         // eslint-disable-next-line no-param-reassign
         targetDOMNode.innerHTML = '';
         targetDOMNode.appendChild(document.createElement(targetSelector));
-    };
-    AbstractRenderer.prototype.fullRendererRequired = function (_a) {
-        var _b;
-        var storyFnAngular = _a.storyFnAngular, moduleMetadata = _a.moduleMetadata, forced = _a.forced;
-        var previousStoryRenderInfo = this.previousStoryRenderInfo;
-        var currentStoryRender = {
-            storyFnAngular: storyFnAngular,
+    }
+    fullRendererRequired({ storyFnAngular, moduleMetadata, forced, }) {
+        var _a;
+        const { previousStoryRenderInfo } = this;
+        const currentStoryRender = {
+            storyFnAngular,
             moduleMetadataSnapshot: telejson_1.stringify(moduleMetadata),
         };
         this.previousStoryRenderInfo = currentStoryRender;
@@ -198,37 +152,35 @@ var AbstractRenderer = /** @class */ (function () {
             return true;
         }
         // force the rendering if the template has changed
-        var hasChangedTemplate = !!(storyFnAngular === null || storyFnAngular === void 0 ? void 0 : storyFnAngular.template) &&
-            ((_b = previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.storyFnAngular) === null || _b === void 0 ? void 0 : _b.template) !== storyFnAngular.template;
+        const hasChangedTemplate = !!(storyFnAngular === null || storyFnAngular === void 0 ? void 0 : storyFnAngular.template) &&
+            ((_a = previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.storyFnAngular) === null || _a === void 0 ? void 0 : _a.template) !== storyFnAngular.template;
         if (hasChangedTemplate) {
             return true;
         }
         // force the rendering if the metadata structure has changed
-        var hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== (previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.moduleMetadataSnapshot);
+        const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== (previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.moduleMetadataSnapshot);
         return hasChangedModuleMetadata;
-    };
-    /**
-     * Reset compiled components because we often want to compile the same component with
-     * more than one NgModule.
-     */
-    AbstractRenderer.resetCompiledComponents = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var ɵresetCompiledComponents, e_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('@angular/core')); })];
-                case 1:
-                    ɵresetCompiledComponents = (_a.sent()).ɵresetCompiledComponents;
-                    ɵresetCompiledComponents();
-                    return [3 /*break*/, 3];
-                case 2:
-                    e_1 = _a.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
-    return AbstractRenderer;
-}());
+    }
+}
 exports.AbstractRenderer = AbstractRenderer;
+/**
+ * Reset compiled components because we often want to compile the same component with
+ * more than one NgModule.
+ */
+AbstractRenderer.resetCompiledComponents = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        // Clear global Angular component cache in order to be able to re-render the same component across multiple stories
+        //
+        // References:
+        // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50
+        // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384
+        const { ɵresetCompiledComponents } = yield Promise.resolve().then(() => __importStar(require('@angular/core')));
+        ɵresetCompiledComponents();
+    }
+    catch (e) {
+        /**
+         * noop catch
+         * This means angular removed or modified ɵresetCompiledComponents
+         */
+    }
+});

package/dist/ts3.9/client/preview/angular-beta/CanvasRenderer.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -21,77 +8,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasRenderer = void 0;
-var AbstractRenderer_1 = require("./AbstractRenderer");
-var CanvasRenderer = /** @class */ (function (_super) {
-    __extends(CanvasRenderer, _super);
-    function CanvasRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CanvasRenderer.prototype.render = function (options) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, _super.prototype.render.call(this, options)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
+const AbstractRenderer_1 = require("./AbstractRenderer");
+class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
+    render(options) {
+        const _super = Object.create(null, {
+            render: { get: () => super.render }
         });
-    };
-    CanvasRenderer.prototype.beforeFullRender = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, CanvasRenderer.resetPlatformBrowserDynamic()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
+        return __awaiter(this, void 0, void 0, function* () {
+            yield _super.render.call(this, options);
         });
-    };
-    CanvasRenderer.prototype.afterFullRender = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, AbstractRenderer_1.AbstractRenderer.resetCompiledComponents()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
+    }
+    beforeFullRender() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield CanvasRenderer.resetPlatformBrowserDynamic();
         });
-    };
-    return CanvasRenderer;
-}(AbstractRenderer_1.AbstractRenderer));
+    }
+    afterFullRender() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
+        });
+    }
+}
 exports.CanvasRenderer = CanvasRenderer;

package/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.d.ts

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
-import { ArgTypes } from '@storybook/api';
-import { ICollection } from '../types';
+import type { Type } from '@angular/core';
+import type { ArgTypes } from '@storybook/api';
+import type { ICollection } from '../types';
 /**
  * Converts a component into a template with inputs/outputs present in initial props
  * @param component

package/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.js

@@ -1,30 +1,18 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = void 0;
-var NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
-var separateInputsOutputsAttributes = function (ngComponentInputsOutputs, props) {
-    if (props === void 0) { props = {}; }
-    var inputs = ngComponentInputsOutputs.inputs
-        .filter(function (i) { return i.templateName in props; })
-        .map(function (i) { return i.templateName; });
-    var outputs = ngComponentInputsOutputs.outputs
-        .filter(function (o) { return o.templateName in props; })
-        .map(function (o) { return o.templateName; });
+const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) => {
+    const inputs = ngComponentInputsOutputs.inputs
+        .filter((i) => i.templateName in props)
+        .map((i) => i.templateName);
+    const outputs = ngComponentInputsOutputs.outputs
+        .filter((o) => o.templateName in props)
+        .map((o) => o.templateName);
     return {
-        inputs: inputs,
-        outputs: outputs,
-        otherProps: Object.keys(props).filter(function (k) { return !__spreadArrays(inputs, outputs).includes(k); }),
+        inputs,
+        outputs,
+        otherProps: Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k)),
     };
 };
 /**
@@ -33,31 +21,29 @@ var separateInputsOutputsAttributes = function (ngComponentInputsOutputs, props)
  * @param initialProps
  * @param innerTemplate
  */
-exports.computesTemplateFromComponent = function (component, initialProps, innerTemplate) {
-    if (innerTemplate === void 0) { innerTemplate = ''; }
-    var ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
-    var ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+exports.computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
+    const ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
+    const ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
     if (!ngComponentMetadata.selector) {
         // Allow to add renderer component when NgComponent selector is undefined
-        return "<ng-container *ngComponentOutlet=\"storyComponent\"></ng-container>";
+        return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
     }
-    var _a = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps), initialInputs = _a.inputs, initialOutputs = _a.outputs;
-    var templateInputs = initialInputs.length > 0 ? " " + initialInputs.map(function (i) { return "[" + i + "]=\"" + i + "\""; }).join(' ') : '';
-    var templateOutputs = initialOutputs.length > 0
-        ? " " + initialOutputs.map(function (i) { return "(" + i + ")=\"" + i + "($event)\""; }).join(' ')
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0 ? ` ${initialInputs.map((i) => `[${i}]="${i}"`).join(' ')}` : '';
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
         : '';
     return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
 };
-var createAngularInputProperty = function (_a) {
-    var propertyName = _a.propertyName, value = _a.value, argType = _a.argType;
-    var _b = (argType === null || argType === void 0 ? void 0 : argType.type) || {}, _c = _b.name, type = _c === void 0 ? null : _c, _d = _b.summary, summary = _d === void 0 ? null : _d;
-    var templateValue = type === 'enum' && !!summary ? summary + "." + value : value;
-    var actualType = type === 'enum' && summary ? 'enum' : typeof value;
-    var requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
+const createAngularInputProperty = ({ propertyName, value, argType, }) => {
+    const { name: type = null, summary = null } = (argType === null || argType === void 0 ? void 0 : argType.type) || {};
+    let templateValue = type === 'enum' && !!summary ? `${summary}.${value}` : value;
+    const actualType = type === 'enum' && summary ? 'enum' : typeof value;
+    const requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
     if (typeof value === 'object') {
         templateValue = propertyName;
     }
-    return "" + (requiresBrackets ? '[' : '') + propertyName + (requiresBrackets ? ']' : '') + "=\"" + templateValue + "\"";
+    return `${requiresBrackets ? '[' : ''}${propertyName}${requiresBrackets ? ']' : ''}="${templateValue}"`;
 };
 /**
  * Converts a component into a template with inputs/outputs present in initial props
@@ -65,48 +51,68 @@ var createAngularInputProperty = function (_a) {
  * @param initialProps
  * @param innerTemplate
  */
-exports.computesTemplateSourceFromComponent = function (component, initialProps, argTypes) {
-    var ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
+exports.computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
+    const ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
     if (!ngComponentMetadata) {
         return null;
     }
     if (!ngComponentMetadata.selector) {
         // Allow to add renderer component when NgComponent selector is undefined
-        return "<ng-container *ngComponentOutlet=\"" + component.name + "\"></ng-container>";
+        return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;
     }
-    var ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
-    var _a = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps), initialInputs = _a.inputs, initialOutputs = _a.outputs;
-    var templateInputs = initialInputs.length > 0
-        ? " " + initialInputs
-            .map(function (propertyName) {
-            return createAngularInputProperty({
-                propertyName: propertyName,
-                value: initialProps[propertyName],
-                argType: argTypes === null || argTypes === void 0 ? void 0 : argTypes[propertyName],
-            });
-        })
-            .join(' ')
+    const ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs
+            .map((propertyName) => createAngularInputProperty({
+            propertyName,
+            value: initialProps[propertyName],
+            argType: argTypes === null || argTypes === void 0 ? void 0 : argTypes[propertyName],
+        }))
+            .join(' ')}`
         : '';
-    var templateOutputs = initialOutputs.length > 0
-        ? " " + initialOutputs.map(function (i) { return "(" + i + ")=\"" + i + "($event)\""; }).join(' ')
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
         : '';
     return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
 };
-var buildTemplate = function (selector, innerTemplate, inputs, outputs) {
-    var firstSelector = selector.split(',')[0];
-    var templateReplacers = [
+const buildTemplate = (selector, innerTemplate, inputs, outputs) => {
+    // https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements
+    const voidElements = [
+        'area',
+        'base',
+        'br',
+        'col',
+        'command',
+        'embed',
+        'hr',
+        'img',
+        'input',
+        'keygen',
+        'link',
+        'meta',
+        'param',
+        'source',
+        'track',
+        'wbr',
+    ];
+    const firstSelector = selector.split(',')[0];
+    const templateReplacers = [
         [/(^.*?)(?=[,])/, '$1'],
         [/(^\..+)/, 'div$1'],
         [/(^\[.+?])/, 'div$1'],
-        [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, "$1"],
-        [/#([\w-]+)/, " id=\"$1\""],
-        [/((\.[\w-]+)+)/, function (_, c) { return " class=\"" + c.split(templateObject_1 || (templateObject_1 = __makeTemplateObject(["."], ["."]))).join(templateObject_2 || (templateObject_2 = __makeTemplateObject([" "], [" "]))).trim() + "\""; }],
-        [/(\[.+?])/g, function (_, a) { return " " + a.slice(1, -1); }],
-        [/([\S]+)(.*)/, "<$1$2" + inputs + outputs + ">" + innerTemplate + "</$1>"],
+        [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, `$1`],
+        [/#([\w-]+)/, ` id="$1"`],
+        [/((\.[\w-]+)+)/, (_, c) => ` class="${c.split `.`.join ` `.trim()}"`],
+        [/(\[.+?])/g, (_, a) => ` ${a.slice(1, -1)}`],
+        [
+            /([\S]+)(.*)/,
+            (template, elementSelector) => {
+                return voidElements.some((element) => elementSelector === element)
+                    ? template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs} />`)
+                    : template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs}>${innerTemplate}</$1>`);
+            },
+        ],
     ];
-    return templateReplacers.reduce(function (prevSelector, _a) {
-        var searchValue = _a[0], replacer = _a[1];
-        return prevSelector.replace(searchValue, replacer);
-    }, firstSelector);
+    return templateReplacers.reduce((prevSelector, [searchValue, replacer]) => prevSelector.replace(searchValue, replacer), firstSelector);
 };
-var templateObject_1, templateObject_2;