@sitecore-jss/sitecore-jss-angular 19.0.5 → 19.0.6-canary.0

package/dist/bundles/sitecore-jss-sitecore-jss-angular.umd.js

@@ -4,1409 +4,1409 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sitecore-jss'] = global['sitecore-jss'] || {}, global['sitecore-jss']['sitecore-jss-angular'] = {}), global.ng.core, global['@sitecore-jss/sitecore-jss'], global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common));
 }(this, (function (exports, core, sitecoreJss, router, rxjs, operators, common) { 'use strict';
 
-    /**
-     * File fields cannot be managed via the EE. We never output "editable."
-     */
-    var FileDirective = /** @class */ (function () {
-        function FileDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-        }
-        FileDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        FileDirective.prototype.updateView = function () {
-            var field = this.field;
-            if (!field || (!field.value && !field.src)) {
-                return;
-            }
-            var file = field.src ? field : field.value;
-            this.viewRef.rootNodes.forEach(function (node) {
-                if (!file)
-                    return;
-                node.href = file.src;
-                if (node.innerHTML === '') {
-                    node.innerHTML = file.title || file.displayName;
-                }
-            });
-        };
-        return FileDirective;
-    }());
-    FileDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[scFile]' },] }
-    ];
-    FileDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef }
-    ]; };
-    FileDirective.propDecorators = {
-        field: [{ type: core.Input, args: ['scFile',] }]
+    /**
+     * File fields cannot be managed via the EE. We never output "editable."
+     */
+    var FileDirective = /** @class */ (function () {
+        function FileDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+        }
+        FileDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        FileDirective.prototype.updateView = function () {
+            var field = this.field;
+            if (!field || (!field.value && !field.src)) {
+                return;
+            }
+            var file = field.src ? field : field.value;
+            this.viewRef.rootNodes.forEach(function (node) {
+                if (!file)
+                    return;
+                node.href = file.src;
+                if (node.innerHTML === '') {
+                    node.innerHTML = file.title || file.displayName;
+                }
+            });
+        };
+        return FileDirective;
+    }());
+    FileDirective.decorators = [
+        { type: core.Directive, args: [{ selector: '[scFile]' },] }
+    ];
+    FileDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef }
+    ]; };
+    FileDirective.propDecorators = {
+        field: [{ type: core.Input, args: ['scFile',] }]
     };
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
-
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
-
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    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);
-    };
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(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 };
-        }
-    }
-    function __exportStar(m, exports) {
-        for (var p in m)
-            if (!exports.hasOwnProperty(p))
-                exports[p] = m[p];
-    }
-    function __values(o) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
-        if (m)
-            return m.call(o);
-        return {
-            next: function () {
-                if (o && i >= o.length)
-                    o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    function __spreadArrays() {
-        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;
-    }
-    ;
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (Object.hasOwnProperty.call(mod, k))
-                    result[k] = mod[k];
-        result.default = mod;
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    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);
+    };
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(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 };
+        }
+    }
+    function __exportStar(m, exports) {
+        for (var p in m)
+            if (!exports.hasOwnProperty(p))
+                exports[p] = m[p];
+    }
+    function __values(o) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+        if (m)
+            return m.call(o);
+        return {
+            next: function () {
+                if (o && i >= o.length)
+                    o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    function __spreadArrays() {
+        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;
+    }
+    ;
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (Object.hasOwnProperty.call(mod, k))
+                    result[k] = mod[k];
+        result.default = mod;
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
-    var ImageDirective = /** @class */ (function () {
-        function ImageDirective(viewContainer, templateRef, renderer, elementRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-            this.inlineRef = null;
-            this.editable = true;
-            this.urlParams = {};
-            this.attrs = {};
-        }
-        ImageDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
-                this.viewContainer.clear();
-                if (this.inlineRef) {
-                    this.inlineRef.remove();
-                    this.inlineRef = null;
-                }
-                this.updateView();
-            }
-        };
-        ImageDirective.prototype.updateView = function () {
-            var overrideAttrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
-            var media = this.field;
-            if (!media || (!media.editable && !media.value && !media.src)) {
-                return;
-            }
-            var attrs = {};
-            // we likely have an experience editor value, should be a string
-            if (this.editable && media.editable) {
-                var foundImg = sitecoreJss.mediaApi.findEditorImageTag(media.editable);
-                if (!foundImg) {
-                    return this.renderInlineWrapper(media.editable);
-                }
-                attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
-                if (!attrs) {
-                    return this.renderInlineWrapper(media.editable);
-                }
-                var tempImg_1 = this.renderer.createElement('img');
-                Object.entries(attrs).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
-                    return tempImg_1.setAttribute(key, attrValue);
-                });
-                var editableMarkup = media.editable.replace(foundImg.imgTag, tempImg_1.outerHTML);
-                return this.renderInlineWrapper(editableMarkup);
-            }
-            // some wise-guy/gal is passing in a 'raw' image object value
-            var img = media.src ? media : media.value;
-            if (!img) {
-                return null;
-            }
-            attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
-            if (attrs) {
-                this.renderTemplate(attrs);
-            }
-        };
-        ImageDirective.prototype.getImageAttrs = function (fieldAttrs, parsedAttrs, imageParams) {
-            var combinedAttrs = Object.assign(Object.assign({}, fieldAttrs), parsedAttrs);
-            // eslint-disable-next-line prefer-const
-            var src = combinedAttrs.src, srcSet = combinedAttrs.srcSet, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
-            if (!src) {
-                return null;
-            }
-            var newAttrs = Object.assign({}, otherAttrs);
-            // update image URL for jss handler and image rendering params
-            src = sitecoreJss.mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
-            if (srcSet) {
-                // replace with HTML-formatted srcset, including updated image URLs
-                newAttrs.srcSet = sitecoreJss.mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
-            }
-            else {
-                newAttrs.src = src;
-            }
-            return newAttrs;
-        };
-        ImageDirective.prototype.renderTemplate = function (imageProps) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(imageProps).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], imgPropVal = _b[1];
-                    return _this.renderer.setAttribute(node, key, imgPropVal);
-                });
-            });
-        };
-        ImageDirective.prototype.getElementAttrs = function () {
-            var view = this.templateRef.createEmbeddedView(null);
-            var element = view.rootNodes[0];
-            if (!element) {
-                return {};
-            }
-            var attrs = {};
-            for (var i = 0; i < element.attributes.length; i++) {
-                var attr = element.attributes.item(i);
-                if (attr) {
-                    attrs[attr.name] = attr.value;
-                }
-            }
-            return attrs;
-        };
-        ImageDirective.prototype.renderInlineWrapper = function (editable) {
-            var span = this.renderer.createElement('span');
-            span.className = 'sc-image-wrapper';
-            span.innerHTML = editable;
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-            parentNode.removeChild(this.elementRef.nativeElement);
-            this.inlineRef = span;
-        };
-        return ImageDirective;
-    }());
-    ImageDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[scImage]' },] }
-    ];
-    ImageDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef },
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    ImageDirective.propDecorators = {
-        field: [{ type: core.Input, args: ['scImage',] }],
-        editable: [{ type: core.Input, args: ['scImageEditable',] }],
-        mediaUrlPrefix: [{ type: core.Input, args: ['scImageMediaUrlPrefix',] }],
-        urlParams: [{ type: core.Input, args: ['scImageUrlParams',] }],
-        attrs: [{ type: core.Input, args: ['scImageAttrs',] }]
+    var ImageDirective = /** @class */ (function () {
+        function ImageDirective(viewContainer, templateRef, renderer, elementRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.inlineRef = null;
+            this.editable = true;
+            this.urlParams = {};
+            this.attrs = {};
+        }
+        ImageDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
+                this.viewContainer.clear();
+                if (this.inlineRef) {
+                    this.inlineRef.remove();
+                    this.inlineRef = null;
+                }
+                this.updateView();
+            }
+        };
+        ImageDirective.prototype.updateView = function () {
+            var overrideAttrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
+            var media = this.field;
+            if (!media || (!media.editable && !media.value && !media.src)) {
+                return;
+            }
+            var attrs = {};
+            // we likely have an experience editor value, should be a string
+            if (this.editable && media.editable) {
+                var foundImg = sitecoreJss.mediaApi.findEditorImageTag(media.editable);
+                if (!foundImg) {
+                    return this.renderInlineWrapper(media.editable);
+                }
+                attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
+                if (!attrs) {
+                    return this.renderInlineWrapper(media.editable);
+                }
+                var tempImg_1 = this.renderer.createElement('img');
+                Object.entries(attrs).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
+                    return tempImg_1.setAttribute(key, attrValue);
+                });
+                var editableMarkup = media.editable.replace(foundImg.imgTag, tempImg_1.outerHTML);
+                return this.renderInlineWrapper(editableMarkup);
+            }
+            // some wise-guy/gal is passing in a 'raw' image object value
+            var img = media.src ? media : media.value;
+            if (!img) {
+                return null;
+            }
+            attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
+            if (attrs) {
+                this.renderTemplate(attrs);
+            }
+        };
+        ImageDirective.prototype.getImageAttrs = function (fieldAttrs, parsedAttrs, imageParams) {
+            var combinedAttrs = Object.assign(Object.assign({}, fieldAttrs), parsedAttrs);
+            // eslint-disable-next-line prefer-const
+            var src = combinedAttrs.src, srcSet = combinedAttrs.srcSet, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
+            if (!src) {
+                return null;
+            }
+            var newAttrs = Object.assign({}, otherAttrs);
+            // update image URL for jss handler and image rendering params
+            src = sitecoreJss.mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
+            if (srcSet) {
+                // replace with HTML-formatted srcset, including updated image URLs
+                newAttrs.srcSet = sitecoreJss.mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
+            }
+            else {
+                newAttrs.src = src;
+            }
+            return newAttrs;
+        };
+        ImageDirective.prototype.renderTemplate = function (imageProps) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(imageProps).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], imgPropVal = _b[1];
+                    return _this.renderer.setAttribute(node, key, imgPropVal);
+                });
+            });
+        };
+        ImageDirective.prototype.getElementAttrs = function () {
+            var view = this.templateRef.createEmbeddedView(null);
+            var element = view.rootNodes[0];
+            if (!element) {
+                return {};
+            }
+            var attrs = {};
+            for (var i = 0; i < element.attributes.length; i++) {
+                var attr = element.attributes.item(i);
+                if (attr) {
+                    attrs[attr.name] = attr.value;
+                }
+            }
+            return attrs;
+        };
+        ImageDirective.prototype.renderInlineWrapper = function (editable) {
+            var span = this.renderer.createElement('span');
+            span.className = 'sc-image-wrapper';
+            span.innerHTML = editable;
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+            parentNode.removeChild(this.elementRef.nativeElement);
+            this.inlineRef = span;
+        };
+        return ImageDirective;
+    }());
+    ImageDirective.decorators = [
+        { type: core.Directive, args: [{ selector: '[scImage]' },] }
+    ];
+    ImageDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef },
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    ImageDirective.propDecorators = {
+        field: [{ type: core.Input, args: ['scImage',] }],
+        editable: [{ type: core.Input, args: ['scImageEditable',] }],
+        mediaUrlPrefix: [{ type: core.Input, args: ['scImageMediaUrlPrefix',] }],
+        urlParams: [{ type: core.Input, args: ['scImageUrlParams',] }],
+        attrs: [{ type: core.Input, args: ['scImageAttrs',] }]
     };
 
-    var LinkDirective = /** @class */ (function () {
-        function LinkDirective(viewContainer, templateRef, renderer, elementRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-            this.inlineRef = null;
-            this.editable = true;
-            this.attrs = {};
-        }
-        LinkDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field || changes.editable || changes.attrs) {
-                this.viewContainer.clear();
-                if (this.inlineRef) {
-                    this.inlineRef.remove();
-                    this.inlineRef = null;
-                }
-                this.updateView();
-            }
-        };
-        LinkDirective.prototype.updateView = function () {
-            var _a, _b;
-            var field = this.field;
-            if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
-                this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
-            }
-            else if (field && (field.href || field.value)) {
-                var props = field.href ? field : field.value;
-                var linkText = field.text || ((_a = field.value) === null || _a === void 0 ? void 0 : _a.text) || field.href || ((_b = field.value) === null || _b === void 0 ? void 0 : _b.href);
-                var mergedAttrs = Object.assign(Object.assign({}, props), this.attrs);
-                this.renderTemplate(mergedAttrs, linkText);
-            }
-        };
-        LinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_c) {
-                    var _d = __read(_c, 2), key = _d[0], propValue = _d[1];
-                    if (typeof propValue !== 'string')
-                        return;
-                    if (key === 'href') {
-                        var isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
-                        if (isInvalidLink) {
-                            if (!node.href) {
-                                return;
-                            }
-                            propValue = node.href;
-                        }
-                    }
-                    if (key === 'class' && node.className) {
-                        propValue += " " + node.className;
-                    }
-                    _this.renderer.setAttribute(node, key, propValue);
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        LinkDirective.prototype.renderInlineWrapper = function (editableFirstPart, editableLastPart) {
-            var _this = this;
-            var span = this.renderer.createElement('span');
-            span.className = 'sc-link-wrapper';
-            span.innerHTML = editableFirstPart + editableLastPart;
-            // assign attributes from template to inline wrapper
-            var attrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
-            Object.entries(attrs).forEach(function (_c) {
-                var _d = __read(_c, 2), key = _d[0], attrValue = _d[1];
-                return _this.renderer.setAttribute(span, key, attrValue);
-            });
-            this.viewContainer.createEmbeddedView(this.templateRef);
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-            this.inlineRef = span;
-        };
-        LinkDirective.prototype.getElementAttrs = function () {
-            var view = this.templateRef.createEmbeddedView(null);
-            var element = view.rootNodes[0];
-            if (!element) {
-                return {};
-            }
-            var attrs = {};
-            for (var i = 0; i < element.attributes.length; i++) {
-                var attr = element.attributes.item(i);
-                if (attr) {
-                    attrs[attr.name] = attr.value;
-                }
-            }
-            return attrs;
-        };
-        return LinkDirective;
-    }());
-    LinkDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[scLink]' },] }
-    ];
-    LinkDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef },
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    LinkDirective.propDecorators = {
-        editable: [{ type: core.Input, args: ['scLinkEditable',] }],
-        attrs: [{ type: core.Input, args: ['scLinkAttrs',] }],
-        field: [{ type: core.Input, args: ['scLink',] }]
+    var LinkDirective = /** @class */ (function () {
+        function LinkDirective(viewContainer, templateRef, renderer, elementRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.inlineRef = null;
+            this.editable = true;
+            this.attrs = {};
+        }
+        LinkDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field || changes.editable || changes.attrs) {
+                this.viewContainer.clear();
+                if (this.inlineRef) {
+                    this.inlineRef.remove();
+                    this.inlineRef = null;
+                }
+                this.updateView();
+            }
+        };
+        LinkDirective.prototype.updateView = function () {
+            var _a, _b;
+            var field = this.field;
+            if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
+                this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
+            }
+            else if (field && (field.href || field.value)) {
+                var props = field.href ? field : field.value;
+                var linkText = field.text || ((_a = field.value) === null || _a === void 0 ? void 0 : _a.text) || field.href || ((_b = field.value) === null || _b === void 0 ? void 0 : _b.href);
+                var mergedAttrs = Object.assign(Object.assign({}, props), this.attrs);
+                this.renderTemplate(mergedAttrs, linkText);
+            }
+        };
+        LinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_c) {
+                    var _d = __read(_c, 2), key = _d[0], propValue = _d[1];
+                    if (typeof propValue !== 'string')
+                        return;
+                    if (key === 'href') {
+                        var isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
+                        if (isInvalidLink) {
+                            if (!node.href) {
+                                return;
+                            }
+                            propValue = node.href;
+                        }
+                    }
+                    if (key === 'class' && node.className) {
+                        propValue += " " + node.className;
+                    }
+                    _this.renderer.setAttribute(node, key, propValue);
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        LinkDirective.prototype.renderInlineWrapper = function (editableFirstPart, editableLastPart) {
+            var _this = this;
+            var span = this.renderer.createElement('span');
+            span.className = 'sc-link-wrapper';
+            span.innerHTML = editableFirstPart + editableLastPart;
+            // assign attributes from template to inline wrapper
+            var attrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
+            Object.entries(attrs).forEach(function (_c) {
+                var _d = __read(_c, 2), key = _d[0], attrValue = _d[1];
+                return _this.renderer.setAttribute(span, key, attrValue);
+            });
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+            this.inlineRef = span;
+        };
+        LinkDirective.prototype.getElementAttrs = function () {
+            var view = this.templateRef.createEmbeddedView(null);
+            var element = view.rootNodes[0];
+            if (!element) {
+                return {};
+            }
+            var attrs = {};
+            for (var i = 0; i < element.attributes.length; i++) {
+                var attr = element.attributes.item(i);
+                if (attr) {
+                    attrs[attr.name] = attr.value;
+                }
+            }
+            return attrs;
+        };
+        return LinkDirective;
+    }());
+    LinkDirective.decorators = [
+        { type: core.Directive, args: [{ selector: '[scLink]' },] }
+    ];
+    LinkDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef },
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    LinkDirective.propDecorators = {
+        editable: [{ type: core.Input, args: ['scLinkEditable',] }],
+        attrs: [{ type: core.Input, args: ['scLinkAttrs',] }],
+        field: [{ type: core.Input, args: ['scLink',] }]
     };
 
-    var RouterLinkDirective = /** @class */ (function (_super) {
-        __extends(RouterLinkDirective, _super);
-        function RouterLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
-            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
-            _this.router = router;
-            _this.editable = true;
-            _this.attrs = {};
-            return _this;
-        }
-        RouterLinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
-                    _this.renderer.setAttribute(node, key, propValue);
-                    if (key === 'href') {
-                        _this.renderer.listen(node, 'click', function (event) {
-                            _this.router.navigate([propValue]);
-                            event.preventDefault();
-                        });
-                    }
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        return RouterLinkDirective;
-    }(LinkDirective));
-    RouterLinkDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[scRouterLink]' },] }
-    ];
-    RouterLinkDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef },
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: router.Router }
-    ]; };
-    RouterLinkDirective.propDecorators = {
-        editable: [{ type: core.Input, args: ['scRouterLinkEditable',] }],
-        attrs: [{ type: core.Input, args: ['scRouterLinkAttrs',] }],
-        field: [{ type: core.Input, args: ['scRouterLink',] }]
+    var RouterLinkDirective = /** @class */ (function (_super) {
+        __extends(RouterLinkDirective, _super);
+        function RouterLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
+            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
+            _this.router = router;
+            _this.editable = true;
+            _this.attrs = {};
+            return _this;
+        }
+        RouterLinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
+                    _this.renderer.setAttribute(node, key, propValue);
+                    if (key === 'href') {
+                        _this.renderer.listen(node, 'click', function (event) {
+                            _this.router.navigate([propValue]);
+                            event.preventDefault();
+                        });
+                    }
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        return RouterLinkDirective;
+    }(LinkDirective));
+    RouterLinkDirective.decorators = [
+        { type: core.Directive, args: [{ selector: '[scRouterLink]' },] }
+    ];
+    RouterLinkDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: router.Router }
+    ]; };
+    RouterLinkDirective.propDecorators = {
+        editable: [{ type: core.Input, args: ['scRouterLinkEditable',] }],
+        attrs: [{ type: core.Input, args: ['scRouterLinkAttrs',] }],
+        field: [{ type: core.Input, args: ['scRouterLink',] }]
     };
 
-    var GenericLinkDirective = /** @class */ (function (_super) {
-        __extends(GenericLinkDirective, _super);
-        function GenericLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
-            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
-            _this.router = router;
-            _this.editable = true;
-            _this.attrs = {};
-            return _this;
-        }
-        GenericLinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
-                    if (key === 'href' && !_this.isAbsoluteUrl(propValue)) {
-                        var urlTree = _this.router.createUrlTree([propValue], _this.extras);
-                        _this.renderer.setAttribute(node, key, _this.router.serializeUrl(urlTree));
-                        _this.renderer.listen(node, 'click', function (event) {
-                            _this.router.navigate([propValue], _this.extras);
-                            event.preventDefault();
-                        });
-                    }
-                    else {
-                        _this.renderer.setAttribute(node, key, propValue);
-                    }
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        GenericLinkDirective.prototype.isAbsoluteUrl = function (url) {
-            if (url === null) {
-                return false;
-            }
-            if (typeof url !== 'string') {
-                throw new TypeError('Expected a string');
-            }
-            return /^[a-z][a-z0-9+.-]*:/.test(url);
-        };
-        return GenericLinkDirective;
-    }(LinkDirective));
-    GenericLinkDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[scGenericLink]' },] }
-    ];
-    GenericLinkDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef },
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: router.Router }
-    ]; };
-    GenericLinkDirective.propDecorators = {
-        editable: [{ type: core.Input, args: ['scGenericLinkEditable',] }],
-        attrs: [{ type: core.Input, args: ['scGenericLinkAttrs',] }],
-        field: [{ type: core.Input, args: ['scGenericLink',] }],
-        extras: [{ type: core.Input, args: ['scGenericLinkExtras',] }]
+    var GenericLinkDirective = /** @class */ (function (_super) {
+        __extends(GenericLinkDirective, _super);
+        function GenericLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
+            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
+            _this.router = router;
+            _this.editable = true;
+            _this.attrs = {};
+            return _this;
+        }
+        GenericLinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
+                    if (key === 'href' && !_this.isAbsoluteUrl(propValue)) {
+                        var urlTree = _this.router.createUrlTree([propValue], _this.extras);
+                        _this.renderer.setAttribute(node, key, _this.router.serializeUrl(urlTree));
+                        _this.renderer.listen(node, 'click', function (event) {
+                            _this.router.navigate([propValue], _this.extras);
+                            event.preventDefault();
+                        });
+                    }
+                    else {
+                        _this.renderer.setAttribute(node, key, propValue);
+                    }
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        GenericLinkDirective.prototype.isAbsoluteUrl = function (url) {
+            if (url === null) {
+                return false;
+            }
+            if (typeof url !== 'string') {
+                throw new TypeError('Expected a string');
+            }
+            return /^[a-z][a-z0-9+.-]*:/.test(url);
+        };
+        return GenericLinkDirective;
+    }(LinkDirective));
+    GenericLinkDirective.decorators = [
+        { type: core.Directive, args: [{ selector: '[scGenericLink]' },] }
+    ];
+    GenericLinkDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: router.Router }
+    ]; };
+    GenericLinkDirective.propDecorators = {
+        editable: [{ type: core.Input, args: ['scGenericLinkEditable',] }],
+        attrs: [{ type: core.Input, args: ['scGenericLinkAttrs',] }],
+        field: [{ type: core.Input, args: ['scGenericLink',] }],
+        extras: [{ type: core.Input, args: ['scGenericLinkExtras',] }]
     };
 
-    /** Registers a statically loaded component */
-    var ComponentNameAndType = /** @class */ (function () {
-        function ComponentNameAndType() {
-        }
-        return ComponentNameAndType;
-    }());
-    /**
-     * @param {unknown} object
-     */
-    function instanceOfComponentNameAndType(object) {
-        return typeof object === 'object' && object !== null && 'type' in object;
-    }
-    /**
-     * @param {unknown} object
-     */
-    function instanceOfComponentNameAndModule(object) {
-        return typeof object === 'object' && object !== null && 'module' in object;
-    }
-    var PLACEHOLDER_COMPONENTS = new core.InjectionToken('Sc.placeholder.components');
-    var PLACEHOLDER_LAZY_COMPONENTS = new core.InjectionToken('Sc.placeholder.lazyComponents');
-    var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new core.InjectionToken('Sc.placeholder.missingComponentComponent');
+    /** Registers a statically loaded component */
+    var ComponentNameAndType = /** @class */ (function () {
+        function ComponentNameAndType() {
+        }
+        return ComponentNameAndType;
+    }());
+    /**
+     * @param {unknown} object
+     */
+    function instanceOfComponentNameAndType(object) {
+        return typeof object === 'object' && object !== null && 'type' in object;
+    }
+    /**
+     * @param {unknown} object
+     */
+    function instanceOfComponentNameAndModule(object) {
+        return typeof object === 'object' && object !== null && 'module' in object;
+    }
+    var PLACEHOLDER_COMPONENTS = new core.InjectionToken('Sc.placeholder.components');
+    var PLACEHOLDER_LAZY_COMPONENTS = new core.InjectionToken('Sc.placeholder.lazyComponents');
+    var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new core.InjectionToken('Sc.placeholder.missingComponentComponent');
     var DYNAMIC_COMPONENT = new core.InjectionToken('Sc.placeholder.dynamicComponent');
 
-    var RawComponent = /** @class */ (function () {
-        function RawComponent(renderer, elementRef) {
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-        }
-        RawComponent.prototype.ngOnInit = function () {
-            var el = this.renderer.createElement(this.rendering.name);
-            var contents = this.renderer.createText(this.rendering.contents || '');
-            var attributes = this.rendering.attributes;
-            for (var attr in attributes) {
-                // eslint-disable-next-line no-prototype-builtins
-                if (attributes.hasOwnProperty(attr)) {
-                    var value = attributes[attr];
-                    this.renderer.setAttribute(el, attr, value || '');
-                }
-            }
-            this.renderer.appendChild(el, contents);
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
-            parentNode.removeChild(this.elementRef.nativeElement);
-        };
-        return RawComponent;
-    }());
-    RawComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sc-raw',
-                    template: ''
-                },] }
-    ];
-    RawComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    RawComponent.propDecorators = {
-        rendering: [{ type: core.Input }]
+    var RawComponent = /** @class */ (function () {
+        function RawComponent(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        RawComponent.prototype.ngOnInit = function () {
+            var el = this.renderer.createElement(this.rendering.name);
+            var contents = this.renderer.createText(this.rendering.contents || '');
+            var attributes = this.rendering.attributes;
+            for (var attr in attributes) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (attributes.hasOwnProperty(attr)) {
+                    var value = attributes[attr];
+                    this.renderer.setAttribute(el, attr, value || '');
+                }
+            }
+            this.renderer.appendChild(el, contents);
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
+            parentNode.removeChild(this.elementRef.nativeElement);
+        };
+        return RawComponent;
+    }());
+    RawComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sc-raw',
+                    template: ''
+                },] }
+    ];
+    RawComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    RawComponent.propDecorators = {
+        rendering: [{ type: core.Input }]
     };
 
-    /**
-     * @param {HtmlElementRendering | ComponentRendering} rendering
-     */
-    function isRawRendering(rendering) {
-        return (!rendering.componentName &&
-            rendering.name !== undefined);
+    /**
+     * @param {HtmlElementRendering | ComponentRendering} rendering
+     */
+    function isRawRendering(rendering) {
+        return (!rendering.componentName &&
+            rendering.name !== undefined);
     }
 
-    var JssComponentFactoryService = /** @class */ (function () {
-        function JssComponentFactoryService(injector, compiler, components, lazyComponents) {
-            var _this = this;
-            this.injector = injector;
-            this.compiler = compiler;
-            this.components = components;
-            this.lazyComponents = lazyComponents;
-            this.componentMap = new Map();
-            this.lazyComponentMap = new Map();
-            this.components.forEach(function (c) { return _this.componentMap.set(c.name, c.type); });
-            if (this.lazyComponents) {
-                this.lazyComponents.forEach(function (c) { return _this.lazyComponentMap.set(c.path, c); });
-            }
-        }
-        JssComponentFactoryService.prototype.loadModuleFactory = function (lazyComponent) {
-            var _this = this;
-            return lazyComponent.loadChildren().then(function (loaded) {
-                if (loaded instanceof core.NgModuleFactory) {
-                    return loaded;
-                }
-                else {
-                    return _this.compiler.compileModuleAsync(loaded);
-                }
-            });
-        };
-        JssComponentFactoryService.prototype.getComponent = function (component) {
-            var _this = this;
-            var loadedComponent = this.componentMap.get(component.componentName);
-            if (loadedComponent) {
-                return Promise.resolve({
-                    componentDefinition: component,
-                    componentImplementation: this.componentMap.get(component.componentName),
-                });
-            }
-            var lazyComponent = this.lazyComponentMap.get(component.componentName);
-            if (lazyComponent) {
-                return this.loadModuleFactory(lazyComponent).then(function (ngModuleFactory) {
-                    var componentType = null;
-                    var moduleRef = ngModuleFactory.create(_this.injector);
-                    var dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
-                    if (!dynamicComponentType) {
-                        throw new Error("JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
-                    }
-                    if (component.componentName in dynamicComponentType) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        componentType = dynamicComponentType[component.componentName];
-                    }
-                    else {
-                        if (typeof dynamicComponentType === 'function') {
-                            componentType = dynamicComponentType;
-                        }
-                        else {
-                            throw new Error("JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
-                        }
-                    }
-                    return {
-                        componentDefinition: component,
-                        componentImplementation: componentType,
-                        componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
-                    };
-                });
-            }
-            return Promise.resolve({
-                componentDefinition: component,
-            });
-        };
-        JssComponentFactoryService.prototype.getComponents = function (components) {
-            var _this = this;
-            // acquire all components and keep them in order while handling their potential async-ness
-            return Promise.all(components.map(function (component) { return isRawRendering(component) ? _this.getRawComponent(component) : _this.getComponent(component); }));
-        };
-        JssComponentFactoryService.prototype.getRawComponent = function (component) {
-            return Promise.resolve({
-                componentImplementation: RawComponent,
-                componentDefinition: component,
-            });
-        };
-        return JssComponentFactoryService;
-    }());
-    JssComponentFactoryService.decorators = [
-        { type: core.Injectable }
-    ];
-    JssComponentFactoryService.ctorParameters = function () { return [
-        { type: core.Injector },
-        { type: core.Compiler },
-        { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
-        { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
+    var JssComponentFactoryService = /** @class */ (function () {
+        function JssComponentFactoryService(injector, compiler, components, lazyComponents) {
+            var _this = this;
+            this.injector = injector;
+            this.compiler = compiler;
+            this.components = components;
+            this.lazyComponents = lazyComponents;
+            this.componentMap = new Map();
+            this.lazyComponentMap = new Map();
+            this.components.forEach(function (c) { return _this.componentMap.set(c.name, c.type); });
+            if (this.lazyComponents) {
+                this.lazyComponents.forEach(function (c) { return _this.lazyComponentMap.set(c.path, c); });
+            }
+        }
+        JssComponentFactoryService.prototype.loadModuleFactory = function (lazyComponent) {
+            var _this = this;
+            return lazyComponent.loadChildren().then(function (loaded) {
+                if (loaded instanceof core.NgModuleFactory) {
+                    return loaded;
+                }
+                else {
+                    return _this.compiler.compileModuleAsync(loaded);
+                }
+            });
+        };
+        JssComponentFactoryService.prototype.getComponent = function (component) {
+            var _this = this;
+            var loadedComponent = this.componentMap.get(component.componentName);
+            if (loadedComponent) {
+                return Promise.resolve({
+                    componentDefinition: component,
+                    componentImplementation: this.componentMap.get(component.componentName),
+                });
+            }
+            var lazyComponent = this.lazyComponentMap.get(component.componentName);
+            if (lazyComponent) {
+                return this.loadModuleFactory(lazyComponent).then(function (ngModuleFactory) {
+                    var componentType = null;
+                    var moduleRef = ngModuleFactory.create(_this.injector);
+                    var dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
+                    if (!dynamicComponentType) {
+                        throw new Error("JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
+                    }
+                    if (component.componentName in dynamicComponentType) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        componentType = dynamicComponentType[component.componentName];
+                    }
+                    else {
+                        if (typeof dynamicComponentType === 'function') {
+                            componentType = dynamicComponentType;
+                        }
+                        else {
+                            throw new Error("JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
+                        }
+                    }
+                    return {
+                        componentDefinition: component,
+                        componentImplementation: componentType,
+                        componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
+                    };
+                });
+            }
+            return Promise.resolve({
+                componentDefinition: component,
+            });
+        };
+        JssComponentFactoryService.prototype.getComponents = function (components) {
+            var _this = this;
+            // acquire all components and keep them in order while handling their potential async-ness
+            return Promise.all(components.map(function (component) { return isRawRendering(component) ? _this.getRawComponent(component) : _this.getComponent(component); }));
+        };
+        JssComponentFactoryService.prototype.getRawComponent = function (component) {
+            return Promise.resolve({
+                componentImplementation: RawComponent,
+                componentDefinition: component,
+            });
+        };
+        return JssComponentFactoryService;
+    }());
+    JssComponentFactoryService.decorators = [
+        { type: core.Injectable }
+    ];
+    JssComponentFactoryService.ctorParameters = function () { return [
+        { type: core.Injector },
+        { type: core.Compiler },
+        { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
+        { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
     ]; };
 
-    var PlaceholderLoadingDirective = /** @class */ (function () {
-        function PlaceholderLoadingDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        return PlaceholderLoadingDirective;
-    }());
-    PlaceholderLoadingDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[scPlaceholderLoading]',
-                },] }
-    ];
-    PlaceholderLoadingDirective.ctorParameters = function () { return [
-        { type: core.TemplateRef }
+    var PlaceholderLoadingDirective = /** @class */ (function () {
+        function PlaceholderLoadingDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return PlaceholderLoadingDirective;
+    }());
+    PlaceholderLoadingDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[scPlaceholderLoading]',
+                },] }
+    ];
+    PlaceholderLoadingDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
     ]; };
 
-    var RenderEachDirective = /** @class */ (function () {
-        function RenderEachDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        return RenderEachDirective;
-    }());
-    RenderEachDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[renderEach]',
-                },] }
-    ];
-    RenderEachDirective.ctorParameters = function () { return [
-        { type: core.TemplateRef }
+    var RenderEachDirective = /** @class */ (function () {
+        function RenderEachDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return RenderEachDirective;
+    }());
+    RenderEachDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[renderEach]',
+                },] }
+    ];
+    RenderEachDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
     ]; };
 
-    var RenderEmptyDirective = /** @class */ (function () {
-        function RenderEmptyDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        return RenderEmptyDirective;
-    }());
-    RenderEmptyDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[renderEmpty]',
-                },] }
-    ];
-    RenderEmptyDirective.ctorParameters = function () { return [
-        { type: core.TemplateRef }
+    var RenderEmptyDirective = /** @class */ (function () {
+        function RenderEmptyDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return RenderEmptyDirective;
+    }());
+    RenderEmptyDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[renderEmpty]',
+                },] }
+    ];
+    RenderEmptyDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
     ]; };
 
-    /**
-     * @param {ComponentRendering} rendering
-     * @param {string} name
-     */
-    function getPlaceholder(rendering, name) {
-        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
-            return rendering.placeholders[name];
-        }
-        return null;
-    }
-    var PlaceholderComponent = /** @class */ (function () {
-        function PlaceholderComponent(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.differs = differs;
-            this.componentFactory = componentFactory;
-            this.changeDetectorRef = changeDetectorRef;
-            this.elementRef = elementRef;
-            this.renderer = renderer;
-            this.missingComponentComponent = missingComponentComponent;
-            this._componentInstances = [];
-            this.destroyed = false;
-            this.parentStyleAttribute = '';
-            this.isLoading = true;
-            this.loaded = new core.EventEmitter();
-        }
-        Object.defineProperty(PlaceholderComponent.prototype, "inputs", {
-            set: function (value) {
-                this._inputs = value;
-                if (!this._differ && value) {
-                    this._differ = this.differs.find(value).create();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PlaceholderComponent.prototype.ngOnInit = function () {
-            // just to ensure the element exists
-            var elem = this.elementRef.nativeElement;
-            if (elem) {
-                var attributes = elem.attributes;
-                for (var i = 0; i < attributes.length; i++) {
-                    var attr = attributes.item(i);
-                    if (attr && attr.name.indexOf('_ngcontent') !== -1) {
-                        this.parentStyleAttribute = attr.name;
-                    }
-                }
-            }
-        };
-        PlaceholderComponent.prototype.ngOnDestroy = function () {
-            this.destroyed = true;
-            this._componentInstances = [];
-        };
-        PlaceholderComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.rendering || changes.renderings) {
-                this._render();
-            }
-        };
-        PlaceholderComponent.prototype.ngDoCheck = function () {
-            var _this = this;
-            if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
-                return;
-            }
-            var changes = this._differ.diff(this._inputs);
-            if (!changes) {
-                return;
-            }
-            var updates = {};
-            changes.forEachRemovedItem(function (change) { return (updates[change.key] = null); });
-            changes.forEachAddedItem(function (change) { return (updates[change.key] = change.currentValue); });
-            changes.forEachChangedItem(function (change) { return (updates[change.key] = change.currentValue); });
-            this._componentInstances.forEach(function (componentInstance) { return _this._setComponentInputs(componentInstance, updates); });
-        };
-        PlaceholderComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
-            Object.entries(inputs).forEach(function (_a) {
-                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
-                return (componentInstance[input] = inputValue);
-            });
-        };
-        PlaceholderComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
-            var _this = this;
-            Object.keys(outputs)
-                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
-                .forEach(function (output) { return componentInstance[output]
-                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
-                .subscribe(outputs[output]); });
-        };
-        PlaceholderComponent.prototype._render = function () {
-            var _this = this;
-            this._componentInstances = [];
-            this.view.clear();
-            if (!this.rendering && !this.renderings) {
-                return;
-            }
-            if (!this.name && !this.renderings) {
-                console.warn('Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.');
-                this.isLoading = false;
-                return;
-            }
-            var placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
-            if (!placeholder) {
-                console.warn("Placeholder '" + this.name + "' was not found in the current rendering data", JSON.stringify(this.rendering, null, 2));
-                this.isLoading = false;
-                return;
-            }
-            // if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
-            var placeholderIsEmpty = placeholder.every(function (rendering) { return isRawRendering(rendering); });
-            if (this.renderEmptyTemplate && placeholderIsEmpty) {
-                this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
-                    renderings: placeholder,
-                });
-                this.isLoading = false;
-            }
-            else {
-                this.componentFactory
-                    .getComponents(placeholder)
-                    .then(function (components) { return components.forEach(function (rendering, index) {
-                    if (_this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
-                        _this._renderTemplatedComponent(rendering.componentDefinition, index);
-                    }
-                    else {
-                        _this._renderEmbeddedComponent(rendering, index);
-                    }
-                    _this.isLoading = false;
-                }); })
-                    .then(function () {
-                    _this.changeDetectorRef.markForCheck();
-                    _this.loaded.emit(_this.name);
-                });
-            }
-        };
-        PlaceholderComponent.prototype._renderTemplatedComponent = function (rendering, index) {
-            // the render-each template takes care of all component mapping etc
-            // generally using <sc-render-component> which is about like _renderEmbeddedComponent()
-            // as a separate component
-            this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
-                rendering: rendering,
-                index: index,
-            });
-        };
-        PlaceholderComponent.prototype._renderEmbeddedComponent = function (rendering, index) {
-            if (!rendering.componentImplementation) {
-                var componentName = rendering.componentDefinition.componentName;
-                console.error("Placeholder " + this.name + " contains unknown component " + componentName + ".", "Ensure component is mapped, like:\n        JssModule.withComponents([\n          { name: '" + componentName + "', type: " + componentName + "Component }\n        ])");
-                rendering.componentImplementation = this.missingComponentComponent;
-            }
-            var componentFactory = rendering.componentFactory ||
-                this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-            // apply the parent style attribute _ngcontent
-            // work-around for https://github.com/angular/angular/issues/12215
-            var createdComponentRef = this.view.createComponent(componentFactory, index);
-            if (this.parentStyleAttribute) {
-                this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
-            }
-            var componentInstance = createdComponentRef.instance;
-            componentInstance.rendering = rendering.componentDefinition;
-            if (this._inputs) {
-                this._setComponentInputs(componentInstance, this._inputs);
-            }
-            if (this.outputs) {
-                this._subscribeComponentOutputs(componentInstance, this.outputs);
-            }
-            this._componentInstances.push(componentInstance);
-        };
-        return PlaceholderComponent;
-    }());
-    PlaceholderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sc-placeholder,[sc-placeholder]',
-                    template: "\n    <ng-template\n      *ngIf=\"isLoading\"\n      [ngTemplateOutlet]=\"placeholderLoading?.templateRef\"\n    ></ng-template>\n    <ng-template #view></ng-template>\n  "
-                },] }
-    ];
-    PlaceholderComponent.ctorParameters = function () { return [
-        { type: core.ComponentFactoryResolver },
-        { type: core.KeyValueDiffers },
-        { type: JssComponentFactoryService },
-        { type: core.ChangeDetectorRef },
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-    ]; };
-    PlaceholderComponent.propDecorators = {
-        name: [{ type: core.Input }],
-        rendering: [{ type: core.Input }],
-        renderings: [{ type: core.Input }],
-        outputs: [{ type: core.Input }],
-        loaded: [{ type: core.Output }],
-        view: [{ type: core.ViewChild, args: ['view', { read: core.ViewContainerRef, static: true },] }],
-        renderEachTemplate: [{ type: core.ContentChild, args: [RenderEachDirective, { static: true },] }],
-        renderEmptyTemplate: [{ type: core.ContentChild, args: [RenderEmptyDirective, { static: true },] }],
-        placeholderLoading: [{ type: core.ContentChild, args: [PlaceholderLoadingDirective, { static: true },] }],
-        inputs: [{ type: core.Input }]
+    /**
+     * @param {ComponentRendering} rendering
+     * @param {string} name
+     */
+    function getPlaceholder(rendering, name) {
+        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+            return rendering.placeholders[name];
+        }
+        return null;
+    }
+    var PlaceholderComponent = /** @class */ (function () {
+        function PlaceholderComponent(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.differs = differs;
+            this.componentFactory = componentFactory;
+            this.changeDetectorRef = changeDetectorRef;
+            this.elementRef = elementRef;
+            this.renderer = renderer;
+            this.missingComponentComponent = missingComponentComponent;
+            this._componentInstances = [];
+            this.destroyed = false;
+            this.parentStyleAttribute = '';
+            this.isLoading = true;
+            this.loaded = new core.EventEmitter();
+        }
+        Object.defineProperty(PlaceholderComponent.prototype, "inputs", {
+            set: function (value) {
+                this._inputs = value;
+                if (!this._differ && value) {
+                    this._differ = this.differs.find(value).create();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PlaceholderComponent.prototype.ngOnInit = function () {
+            // just to ensure the element exists
+            var elem = this.elementRef.nativeElement;
+            if (elem) {
+                var attributes = elem.attributes;
+                for (var i = 0; i < attributes.length; i++) {
+                    var attr = attributes.item(i);
+                    if (attr && attr.name.indexOf('_ngcontent') !== -1) {
+                        this.parentStyleAttribute = attr.name;
+                    }
+                }
+            }
+        };
+        PlaceholderComponent.prototype.ngOnDestroy = function () {
+            this.destroyed = true;
+            this._componentInstances = [];
+        };
+        PlaceholderComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.rendering || changes.renderings) {
+                this._render();
+            }
+        };
+        PlaceholderComponent.prototype.ngDoCheck = function () {
+            var _this = this;
+            if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
+                return;
+            }
+            var changes = this._differ.diff(this._inputs);
+            if (!changes) {
+                return;
+            }
+            var updates = {};
+            changes.forEachRemovedItem(function (change) { return (updates[change.key] = null); });
+            changes.forEachAddedItem(function (change) { return (updates[change.key] = change.currentValue); });
+            changes.forEachChangedItem(function (change) { return (updates[change.key] = change.currentValue); });
+            this._componentInstances.forEach(function (componentInstance) { return _this._setComponentInputs(componentInstance, updates); });
+        };
+        PlaceholderComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
+            Object.entries(inputs).forEach(function (_a) {
+                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
+                return (componentInstance[input] = inputValue);
+            });
+        };
+        PlaceholderComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
+            var _this = this;
+            Object.keys(outputs)
+                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
+                .forEach(function (output) { return componentInstance[output]
+                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
+                .subscribe(outputs[output]); });
+        };
+        PlaceholderComponent.prototype._render = function () {
+            var _this = this;
+            this._componentInstances = [];
+            this.view.clear();
+            if (!this.rendering && !this.renderings) {
+                return;
+            }
+            if (!this.name && !this.renderings) {
+                console.warn('Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.');
+                this.isLoading = false;
+                return;
+            }
+            var placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
+            if (!placeholder) {
+                console.warn("Placeholder '" + this.name + "' was not found in the current rendering data", JSON.stringify(this.rendering, null, 2));
+                this.isLoading = false;
+                return;
+            }
+            // if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
+            var placeholderIsEmpty = placeholder.every(function (rendering) { return isRawRendering(rendering); });
+            if (this.renderEmptyTemplate && placeholderIsEmpty) {
+                this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
+                    renderings: placeholder,
+                });
+                this.isLoading = false;
+            }
+            else {
+                this.componentFactory
+                    .getComponents(placeholder)
+                    .then(function (components) { return components.forEach(function (rendering, index) {
+                    if (_this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
+                        _this._renderTemplatedComponent(rendering.componentDefinition, index);
+                    }
+                    else {
+                        _this._renderEmbeddedComponent(rendering, index);
+                    }
+                    _this.isLoading = false;
+                }); })
+                    .then(function () {
+                    _this.changeDetectorRef.markForCheck();
+                    _this.loaded.emit(_this.name);
+                });
+            }
+        };
+        PlaceholderComponent.prototype._renderTemplatedComponent = function (rendering, index) {
+            // the render-each template takes care of all component mapping etc
+            // generally using <sc-render-component> which is about like _renderEmbeddedComponent()
+            // as a separate component
+            this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
+                rendering: rendering,
+                index: index,
+            });
+        };
+        PlaceholderComponent.prototype._renderEmbeddedComponent = function (rendering, index) {
+            if (!rendering.componentImplementation) {
+                var componentName = rendering.componentDefinition.componentName;
+                console.error("Placeholder " + this.name + " contains unknown component " + componentName + ".", "Ensure component is mapped, like:\n        JssModule.withComponents([\n          { name: '" + componentName + "', type: " + componentName + "Component }\n        ])");
+                rendering.componentImplementation = this.missingComponentComponent;
+            }
+            var componentFactory = rendering.componentFactory ||
+                this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+            // apply the parent style attribute _ngcontent
+            // work-around for https://github.com/angular/angular/issues/12215
+            var createdComponentRef = this.view.createComponent(componentFactory, index);
+            if (this.parentStyleAttribute) {
+                this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
+            }
+            var componentInstance = createdComponentRef.instance;
+            componentInstance.rendering = rendering.componentDefinition;
+            if (this._inputs) {
+                this._setComponentInputs(componentInstance, this._inputs);
+            }
+            if (this.outputs) {
+                this._subscribeComponentOutputs(componentInstance, this.outputs);
+            }
+            this._componentInstances.push(componentInstance);
+        };
+        return PlaceholderComponent;
+    }());
+    PlaceholderComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sc-placeholder,[sc-placeholder]',
+                    template: "\n    <ng-template\n      *ngIf=\"isLoading\"\n      [ngTemplateOutlet]=\"placeholderLoading?.templateRef\"\n    ></ng-template>\n    <ng-template #view></ng-template>\n  "
+                },] }
+    ];
+    PlaceholderComponent.ctorParameters = function () { return [
+        { type: core.ComponentFactoryResolver },
+        { type: core.KeyValueDiffers },
+        { type: JssComponentFactoryService },
+        { type: core.ChangeDetectorRef },
+        { type: core.ElementRef },
+        { type: core.Renderer2 },
+        { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+    ]; };
+    PlaceholderComponent.propDecorators = {
+        name: [{ type: core.Input }],
+        rendering: [{ type: core.Input }],
+        renderings: [{ type: core.Input }],
+        outputs: [{ type: core.Input }],
+        loaded: [{ type: core.Output }],
+        view: [{ type: core.ViewChild, args: ['view', { read: core.ViewContainerRef, static: true },] }],
+        renderEachTemplate: [{ type: core.ContentChild, args: [RenderEachDirective, { static: true },] }],
+        renderEmptyTemplate: [{ type: core.ContentChild, args: [RenderEmptyDirective, { static: true },] }],
+        placeholderLoading: [{ type: core.ContentChild, args: [PlaceholderLoadingDirective, { static: true },] }],
+        inputs: [{ type: core.Input }]
     };
 
-    var RichTextDirective = /** @class */ (function () {
-        function RichTextDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.editable = true;
-        }
-        RichTextDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field || changes.editable) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        RichTextDirective.prototype.updateView = function () {
-            var field = this.field;
-            if (!field || (!field.editable && !field.value)) {
-                return;
-            }
-            var html = field.editable && this.editable ? field.editable : field.value;
-            this.viewRef.rootNodes.forEach(function (node) {
-                node.innerHTML = html;
-            });
-        };
-        return RichTextDirective;
-    }());
-    RichTextDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[scRichText]',
-                },] }
-    ];
-    RichTextDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef }
-    ]; };
-    RichTextDirective.propDecorators = {
-        editable: [{ type: core.Input, args: ['scRichTextEditable',] }],
-        field: [{ type: core.Input, args: ['scRichText',] }]
+    var RichTextDirective = /** @class */ (function () {
+        function RichTextDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.editable = true;
+        }
+        RichTextDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field || changes.editable) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        RichTextDirective.prototype.updateView = function () {
+            var field = this.field;
+            if (!field || (!field.editable && !field.value)) {
+                return;
+            }
+            var html = field.editable && this.editable ? field.editable : field.value;
+            this.viewRef.rootNodes.forEach(function (node) {
+                node.innerHTML = html;
+            });
+        };
+        return RichTextDirective;
+    }());
+    RichTextDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[scRichText]',
+                },] }
+    ];
+    RichTextDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef }
+    ]; };
+    RichTextDirective.propDecorators = {
+        editable: [{ type: core.Input, args: ['scRichTextEditable',] }],
+        field: [{ type: core.Input, args: ['scRichText',] }]
     };
 
-    var TextDirective = /** @class */ (function () {
-        function TextDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.editable = true;
-            this.encode = true;
-        }
-        TextDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field || changes.editable || changes.encode) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        TextDirective.prototype.updateView = function () {
-            var field = this.field;
-            var editable = this.editable;
-            if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
-                return;
-            }
-            // can't use editable value if we want to output unencoded
-            if (!this.encode) {
-                editable = false;
-            }
-            var html = field.editable && editable ? field.editable : field.value;
-            var setDangerously = (field.editable && editable) || !this.encode;
-            this.viewRef.rootNodes.forEach(function (node) {
-                if (setDangerously) {
-                    node.innerHTML = html;
-                }
-                else {
-                    node.textContent = html;
-                }
-            });
-        };
-        return TextDirective;
-    }());
-    TextDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[scText]',
-                },] }
-    ];
-    TextDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef }
-    ]; };
-    TextDirective.propDecorators = {
-        editable: [{ type: core.Input, args: ['scTextEditable',] }],
-        encode: [{ type: core.Input, args: ['scTextEncode',] }],
-        field: [{ type: core.Input, args: ['scText',] }]
+    var TextDirective = /** @class */ (function () {
+        function TextDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.editable = true;
+            this.encode = true;
+        }
+        TextDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field || changes.editable || changes.encode) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        TextDirective.prototype.updateView = function () {
+            var field = this.field;
+            var editable = this.editable;
+            if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+                return;
+            }
+            // can't use editable value if we want to output unencoded
+            if (!this.encode) {
+                editable = false;
+            }
+            var html = field.editable && editable ? field.editable : field.value;
+            var setDangerously = (field.editable && editable) || !this.encode;
+            this.viewRef.rootNodes.forEach(function (node) {
+                if (setDangerously) {
+                    node.innerHTML = html;
+                }
+                else {
+                    node.textContent = html;
+                }
+            });
+        };
+        return TextDirective;
+    }());
+    TextDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[scText]',
+                },] }
+    ];
+    TextDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef }
+    ]; };
+    TextDirective.propDecorators = {
+        editable: [{ type: core.Input, args: ['scTextEditable',] }],
+        encode: [{ type: core.Input, args: ['scTextEncode',] }],
+        field: [{ type: core.Input, args: ['scText',] }]
     };
 
-    var DateDirective = /** @class */ (function () {
-        function DateDirective(viewContainer, templateRef, datePipe) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.datePipe = datePipe;
-            this.editable = true;
-        }
-        DateDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.field || changes.format) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        DateDirective.prototype.updateView = function () {
-            var _this = this;
-            var field = this.field;
-            if (!field || (!field.editable && !field.value)) {
-                return;
-            }
-            var html = field.editable && this.editable ? field.editable : field.value;
-            var setDangerously = field.editable && this.editable;
-            this.viewRef.rootNodes.forEach(function (node) {
-                if (setDangerously) {
-                    node.innerHTML = html;
-                }
-                else {
-                    node.textContent = _this.datePipe.transform(html, _this.format, _this.timezone, _this.locale);
-                }
-            });
-        };
-        return DateDirective;
-    }());
-    DateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[scDate]',
-                },] }
-    ];
-    DateDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.TemplateRef },
-        { type: common.DatePipe }
-    ]; };
-    DateDirective.propDecorators = {
-        format: [{ type: core.Input, args: ['scDateFormat',] }],
-        timezone: [{ type: core.Input, args: ['scDateTimezone',] }],
-        locale: [{ type: core.Input, args: ['scDateLocale',] }],
-        editable: [{ type: core.Input, args: ['scDateEditable',] }],
-        field: [{ type: core.Input, args: ['scDate',] }]
+    var DateDirective = /** @class */ (function () {
+        function DateDirective(viewContainer, templateRef, datePipe) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.datePipe = datePipe;
+            this.editable = true;
+        }
+        DateDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.field || changes.format) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        DateDirective.prototype.updateView = function () {
+            var _this = this;
+            var field = this.field;
+            if (!field || (!field.editable && !field.value)) {
+                return;
+            }
+            var html = field.editable && this.editable ? field.editable : field.value;
+            var setDangerously = field.editable && this.editable;
+            this.viewRef.rootNodes.forEach(function (node) {
+                if (setDangerously) {
+                    node.innerHTML = html;
+                }
+                else {
+                    node.textContent = _this.datePipe.transform(html, _this.format, _this.timezone, _this.locale);
+                }
+            });
+        };
+        return DateDirective;
+    }());
+    DateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[scDate]',
+                },] }
+    ];
+    DateDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.TemplateRef },
+        { type: common.DatePipe }
+    ]; };
+    DateDirective.propDecorators = {
+        format: [{ type: core.Input, args: ['scDateFormat',] }],
+        timezone: [{ type: core.Input, args: ['scDateTimezone',] }],
+        locale: [{ type: core.Input, args: ['scDateLocale',] }],
+        editable: [{ type: core.Input, args: ['scDateEditable',] }],
+        field: [{ type: core.Input, args: ['scDate',] }]
     };
 
-    var MissingComponentComponent = /** @class */ (function () {
-        function MissingComponentComponent() {
-        }
-        return MissingComponentComponent;
-    }());
-    MissingComponentComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sc-missing-component',
-                    template: "\n    <div\n      style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\"\n    >\n      <h2>{{ rendering.componentName }}</h2>\n      <p>JSS component is missing Angular component implementation.</p>\n    </div>\n  "
-                },] }
-    ];
-    MissingComponentComponent.propDecorators = {
-        rendering: [{ type: core.Input }]
+    var MissingComponentComponent = /** @class */ (function () {
+        function MissingComponentComponent() {
+        }
+        return MissingComponentComponent;
+    }());
+    MissingComponentComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sc-missing-component',
+                    template: "\n    <div\n      style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\"\n    >\n      <h2>{{ rendering.componentName }}</h2>\n      <p>JSS component is missing Angular component implementation.</p>\n    </div>\n  "
+                },] }
+    ];
+    MissingComponentComponent.propDecorators = {
+        rendering: [{ type: core.Input }]
     };
 
-    /**
-     * Renders a single JSS component given a rendering definition.
-     * Useful inside templated placeholders.
-     */
-    var RenderComponentComponent = /** @class */ (function () {
-        function RenderComponentComponent(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.differs = differs;
-            this.componentFactory = componentFactory;
-            this.missingComponentComponent = missingComponentComponent;
-            this.destroyed = false;
-        }
-        Object.defineProperty(RenderComponentComponent.prototype, "inputs", {
-            set: function (value) {
-                this._inputs = value;
-                if (!this._differ && value) {
-                    this._differ = this.differs.find(value).create();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        RenderComponentComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.rendering) {
-                this._render();
-            }
-        };
-        RenderComponentComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
-            Object.entries(inputs).forEach(function (_a) {
-                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
-                return (componentInstance[input] = inputValue);
-            });
-        };
-        RenderComponentComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
-            var _this = this;
-            Object.keys(outputs)
-                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
-                .forEach(function (output) { return componentInstance[output]
-                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
-                .subscribe(outputs[output]); });
-        };
-        RenderComponentComponent.prototype._render = function () {
-            var _this = this;
-            this.view.clear();
-            if (!this.rendering) {
-                return;
-            }
-            var resolveComponent = isRawRendering(this.rendering)
-                ? Promise.resolve({
-                    componentImplementation: RawComponent,
-                    componentDefinition: this.rendering,
-                })
-                : this.componentFactory.getComponent(this.rendering);
-            resolveComponent.then(function (rendering) {
-                if (!rendering.componentImplementation) {
-                    var componentName = rendering.componentDefinition.componentName;
-                    console.error("Attempted to render unknown component " + componentName + ".", "Ensure component is mapped, like:\n          JssModule.withComponents([\n            { name: '" + componentName + "', type: " + componentName + "Component }\n          ])");
-                    rendering.componentImplementation = _this.missingComponentComponent;
-                }
-                var componentFactory = rendering.componentFactory ||
-                    _this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-                var componentInstance = _this.view.createComponent(componentFactory, 0).instance;
-                componentInstance.rendering = rendering.componentDefinition;
-                if (_this._inputs) {
-                    _this._setComponentInputs(componentInstance, _this._inputs);
-                }
-                if (_this.outputs) {
-                    _this._subscribeComponentOutputs(componentInstance, _this.outputs);
-                }
-            });
-        };
-        return RenderComponentComponent;
-    }());
-    RenderComponentComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sc-render-component',
-                    template: "\n    <ng-template #view></ng-template>\n  "
-                },] }
-    ];
-    RenderComponentComponent.ctorParameters = function () { return [
-        { type: core.ComponentFactoryResolver },
-        { type: core.KeyValueDiffers },
-        { type: JssComponentFactoryService },
-        { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-    ]; };
-    RenderComponentComponent.propDecorators = {
-        rendering: [{ type: core.Input }],
-        outputs: [{ type: core.Input }],
-        view: [{ type: core.ViewChild, args: ['view', { read: core.ViewContainerRef, static: true },] }],
-        inputs: [{ type: core.Input }]
+    /**
+     * Renders a single JSS component given a rendering definition.
+     * Useful inside templated placeholders.
+     */
+    var RenderComponentComponent = /** @class */ (function () {
+        function RenderComponentComponent(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.differs = differs;
+            this.componentFactory = componentFactory;
+            this.missingComponentComponent = missingComponentComponent;
+            this.destroyed = false;
+        }
+        Object.defineProperty(RenderComponentComponent.prototype, "inputs", {
+            set: function (value) {
+                this._inputs = value;
+                if (!this._differ && value) {
+                    this._differ = this.differs.find(value).create();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RenderComponentComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.rendering) {
+                this._render();
+            }
+        };
+        RenderComponentComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
+            Object.entries(inputs).forEach(function (_a) {
+                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
+                return (componentInstance[input] = inputValue);
+            });
+        };
+        RenderComponentComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
+            var _this = this;
+            Object.keys(outputs)
+                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
+                .forEach(function (output) { return componentInstance[output]
+                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
+                .subscribe(outputs[output]); });
+        };
+        RenderComponentComponent.prototype._render = function () {
+            var _this = this;
+            this.view.clear();
+            if (!this.rendering) {
+                return;
+            }
+            var resolveComponent = isRawRendering(this.rendering)
+                ? Promise.resolve({
+                    componentImplementation: RawComponent,
+                    componentDefinition: this.rendering,
+                })
+                : this.componentFactory.getComponent(this.rendering);
+            resolveComponent.then(function (rendering) {
+                if (!rendering.componentImplementation) {
+                    var componentName = rendering.componentDefinition.componentName;
+                    console.error("Attempted to render unknown component " + componentName + ".", "Ensure component is mapped, like:\n          JssModule.withComponents([\n            { name: '" + componentName + "', type: " + componentName + "Component }\n          ])");
+                    rendering.componentImplementation = _this.missingComponentComponent;
+                }
+                var componentFactory = rendering.componentFactory ||
+                    _this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+                var componentInstance = _this.view.createComponent(componentFactory, 0).instance;
+                componentInstance.rendering = rendering.componentDefinition;
+                if (_this._inputs) {
+                    _this._setComponentInputs(componentInstance, _this._inputs);
+                }
+                if (_this.outputs) {
+                    _this._subscribeComponentOutputs(componentInstance, _this.outputs);
+                }
+            });
+        };
+        return RenderComponentComponent;
+    }());
+    RenderComponentComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sc-render-component',
+                    template: "\n    <ng-template #view></ng-template>\n  "
+                },] }
+    ];
+    RenderComponentComponent.ctorParameters = function () { return [
+        { type: core.ComponentFactoryResolver },
+        { type: core.KeyValueDiffers },
+        { type: JssComponentFactoryService },
+        { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+    ]; };
+    RenderComponentComponent.propDecorators = {
+        rendering: [{ type: core.Input }],
+        outputs: [{ type: core.Input }],
+        view: [{ type: core.ViewChild, args: ['view', { read: core.ViewContainerRef, static: true },] }],
+        inputs: [{ type: core.Input }]
     };
 
-    var JssModule = /** @class */ (function () {
-        function JssModule() {
-        }
-        /**
-         * Instantiates the JSS module with no component factory.
-         * Useful for using it from libraries. Most of the time you'd want withComponents()
-         * @returns {ModuleWithProviders<JssModule>} module
-         */
-        JssModule.forRoot = function () {
-            return {
-                ngModule: JssModule,
-                providers: [common.DatePipe, JssComponentFactoryService],
-            };
-        };
-        /**
-         * Instantiates a module for a lazy-loaded JSS component
-         * @param {Type<unknown>} component
-         * @returns {ModuleWithProviders<JssModule>} module
-         */
-        JssModule.forChild = function (component) {
-            return {
-                ngModule: JssModule,
-                providers: [
-                    { provide: core.ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
-                    { provide: router.ROUTES, useValue: [], multi: true },
-                    { provide: DYNAMIC_COMPONENT, useValue: component },
-                ],
-            };
-        };
-        /**
-         * Instantiates the JSS module and specifies the mapping from component name to component implementation.
-         * Appropriate when defining the set of JSS components that your app is aware of.
-         * @param {ComponentNameAndType[]} components
-         * @param {ComponentNameAndModule[]} [lazyComponents]
-         * @returns {ModuleWithProviders<JssModule>} module
-         */
-        JssModule.withComponents = function (components, lazyComponents) {
-            return {
-                ngModule: JssModule,
-                providers: __spread([
-                    {
-                        provide: core.ANALYZE_FOR_ENTRY_COMPONENTS,
-                        useValue: components,
-                        multi: true,
-                    },
-                    { provide: PLACEHOLDER_COMPONENTS, useValue: components },
-                    { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
-                    { provide: router.ROUTES, useValue: lazyComponents || [], multi: true },
-                    { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
-                ], JssModule.forRoot().providers),
-            };
-        };
-        return JssModule;
-    }());
-    JssModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    declarations: [
-                        FileDirective,
-                        ImageDirective,
-                        LinkDirective,
-                        RouterLinkDirective,
-                        GenericLinkDirective,
-                        DateDirective,
-                        RenderEachDirective,
-                        RenderEmptyDirective,
-                        PlaceholderLoadingDirective,
-                        RenderComponentComponent,
-                        PlaceholderComponent,
-                        RawComponent,
-                        RichTextDirective,
-                        TextDirective,
-                        MissingComponentComponent,
-                    ],
-                    exports: [
-                        FileDirective,
-                        ImageDirective,
-                        DateDirective,
-                        LinkDirective,
-                        RouterLinkDirective,
-                        GenericLinkDirective,
-                        RenderEachDirective,
-                        RenderEmptyDirective,
-                        RenderComponentComponent,
-                        PlaceholderComponent,
-                        PlaceholderLoadingDirective,
-                        RichTextDirective,
-                        TextDirective,
-                    ],
-                    entryComponents: [RawComponent, MissingComponentComponent],
-                },] }
+    var JssModule = /** @class */ (function () {
+        function JssModule() {
+        }
+        /**
+         * Instantiates the JSS module with no component factory.
+         * Useful for using it from libraries. Most of the time you'd want withComponents()
+         * @returns {ModuleWithProviders<JssModule>} module
+         */
+        JssModule.forRoot = function () {
+            return {
+                ngModule: JssModule,
+                providers: [common.DatePipe, JssComponentFactoryService],
+            };
+        };
+        /**
+         * Instantiates a module for a lazy-loaded JSS component
+         * @param {Type<unknown>} component
+         * @returns {ModuleWithProviders<JssModule>} module
+         */
+        JssModule.forChild = function (component) {
+            return {
+                ngModule: JssModule,
+                providers: [
+                    { provide: core.ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
+                    { provide: router.ROUTES, useValue: [], multi: true },
+                    { provide: DYNAMIC_COMPONENT, useValue: component },
+                ],
+            };
+        };
+        /**
+         * Instantiates the JSS module and specifies the mapping from component name to component implementation.
+         * Appropriate when defining the set of JSS components that your app is aware of.
+         * @param {ComponentNameAndType[]} components
+         * @param {ComponentNameAndModule[]} [lazyComponents]
+         * @returns {ModuleWithProviders<JssModule>} module
+         */
+        JssModule.withComponents = function (components, lazyComponents) {
+            return {
+                ngModule: JssModule,
+                providers: __spread([
+                    {
+                        provide: core.ANALYZE_FOR_ENTRY_COMPONENTS,
+                        useValue: components,
+                        multi: true,
+                    },
+                    { provide: PLACEHOLDER_COMPONENTS, useValue: components },
+                    { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
+                    { provide: router.ROUTES, useValue: lazyComponents || [], multi: true },
+                    { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
+                ], JssModule.forRoot().providers),
+            };
+        };
+        return JssModule;
+    }());
+    JssModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    declarations: [
+                        FileDirective,
+                        ImageDirective,
+                        LinkDirective,
+                        RouterLinkDirective,
+                        GenericLinkDirective,
+                        DateDirective,
+                        RenderEachDirective,
+                        RenderEmptyDirective,
+                        PlaceholderLoadingDirective,
+                        RenderComponentComponent,
+                        PlaceholderComponent,
+                        RawComponent,
+                        RichTextDirective,
+                        TextDirective,
+                        MissingComponentComponent,
+                    ],
+                    exports: [
+                        FileDirective,
+                        ImageDirective,
+                        DateDirective,
+                        LinkDirective,
+                        RouterLinkDirective,
+                        GenericLinkDirective,
+                        RenderEachDirective,
+                        RenderEmptyDirective,
+                        RenderComponentComponent,
+                        PlaceholderComponent,
+                        PlaceholderLoadingDirective,
+                        RichTextDirective,
+                        TextDirective,
+                    ],
+                    entryComponents: [RawComponent, MissingComponentComponent],
+                },] }
     ];
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     Object.defineProperty(exports, 'GraphQLDictionaryService', {