survey-angular-ui 1.9.74 → 1.9.75

package/bundles/survey-angular-ui.umd.js

@@ -0,0 +1,4338 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('survey-core'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('survey-angular-ui', ['exports', '@angular/core', 'survey-core', '@angular/cdk/portal', '@angular/common', '@angular/forms', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["survey-angular-ui"] = {}, global.ng.core, global.Survey, global.ng.cdk.portal, global.ng.common, global.ng.forms, global.ng.platformBrowser));
+})(this, (function (exports, i0, Survey, portal, i2, i3, i1) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var Survey__namespace = /*#__PURE__*/_interopNamespace(Survey);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* 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 (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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 __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+        function accept(f) { if (f !== void 0 && typeof f !== "function")
+            throw new TypeError("Function expected"); return f; }
+        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+        var _, done = false;
+        for (var i = decorators.length - 1; i >= 0; i--) {
+            var context = {};
+            for (var p in contextIn)
+                context[p] = p === "access" ? {} : contextIn[p];
+            for (var p in contextIn.access)
+                context.access[p] = contextIn.access[p];
+            context.addInitializer = function (f) { if (done)
+                throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+            if (kind === "accessor") {
+                if (result === void 0)
+                    continue;
+                if (result === null || typeof result !== "object")
+                    throw new TypeError("Object expected");
+                if (_ = accept(result.get))
+                    descriptor.get = _;
+                if (_ = accept(result.set))
+                    descriptor.set = _;
+                if (_ = accept(result.init))
+                    initializers.push(_);
+            }
+            else if (_ = accept(result)) {
+                if (kind === "field")
+                    initializers.push(_);
+                else
+                    descriptor[key] = _;
+            }
+        }
+        if (target)
+            Object.defineProperty(target, contextIn.name, descriptor);
+        done = true;
+    }
+    ;
+    function __runInitializers(thisArg, initializers, value) {
+        var useValue = arguments.length > 2;
+        for (var i = 0; i < initializers.length; i++) {
+            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+        }
+        return useValue ? value : void 0;
+    }
+    ;
+    function __propKey(x) {
+        return typeof x === "symbol" ? x : "".concat(x);
+    }
+    ;
+    function __setFunctionName(f, name, prefix) {
+        if (typeof name === "symbol")
+            name = name.description ? "[".concat(name.description, "]") : "";
+        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+    }
+    ;
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            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) : adopt(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 (g && (g = 0, op[0] && (_ = 0)), _)
+                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 };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    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;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    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 __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    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: false } : 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;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
+
+    var EmbeddedViewContentComponent = /** @class */ (function () {
+        function EmbeddedViewContentComponent(viewContainerRef) {
+            this.viewContainerRef = viewContainerRef;
+        }
+        EmbeddedViewContentComponent.prototype.ngOnInit = function () {
+            var _a;
+            if (!!this.templateRef) {
+                this.embeddedView = (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.createEmbeddedView(this.templateRef);
+            }
+        };
+        return EmbeddedViewContentComponent;
+    }());
+    EmbeddedViewContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmbeddedViewContentComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EmbeddedViewContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EmbeddedViewContentComponent, selector: "ng-component", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmbeddedViewContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: "",
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { templateRef: [{
+                    type: i0.ViewChild,
+                    args: ["template", { read: i0.TemplateRef, static: true }]
+                }] } });
+
+    var BaseAngular = /** @class */ (function (_super) {
+        __extends(BaseAngular, _super);
+        function BaseAngular(changeDetectorRef, viewContainerRef) {
+            var _this = _super.call(this, viewContainerRef) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            _this.isModelSubsribed = false;
+            _this.isDestroyed = false;
+            return _this;
+        }
+        Object.defineProperty(BaseAngular.prototype, "surveyModel", {
+            get: function () {
+                return this.getModel().getSurvey();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseAngular.prototype.ngDoCheck = function () {
+            if (this.previousModel !== this.getModel()) {
+                this.unMakeBaseElementAngular(this.previousModel);
+                this.makeBaseElementAngular(this.getModel());
+                this.onModelChanged();
+                this.previousModel = this.getModel();
+            }
+            this.setIsRendering(true);
+        };
+        BaseAngular.prototype.onModelChanged = function () { };
+        BaseAngular.prototype.setIsRendering = function (val) {
+            var model = this.getModel();
+            if (!!model) {
+                model.isRendering = val;
+            }
+        };
+        BaseAngular.prototype.getIsRendering = function () {
+            var model = this.getModel();
+            return !!model && !!model.isRendering;
+        };
+        BaseAngular.prototype.ngOnDestroy = function () {
+            this.isDestroyed = true;
+            this.unMakeBaseElementAngular(this.getModel());
+        };
+        BaseAngular.prototype.makeBaseElementAngular = function (stateElement) {
+            var _this = this;
+            if (!!stateElement && !stateElement.__ngImplemented) {
+                this.isModelSubsribed = true;
+                stateElement.__ngImplemented = true;
+                stateElement.iteratePropertiesHash(function (hash, key) {
+                    var val = hash[key];
+                    if (Array.isArray(val)) {
+                        var val = val;
+                        val["onArrayChanged"] = function (arrayChanges) {
+                            _this.update(key);
+                        };
+                    }
+                });
+                stateElement.setPropertyValueCoreHandler = function (hash, key, val) {
+                    if (hash[key] !== val) {
+                        hash[key] = val;
+                        _this.update(key);
+                    }
+                };
+            }
+        };
+        BaseAngular.prototype.unMakeBaseElementAngular = function (stateElement) {
+            if (!!stateElement && this.isModelSubsribed) {
+                this.isModelSubsribed = false;
+                stateElement.__ngImplemented = false;
+                stateElement.setPropertyValueCoreHandler = undefined;
+                stateElement.iteratePropertiesHash(function (hash, key) {
+                    var val = hash[key];
+                    if (Array.isArray(val)) {
+                        var val = val;
+                        val["onArrayChanged"] = function () { };
+                    }
+                });
+            }
+        };
+        BaseAngular.prototype.update = function (key) {
+            var _this = this;
+            if (this.getIsRendering())
+                return;
+            this.beforeUpdate();
+            if (this.getPropertiesToUpdateSync().indexOf(key) > -1) {
+                this.detectChanges();
+                this.afterUpdate();
+            }
+            else {
+                (window["__zone_symbol__queueMicrotask"]
+                    ? window["__zone_symbol__queueMicrotask"] : queueMicrotask)(function () {
+                    if (!_this.isDestroyed) {
+                        _this.setIsRendering(true);
+                        _this.detectChanges();
+                    }
+                    _this.afterUpdate();
+                });
+            }
+        };
+        BaseAngular.prototype.getChangeDetectorRef = function () {
+            return this.embeddedView ? this.embeddedView : this.changeDetectorRef;
+        };
+        BaseAngular.prototype.getPropertiesToUpdateSync = function () {
+            return [];
+        };
+        BaseAngular.prototype.detectChanges = function () {
+            this.getChangeDetectorRef().detectChanges();
+        };
+        BaseAngular.prototype.getShouldReattachChangeDetector = function () {
+            return true;
+        };
+        BaseAngular.prototype.beforeUpdate = function () {
+            if (this.getShouldReattachChangeDetector()) {
+                this.getChangeDetectorRef().detach();
+            }
+            this.setIsRendering(true);
+        };
+        BaseAngular.prototype.afterUpdate = function () {
+            if (this.getShouldReattachChangeDetector()) {
+                this.getChangeDetectorRef().reattach();
+            }
+            this.setIsRendering(false);
+        };
+        BaseAngular.prototype.ngAfterViewChecked = function () {
+            this.setIsRendering(false);
+        };
+        return BaseAngular;
+    }(EmbeddedViewContentComponent));
+    BaseAngular.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseAngular, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BaseAngular.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BaseAngular, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseAngular, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: ""
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }]; } });
+
+    var AngularComponentFactory = /** @class */ (function () {
+        function AngularComponentFactory() {
+            this.creatorHash = {};
+        }
+        AngularComponentFactory.prototype.registerComponent = function (typeName, componentType) {
+            this.creatorHash[typeName] = componentType;
+        };
+        AngularComponentFactory.prototype.getAllTypes = function () {
+            var result = new Array();
+            for (var key in this.creatorHash) {
+                result.push(key);
+            }
+            return result.sort();
+        };
+        AngularComponentFactory.prototype.isComponentRegistered = function (elementType) {
+            return !!this.creatorHash[elementType];
+        };
+        AngularComponentFactory.prototype.create = function (containerRef, elementType, resolver) {
+            var componentType = this.creatorHash[elementType];
+            if (!componentType)
+                return null;
+            return containerRef.createComponent(resolver.resolveComponentFactory(componentType));
+        };
+        return AngularComponentFactory;
+    }());
+    AngularComponentFactory.Instance = new AngularComponentFactory();
+
+    var DynamicComponentDirective = /** @class */ (function () {
+        function DynamicComponentDirective(containerRef, templateRef, resolver) {
+            this.containerRef = containerRef;
+            this.templateRef = templateRef;
+            this.resolver = resolver;
+        }
+        DynamicComponentDirective.prototype.ngOnChanges = function (changes) {
+            var _a;
+            var componentChanges = changes["component"];
+            if (componentChanges.currentValue.name !== ((_a = componentChanges.previousValue) === null || _a === void 0 ? void 0 : _a.name) ||
+                (componentChanges.currentValue.name === undefined && componentChanges.previousValue === undefined && !this.componentInstance)) {
+                this.createComponent();
+            }
+            else {
+                this.updateComponentData();
+            }
+        };
+        DynamicComponentDirective.prototype.createComponent = function () {
+            this.containerRef.clear();
+            if (AngularComponentFactory.Instance.isComponentRegistered(this.component.name)) {
+                this.componentInstance = AngularComponentFactory.Instance.create(this.containerRef, this.component.name, this.resolver).instance;
+            }
+            else if (this.component.default) {
+                this.componentInstance = AngularComponentFactory.Instance.create(this.containerRef, this.component.default, this.resolver).instance;
+            }
+            if (!this.componentInstance) {
+                throw new Error("Can't create component with name: " + this.component.name + " and default: " + this.component.default);
+            }
+            else {
+                this.componentInstance.contentTempl = this.templateRef;
+            }
+            this.updateComponentData();
+        };
+        DynamicComponentDirective.prototype.updateComponentData = function () {
+            var _this = this;
+            var data = this.component.data;
+            Object.keys(data).forEach(function (key) {
+                _this.componentInstance[key] = data[key];
+            });
+        };
+        return DynamicComponentDirective;
+    }());
+    DynamicComponentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicComponentDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.TemplateRef }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicComponentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DynamicComponentDirective, selector: "[component]", inputs: { component: "component" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicComponentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[component]"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.TemplateRef }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { component: [{
+                    type: i0.Input
+                }] } });
+
+    var ActionComponent = /** @class */ (function (_super) {
+        __extends(ActionComponent, _super);
+        function ActionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ActionComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        ActionComponent.prototype.getPropertiesToUpdateSync = function () {
+            return ["mode"];
+        };
+        return ActionComponent;
+    }(BaseAngular));
+    ActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-action",
+                        templateUrl: "./action.component.html",
+                        styles: [":host { display: none; }"],
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], actionContent: [{
+                    type: i0.ViewChild,
+                    args: ["actionContent", { read: i0.ViewContainerRef, static: true }]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-action", ActionComponent);
+
+    var ActionBarComponent = /** @class */ (function (_super) {
+        __extends(ActionBarComponent, _super);
+        function ActionBarComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ActionBarComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(ActionBarComponent.prototype, "allowOnClick", {
+            get: function () {
+                return this.handleClick !== undefined ? this.handleClick : true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ActionBarComponent.prototype.onClick = function (event) {
+            if (this.allowOnClick) {
+                event.stopPropagation();
+            }
+        };
+        ActionBarComponent.prototype.ngAfterViewInit = function () {
+            if (!!this.model.hasActions) {
+                this.model.initResponsivityManager(this.container.nativeElement);
+            }
+        };
+        ActionBarComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this.model.resetResponsivityManager();
+        };
+        return ActionBarComponent;
+    }(BaseAngular));
+    ActionBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-action-bar, sv-ng-action-bar",
+                        templateUrl: "./action-bar.component.html",
+                        styles: [":host { display: none }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], handleClick: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ["container"]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-action-bar", ActionBarComponent);
+
+    var VisibleDirective = /** @class */ (function () {
+        function VisibleDirective(el) {
+            this.el = el;
+        }
+        VisibleDirective.prototype.ngOnChanges = function (changes) {
+            changes["visible"].currentValue ? this.show() : this.hide();
+        };
+        VisibleDirective.prototype.hide = function () {
+            this.el.nativeElement.style.display = "none";
+        };
+        VisibleDirective.prototype.show = function () {
+            this.el.nativeElement.style.display = "";
+        };
+        return VisibleDirective;
+    }());
+    VisibleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VisibleDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VisibleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: VisibleDirective, selector: "[visible]", inputs: { visible: "visible" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VisibleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[visible]"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { visible: [{
+                    type: i0.Input
+                }] } });
+
+    var PopupBaseContainerComponent = /** @class */ (function (_super) {
+        __extends(PopupBaseContainerComponent, _super);
+        function PopupBaseContainerComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this.prevIsVisible = false;
+            _this.changeDetectorRef.detach();
+            return _this;
+        }
+        PopupBaseContainerComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(PopupBaseContainerComponent.prototype, "applyButtonText", {
+            get: function () {
+                var popupModalModel = this.model;
+                if (!popupModalModel)
+                    return null;
+                return popupModalModel.applyButtonText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PopupBaseContainerComponent.prototype.apply = function () {
+            var popupModalModel = this.model;
+            if (!popupModalModel)
+                return;
+            popupModalModel.apply();
+        };
+        PopupBaseContainerComponent.prototype.getShouldReattachChangeDetector = function () {
+            return false;
+        };
+        PopupBaseContainerComponent.prototype.onModelChanged = function () {
+            this.changeDetectorRef.detectChanges();
+        };
+        PopupBaseContainerComponent.prototype.afterUpdate = function () {
+            _super.prototype.afterUpdate.call(this);
+            if (!this.prevIsVisible && this.model.isVisible) {
+                this.model.updateOnShowing();
+            }
+            if (this.prevIsVisible !== this.model.isVisible) {
+                this.prevIsVisible = this.model.isVisible;
+            }
+        };
+        PopupBaseContainerComponent.prototype.clickInside = function (event) {
+            event.stopPropagation();
+        };
+        return PopupBaseContainerComponent;
+    }(BaseAngular));
+    PopupBaseContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupBaseContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupBaseContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\" (click)=\"clickInside($event)\">\n        <div class=\"sv-popup__shadow\">\n            <ng-container *ngIf=\"model.showHeader\">\n                <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n            </ng-container>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupBaseContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-popup-container, '[sv-ng-popup-container]'",
+                        templateUrl: "./popup-container.component.html"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var PopupService = /** @class */ (function () {
+        function PopupService(injector, applicationRef, componentFactoryResolver) {
+            this.injector = injector;
+            this.applicationRef = applicationRef;
+            this.componentFactoryResolver = componentFactoryResolver;
+        }
+        PopupService.prototype.createComponent = function (popupViewModel) {
+            var portalHost = new portal.DomPortalOutlet(popupViewModel.container, this.componentFactoryResolver, this.applicationRef, this.injector);
+            var portal$1 = new portal.ComponentPortal(PopupBaseContainerComponent);
+            var componentRef = portalHost.attach(portal$1);
+            popupViewModel.container = popupViewModel.container.children[0];
+            componentRef.instance.model = popupViewModel;
+            componentRef.changeDetectorRef.detectChanges();
+            return portalHost;
+        };
+        return PopupService;
+    }());
+    PopupService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    PopupService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.ComponentFactoryResolver }]; } });
+
+    var ModalComponent = /** @class */ (function () {
+        function ModalComponent(popupService) {
+            this.popupService = popupService;
+            this.functionDefined = false;
+        }
+        ModalComponent.prototype.showDialog = function (dialogOptions) {
+            var _this = this;
+            this.model = Survey.createPopupModalViewModel(dialogOptions);
+            this.model.initializePopupContainer();
+            this.model.model.onHide = function () {
+                _this.portalHost.detach();
+                _this.model.unmountPopupContainer();
+            };
+            this.portalHost = this.popupService.createComponent(this.model);
+            this.model.model.isVisible = true;
+            return this.model;
+        };
+        ModalComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (!!Survey.settings.showModal)
+                return;
+            this.functionDefined = true;
+            Survey.settings.showModal = function (componentName, data, onApply, onCancel, cssClass, title, displayMode) {
+                if (displayMode === void 0) { displayMode = "popup"; }
+                var options = Survey.createDialogOptions(componentName, data, onApply, onCancel, undefined, undefined, cssClass, title, displayMode);
+                return _this.showDialog(options);
+            };
+        };
+        ModalComponent.prototype.ngOnDestroy = function () {
+            if (this.functionDefined) {
+                Survey.settings.showModal = undefined;
+            }
+        };
+        return ModalComponent;
+    }());
+    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModalComponent, deps: [{ token: PopupService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModalComponent, selector: "sv-ng-modal-container", ngImport: i0__namespace, template: "", isInline: true, styles: [":host{display:none}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-modal-container",
+                        template: "",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], ctorParameters: function () { return [{ type: PopupService }]; } });
+
+    var DynamicHeadComponent = /** @class */ (function (_super) {
+        __extends(DynamicHeadComponent, _super);
+        function DynamicHeadComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(DynamicHeadComponent.prototype, "ariaLabel", {
+            get: function () {
+                return this.element.titleAriaLabel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DynamicHeadComponent;
+    }(EmbeddedViewContentComponent));
+    DynamicHeadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-dynamic-head",
+                        templateUrl: "./dynamic-head.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { tagName: [{
+                    type: i0.Input
+                }], element: [{
+                    type: i0.Input
+                }] } });
+
+    var SurveyStringComponent = /** @class */ (function () {
+        function SurveyStringComponent() {
+        }
+        return SurveyStringComponent;
+    }());
+    SurveyStringComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyStringComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyStringComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<ng-template [component]='{ name: model.renderAs, data: { model: model.renderAsData } }'></ng-template>", isInline: true, directives: [{ type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyStringComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-string, '[sv-ng-string]'",
+                        template: "<ng-template [component]='{ name: model.renderAs, data: { model: model.renderAsData } }'></ng-template>"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var ElementTitleActionsComponent = /** @class */ (function (_super) {
+        __extends(ElementTitleActionsComponent, _super);
+        function ElementTitleActionsComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ElementTitleActionsComponent;
+    }(EmbeddedViewContentComponent));
+    ElementTitleActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleActionsComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementTitleActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: { element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"!element.hasTitleActions\">\n    <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"element.hasTitleActions\">\n    <div class=\"sv-title-actions\">\n      <span class=\"sv-title-actions__title\">\n        <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n      </span>\n      <sv-ng-action-bar [model]=\"element.getTitleToolbar()\"></sv-ng-action-bar>\n    </div>\n  </ng-container>\n  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"element.isTitleRenderedAsString\" [model]=\"element.locTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"!element.isTitleRenderedAsString\">\n      <span\n        *ngIf=\"element.isRequireTextOnStart\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span\n        *ngIf=\"element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssClasses.number || element.cssClasses.panel.number\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span *ngIf=\"element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string [model]=\"element.locTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\" element.isRequireTextAfterTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-element-title-actions",
+                        templateUrl: "./title-actions.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }] } });
+
+    var ElementTitleComponent = /** @class */ (function (_super) {
+        __extends(ElementTitleComponent, _super);
+        function ElementTitleComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ElementTitleComponent;
+    }(EmbeddedViewContentComponent));
+    ElementTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <sv-ng-element-title-actions [element]=\"element\"></sv-ng-element-title-actions>\n  </sv-ng-dynamic-head>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-element-title",
+                        templateUrl: "./element-title.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }] } });
+
+    var SurveyHeaderComponent = /** @class */ (function () {
+        function SurveyHeaderComponent(viewContainerRef, changeDetectorRef) {
+            this.viewContainerRef = viewContainerRef;
+            this.changeDetectorRef = changeDetectorRef;
+        }
+        SurveyHeaderComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.survey.afterRenderHeader(this.viewContainerRef.element.nativeElement);
+            this.survey.locLogo.onChanged = function () {
+                _this.changeDetectorRef.detectChanges();
+            };
+        };
+        SurveyHeaderComponent.prototype.ngOnDestroy = function () {
+            this.survey.locLogo.onChanged = function () { };
+        };
+        return SurveyHeaderComponent;
+    }());
+    SurveyHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyHeaderComponent, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0__namespace, template: "<div *ngIf=\"survey.isLogoBefore\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div\n  *ngIf=\"survey.renderedHasTitle\"\n  [class]=\"survey.css.headerText\"\n  [style.maxWidth]=\"survey.titleMaxWidth\"\n>\n  <sv-ng-element-title [element]=\"survey\"></sv-ng-element-title>\n  <h5 *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></h5>\n</div>\n\n<div *ngIf=\"survey.isLogoAfter\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div [class]=\"survey.css.headerClose\"></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "'[sv-ng-survey-header]'",
+                        templateUrl: "survey-header.component.html"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { survey: [{
+                    type: i0.Input
+                }] } });
+
+    var SvgIconComponent = /** @class */ (function () {
+        function SvgIconComponent(viewContaierRef) {
+            this.viewContaierRef = viewContaierRef;
+        }
+        SvgIconComponent.prototype.createSvg = function () {
+            if (!!this.iconName) {
+                Survey__namespace.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
+            }
+        };
+        Object.defineProperty(SvgIconComponent.prototype, "rootClass", {
+            get: function () {
+                var className = "sv-svg-icon";
+                if (!this.css && !!this.partCss) {
+                    className += " " + this.partCss;
+                }
+                else if (!!this.css) {
+                    className = this.css;
+                }
+                return className;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SvgIconComponent.prototype, "rootRole", {
+            get: function () {
+                return "img";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SvgIconComponent.prototype, "ariaLabel", {
+            get: function () {
+                return this.title;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SvgIconComponent.prototype.ngOnChanges = function () {
+            var el = this.viewContaierRef.element.nativeElement;
+            el.innerHTML = "";
+            el.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "use"));
+            this.createSvg();
+        };
+        return SvgIconComponent;
+    }());
+    SvgIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SvgIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "'[sv-ng-svg-icon]'",
+                        template: ""
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { size: [{
+                    type: i0.Input
+                }], width: [{
+                    type: i0.Input
+                }], height: [{
+                    type: i0.Input
+                }], iconName: [{
+                    type: i0.Input
+                }], partCss: [{
+                    type: i0.Input
+                }], css: [{
+                    type: i0.Input
+                }], title: [{
+                    type: i0.Input
+                }], rootClass: [{
+                    type: i0.HostBinding,
+                    args: ["class"]
+                }], rootRole: [{
+                    type: i0.HostBinding,
+                    args: ["[attr.role]"]
+                }], ariaLabel: [{
+                    type: i0.HostBinding,
+                    args: ["[attr.aria-label]"]
+                }] } });
+
+    var TimerPanelComponent = /** @class */ (function (_super) {
+        __extends(TimerPanelComponent, _super);
+        function TimerPanelComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.circleLengthValue = 440;
+            return _this;
+        }
+        TimerPanelComponent.prototype.getStateElement = function () {
+            return this.model;
+        };
+        TimerPanelComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(TimerPanelComponent.prototype, "circleLength", {
+            get: function () {
+                return this.circleLengthValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimerPanelComponent.prototype, "progress", {
+            get: function () {
+                return -this.model.progress * this.circleLength;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TimerPanelComponent;
+    }(BaseAngular));
+    TimerPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TimerPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimerPanelComponent, selector: "sv-timer-panel", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"model.showTimerAsClock\" [class]=\"model.rootCss\">\n    <svg *ngIf=\"model.showProgress\" [class]=\"model.getProgressCss()\" [style.stroke-dasharray]=\"circleLength\" [style.stroke-dashoffset]=\"progress\" [size]=\"'auto'\" [iconName]=\"'icon-timercircle'\" sv-ng-svg-icon></svg>\n    <div [class]=\"model.textContainerCss\">\n        <span [class]=\"model.majorTextCss\">{{ model.clockMajorText }}</span>\n        <span *ngIf=\"model.clockMinorText\" [class]=\"model.minorTextCss\">{{ model.clockMinorText }}</span>\n    </div>\n</div>\n<div *ngIf=\"!model.showTimerAsClock\" [class]='model.survey.getCss().timerRoot'>{{model.text}}</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-timer-panel",
+                        templateUrl: "./timer-panel.component.html",
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var ElementComponent = /** @class */ (function (_super) {
+        __extends(ElementComponent, _super);
+        function ElementComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ElementComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(ElementComponent.prototype, "elementComponentName", {
+            get: function () {
+                return this.model.isPanel ? "panel" : "question";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ElementComponent.prototype, "componentName", {
+            get: function () {
+                var survey = this.surveyModel;
+                if (!!survey) {
+                    var name = survey.getElementWrapperComponentName(this.model);
+                    if (!!name) {
+                        return name;
+                    }
+                }
+                return this.elementComponentName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ElementComponent.prototype, "rootStyle", {
+            get: function () {
+                //use this if to check if cssClassses are calculated and allowRootStyle flag was set
+                if (!!this.model.cssClasses) {
+                    return this.model.rootStyle;
+                }
+                else {
+                    return {};
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ElementComponent.prototype, "componentData", {
+            get: function () {
+                var survey = this.surveyModel;
+                var data;
+                if (!!survey) {
+                    data = survey.getElementWrapperComponentData(this.model);
+                }
+                return {
+                    componentName: this.elementComponentName,
+                    componentData: {
+                        model: this.model,
+                        data: data
+                    }
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ElementComponent;
+    }(BaseAngular));
+    ElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-element",
+                        templateUrl: "./element.component.html",
+                        styleUrls: ["./hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var RowComponent = /** @class */ (function (_super) {
+        __extends(RowComponent, _super);
+        function RowComponent(cdr, vcr, ngZone) {
+            var _this = _super.call(this, cdr, vcr) || this;
+            _this.ngZone = ngZone;
+            return _this;
+        }
+        RowComponent.prototype.getModel = function () {
+            return this.row;
+        };
+        RowComponent.prototype.trackElementBy = function (index, element) {
+            return element.name + index;
+        };
+        RowComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            var _a;
+            var el = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (!!el && !this.row.isNeedRender) {
+                this.ngZone.runOutsideAngular(function () {
+                    setTimeout(function () {
+                        _this.row.startLazyRendering(el);
+                    }, 10);
+                });
+            }
+        };
+        RowComponent.prototype.onModelChanged = function () {
+            _super.prototype.onModelChanged.call(this);
+            if (!this.previousModel) {
+                return;
+            }
+            else {
+                this.row.isNeedRender = this.previousModel.isNeedRender;
+                this.stopLazyRendering();
+            }
+        };
+        RowComponent.prototype.stopLazyRendering = function () {
+            this.row.stopLazyRendering();
+            this.row.isNeedRender = !this.row.isLazyRendering();
+        };
+        RowComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this.stopLazyRendering();
+        };
+        return RowComponent;
+    }(BaseAngular));
+    RowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RowComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\" #container>\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n      <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RowComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-row",
+                        templateUrl: "./row.component.html",
+                        styleUrls: ["./hide-host.scss"]
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { row: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ["container", { read: i0.ElementRef }]
+                }] } });
+
+    var PageComponent = /** @class */ (function (_super) {
+        __extends(PageComponent, _super);
+        function PageComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PageComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        PageComponent.prototype.onModelChanged = function () {
+            if (!!this.pageContainerRef && this.pageContainerRef.nativeElement) {
+                this.model.survey.afterRenderPage(this.pageContainerRef.nativeElement);
+            }
+        };
+        PageComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            (_a = this.model.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPage((_b = this.pageContainerRef) === null || _b === void 0 ? void 0 : _b.nativeElement);
+        };
+        return PageComponent;
+    }(BaseAngular));
+    PageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "page, sv-ng-page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n    <div [class]=\"model.cssRoot\" #pageContainer>\n      <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n      <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page.description\">\n        <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n      </div>\n      <ng-container *ngFor=\"let row of model.rows\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>  \n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "page, sv-ng-page",
+                        templateUrl: "./page.component.html",
+                        styleUrls: ["./hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], survey: [{
+                    type: i0.Input
+                }], pageContainerRef: [{
+                    type: i0.ViewChild,
+                    args: ["pageContainer", { static: false, read: i0.ElementRef }]
+                }] } });
+
+    var BrandInfoComponent = /** @class */ (function () {
+        function BrandInfoComponent() {
+        }
+        return BrandInfoComponent;
+    }());
+    BrandInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BrandInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrandInfoComponent, selector: "sv-brand-info", ngImport: i0__namespace, template: "<div class=\"sv-brand-info\">\n  <a class=\"sv-brand-info__logo\" href=\"https://surveyjs.io/?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=landing_page\"><img src=\"https://surveyjs.io/Content/Images/poweredby.svg\"/></a>\n  <div class=\"sv-brand-info__text\">Try and see how easy it is to <a href=\"https://surveyjs.io/create-survey?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=create_survey\">create a survey</a></div>\n  <div class=\"sv-brand-info__terms\"><a href=\"https://surveyjs.io/TermsOfUse\">Terms of Use & Privacy Statement</a></div>\n</div>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-brand-info",
+                        templateUrl: "./brand-info.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-brand-info", BrandInfoComponent);
+
+    var NotifierComponent = /** @class */ (function (_super) {
+        __extends(NotifierComponent, _super);
+        function NotifierComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        NotifierComponent.prototype.getStateElement = function () {
+            return this.notifier;
+        };
+        NotifierComponent.prototype.getModel = function () {
+            return this.notifier;
+        };
+        return NotifierComponent;
+    }(BaseAngular));
+    NotifierComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    NotifierComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotifierComponent, selector: "sv-notifier", inputs: { notifier: "notifier" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [visible]=\"notifier.active\" [class]=\"notifier.css\">\n    <span>{{notifier.message}}</span>\n    <sv-action-bar [model]=\"notifier.actionBar\"></sv-action-bar> \n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-notifier",
+                        templateUrl: "./notifier.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { notifier: [{
+                    type: i0.Input
+                }] } });
+
+    var SurveyContentComponent = /** @class */ (function (_super) {
+        __extends(SurveyContentComponent, _super);
+        function SurveyContentComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.isSurveyUpdated = false;
+            return _this;
+        }
+        SurveyContentComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        SurveyContentComponent.prototype.onModelChanged = function () {
+            var _this = this;
+            if (!!this.previousModel) {
+                this.previousModel.destroyResizeObserver();
+                this.previousModel.renderCallback = undefined;
+            }
+            if (!!this.model) {
+                this.model.renderCallback = function () {
+                    _this.detectChanges();
+                };
+            }
+            this.isSurveyUpdated = true;
+        };
+        SurveyContentComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (!!this.model && this.model["needRenderIcons"]) {
+                Survey.SvgRegistry.renderIcons();
+            }
+        };
+        SurveyContentComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            if (!!this.model) {
+                this.model.renderCallback = undefined;
+            }
+        };
+        SurveyContentComponent.prototype.ngAfterViewInit = function () {
+            this.isSurveyUpdated = true;
+        };
+        SurveyContentComponent.prototype.ngAfterViewChecked = function () {
+            if (!!this.model && this.isSurveyUpdated) {
+                this.model.afterRenderSurvey(this.rootEl.nativeElement);
+            }
+            _super.prototype.ngAfterViewChecked.call(this);
+        };
+        return SurveyContentComponent;
+    }(BaseAngular));
+    SurveyContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-container *ngIf=\"model.isTimerPanelShowingOnTop && !model.isShowStartingPage\">\n          <sv-timer-panel [model]=\"model.timerModel\"></sv-timer-panel>\n        </ng-container>\n        <ng-container *ngIf=\"model.isShowProgressBarOnTop && !model.isShowStartingPage\">\n          <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n        </ng-container>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnTop\" [model]=\"model.navigationBar\"></sv-action-bar>\n          <!-- ko if: activePage -->\n            <ng-container *ngIf=\"model.activePage\">\n                <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n            </ng-container>\n            <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n            <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n            <!-- /ko -->\n            <!-- /ko -->\n          <!-- /ko -->\n          <ng-container *ngIf=\"model.isShowProgressBarOnBottom && !model.isShowStartingPage\">\n            <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n          </ng-container>\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnBottom\" [model]=\"model.navigationBar\"></sv-action-bar>  \n        </div>\n        <ng-container *ngIf=\"model.isTimerPanelShowingOnBottom && !model.isShowStartingPage\">\n            <sv-timer-panel [model]=\"model.timerModel\"></sv-timer-panel>\n        </ng-container>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n    <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: TimerPanelComponent, selector: "sv-timer-panel", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "survey-content",
+                        templateUrl: "./survey-content.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], rootEl: [{
+                    type: i0.ViewChild,
+                    args: ["surveyContainer", { static: false }]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("survey", SurveyContentComponent);
+
+    var SurveyComponent = /** @class */ (function (_super) {
+        __extends(SurveyComponent, _super);
+        function SurveyComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            changeDetectorRef.detach();
+            return _this;
+        }
+        SurveyComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        SurveyComponent.prototype.getShouldReattachChangeDetector = function () {
+            return false;
+        };
+        SurveyComponent.prototype.onModelChanged = function () {
+            this.changeDetectorRef.detectChanges();
+        };
+        return SurveyComponent;
+    }(BaseAngular));
+    SurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyComponent, selector: "survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>", isInline: true, components: [{ type: ModalComponent, selector: "sv-ng-modal-container" }, { type: SurveyContentComponent, selector: "survey-content", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "survey",
+                        template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var PopupSurveyComponent = /** @class */ (function (_super) {
+        __extends(PopupSurveyComponent, _super);
+        function PopupSurveyComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            changeDetectorRef.detach();
+            return _this;
+        }
+        PopupSurveyComponent.prototype.getModel = function () {
+            return this.popup;
+        };
+        PopupSurveyComponent.prototype.getShouldReattachChangeDetector = function () {
+            return false;
+        };
+        PopupSurveyComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b;
+            if (((_a = changes["model"]) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes["model"]) === null || _b === void 0 ? void 0 : _b.previousValue)) {
+                this.popup = new Survey.PopupSurveyModel(null, this.model);
+            }
+            if (this.isExpanded !== undefined) {
+                this.popup.isExpanded = this.isExpanded;
+            }
+            if (this.closeOnCompleteTimeout !== undefined) {
+                this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
+            }
+            this.popup.isShowing = true;
+            this.changeDetectorRef.detectChanges();
+        };
+        return PopupSurveyComponent;
+    }(BaseAngular));
+    PopupSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", closeOnCompleteTimeout: "closeOnCompleteTimeout" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px;\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\">\n  <div [class]=\"popup.cssHeaderRoot\">\n      <span (click)=\"popup.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"popup.cssHeaderTitle\">{{popup.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"popup.cssButton\"></span>\n      </span>\n      <span *ngIf=\"popup.isExpanded\" (click)=\"popup.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"popup.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"popup.isExpanded\" [class]=\"popup.cssBody\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "popup-survey",
+                        templateUrl: "./popup.survey.component.html",
+                        styleUrls: ["./popup.survey.component.scss"]
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                    type: i0.Input
+                }], isExpanded: [{
+                    type: i0.Input
+                }], closeOnCompleteTimeout: [{
+                    type: i0.Input
+                }] } });
+
+    var ErrorsComponent = /** @class */ (function () {
+        function ErrorsComponent(viewContainerRef) {
+            this.viewContainerRef = viewContainerRef;
+        }
+        ErrorsComponent.prototype.ngOnInit = function () {
+            if (this.location == "tooltip") {
+                this.tooltipManager = new Survey.TooltipManager(this.viewContainerRef.element.nativeElement);
+            }
+        };
+        ErrorsComponent.prototype.ngOnDestroy = function () {
+            if (!!this.tooltipManager) {
+                this.tooltipManager.dispose();
+            }
+        };
+        Object.defineProperty(ErrorsComponent.prototype, "role", {
+            get: function () {
+                return "alert";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ErrorsComponent.prototype, "id", {
+            get: function () {
+                return this.element.id + "_errors";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ErrorsComponent.prototype, "ariaLive", {
+            get: function () {
+                return "polite";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ErrorsComponent.prototype, "class", {
+            get: function () {
+                return this.element.cssError;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ErrorsComponent;
+    }());
+    ErrorsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ErrorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "attr.role": "this.role", "id": "this.id", "attr.aria-live": "this.ariaLive", "class": "this.class" } }, viewQueries: [{ propertyName: "errorsContainerRef", first: true, predicate: ["errorsContainer"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div *ngFor=\"let error of element.errors;\">\n  <span\n    [class]=\"element.cssClasses ? element.cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"element.cssClasses ? element.cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: "./errors.component.html",
+                        selector: "'[sv-ng-errors]'"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { element: [{
+                    type: i0.Input
+                }], location: [{
+                    type: i0.Input
+                }], errorsContainerRef: [{
+                    type: i0.ViewChild,
+                    args: ["errorsContainer", { static: true }]
+                }], role: [{
+                    type: i0.HostBinding,
+                    args: ["attr.role"]
+                }], id: [{
+                    type: i0.HostBinding,
+                    args: ["id"]
+                }], ariaLive: [{
+                    type: i0.HostBinding,
+                    args: ["attr.aria-live"]
+                }], class: [{
+                    type: i0.HostBinding,
+                    args: ["class"]
+                }] } });
+
+    var ElementHeaderComponent = /** @class */ (function () {
+        function ElementHeaderComponent() {
+        }
+        Object.defineProperty(ElementHeaderComponent.prototype, "rootClass", {
+            get: function () {
+                return this.element.cssHeader;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ElementHeaderComponent.prototype.click = function () {
+            if (this.element.clickTitleFunction !== undefined) {
+                this.element.clickTitleFunction();
+            }
+        };
+        return ElementHeaderComponent;
+    }());
+    ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "'[sv-ng-element-header]'",
+                        templateUrl: "./element-header.component.html"
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { element: [{
+                    type: i0.Input
+                }], rootClass: [{
+                    type: i0.HostBinding,
+                    args: ["class"]
+                }], click: [{
+                    type: i0.HostListener,
+                    args: ["click"]
+                }] } });
+
+    var SurveyCommentComponent = /** @class */ (function () {
+        function SurveyCommentComponent() {
+        }
+        Object.defineProperty(SurveyCommentComponent.prototype, "comment", {
+            get: function () {
+                if (!this.question.comment)
+                    return "";
+                return this.question.comment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SurveyCommentComponent;
+    }());
+    SurveyCommentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCommentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyCommentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0__namespace, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"question.commentId\" [attr.max-length]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"question.commentPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCommentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-comment, '[sv-ng-comment]'",
+                        templateUrl: "./comment.component.html",
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                    type: i0.Input
+                }] } });
+
+    var QuestionComponent = /** @class */ (function (_super) {
+        __extends(QuestionComponent, _super);
+        function QuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QuestionComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        QuestionComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            if (!!((_a = this.rootEl) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                this.model.afterRender((_b = this.rootEl) === null || _b === void 0 ? void 0 : _b.nativeElement);
+            }
+        };
+        QuestionComponent.prototype.getComponentName = function () {
+            if (this.model.customWidget)
+                return "survey-customwidget";
+            if (this.model.isDefaultRendering()) {
+                return this.model.getTemplate() + "-question";
+            }
+            return this.model.getComponentName();
+        };
+        QuestionComponent.prototype.getQuestionContentWrapperComponentName = function () {
+            return this.model.survey.getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
+        };
+        QuestionComponent.prototype.getQuestionContentWrapperComponentData = function () {
+            return {
+                componentName: this.getComponentName(),
+                componentData: {
+                    model: this.model,
+                    data: this.model.survey.getElementWrapperComponentData(this.model)
+                }
+            };
+        };
+        return QuestionComponent;
+    }(EmbeddedViewContentComponent));
+    QuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n        <div [model]=\"model.locCommentText\" sv-ng-string></div>\n        <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n      <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-question",
+                        templateUrl: "./question.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], rootEl: [{
+                    type: i0.ViewChild,
+                    args: ["elementContainer"]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("question", QuestionComponent);
+
+    var StringViewerComponent = /** @class */ (function () {
+        function StringViewerComponent(changeDetectorRef) {
+            this.changeDetectorRef = changeDetectorRef;
+        }
+        StringViewerComponent.prototype.ngDoCheck = function () {
+            var _this = this;
+            if (this.model !== this.previousModel) {
+                if (!!this.previousModel) {
+                    this.clearOnChanged(this.previousModel);
+                }
+                if (!!this.model) {
+                    this.model.onChanged = function () { _this.changeDetectorRef.detectChanges(); };
+                }
+                this.previousModel = this.model;
+            }
+        };
+        StringViewerComponent.prototype.clearOnChanged = function (model) {
+            model.onChanged = function () { };
+        };
+        StringViewerComponent.prototype.ngOnDestroy = function () {
+            !!this.model && this.clearOnChanged(this.model);
+        };
+        return StringViewerComponent;
+    }());
+    StringViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringViewerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    StringViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringViewerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'",
+                        templateUrl: "./string-viewer.component.html",
+                        styleUrls: ["./string-viewer.component.scss"]
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent(Survey.LocalizableString.defaultRenderer, StringViewerComponent);
+
+    var PopupPointerComponent = /** @class */ (function (_super) {
+        __extends(PopupPointerComponent, _super);
+        function PopupPointerComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(PopupPointerComponent.prototype, "popupModel", {
+            get: function () {
+                return this.model;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PopupPointerComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return PopupPointerComponent;
+    }(BaseAngular));
+    PopupPointerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupPointerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupPointerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupPointerComponent, selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<span class=\"sv-popup__pointer\" [style]=\"{ left: popupModel.pointerTarget.left, top: popupModel.pointerTarget.top }\"></span>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupPointerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'",
+                        templateUrl: "./popup-pointer.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("popup-pointer", PopupPointerComponent);
+
+    var PopupComponent = /** @class */ (function (_super) {
+        __extends(PopupComponent, _super);
+        function PopupComponent(viewContainerRef, changeDetectorRef, popupService) {
+            var _this = _super.call(this, changeDetectorRef, viewContainerRef) || this;
+            _this.popupService = popupService;
+            return _this;
+        }
+        PopupComponent.prototype.getModel = function () {
+            return this.popupModel;
+        };
+        PopupComponent.prototype.onModelChanged = function () {
+            var _a;
+            this.destroyModel();
+            this.model = Survey.createPopupViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.parentElement);
+            this.model.initializePopupContainer();
+            this.portalHost = this.popupService.createComponent(this.model);
+        };
+        PopupComponent.prototype.ngOnInit = function () {
+            this.onModelChanged();
+        };
+        PopupComponent.prototype.destroyModel = function () {
+            var _a, _b;
+            (_a = this.portalHost) === null || _a === void 0 ? void 0 : _a.detach();
+            (_b = this.model) === null || _b === void 0 ? void 0 : _b.unmountPopupContainer();
+        };
+        PopupComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this.destroyModel();
+        };
+        return PopupComponent;
+    }(BaseAngular));
+    PopupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupComponent, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: PopupService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: { popupModel: "popupModel" }, usesInheritance: true, ngImport: i0__namespace, template: "<div></div>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-popup, '[sv-ng-popup]'",
+                        template: "<div></div>"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ChangeDetectorRef }, { type: PopupService }]; }, propDecorators: { popupModel: [{
+                    type: i0.Input
+                }] } });
+
+    var QuestionSkeletonComponent = /** @class */ (function () {
+        function QuestionSkeletonComponent() {
+        }
+        return QuestionSkeletonComponent;
+    }());
+    QuestionSkeletonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionSkeletonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    QuestionSkeletonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionSkeletonComponent, selector: "question-skeleton", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div class=\"sv-skeleton--not-implemented\">\n  <div>{{ model.getType() + \" question type renderer is not implemented yet.\" }}</div>\n  <div>{{ model.value }}</div>\n</div>\n", styles: [".sv-skeleton--not-implemented{width:100%;min-width:300px;min-height:40px;border:1px solid red;text-align:center}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionSkeletonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "question-skeleton",
+                        templateUrl: "./skeleton.component.html",
+                        styleUrls: ["./skeleton.component.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("skeleton-question", QuestionSkeletonComponent);
+
+    var DropdownComponent = /** @class */ (function (_super) {
+        __extends(DropdownComponent, _super);
+        function DropdownComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(DropdownComponent.prototype, "dropdownModel", {
+            get: function () {
+                var _a;
+                return (_a = this.model) === null || _a === void 0 ? void 0 : _a.dropdownListModel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DropdownComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        DropdownComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (!this.model.dropdownListModel) {
+                this.model.dropdownListModel = new Survey.DropdownListModel(this.model);
+            }
+        };
+        DropdownComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            _super.prototype.ngOnDestroy.call(this);
+            (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+        DropdownComponent.prototype.click = function (event) {
+            var _a;
+            (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
+        };
+        DropdownComponent.prototype.clear = function (event) {
+            var _a;
+            (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
+        };
+        DropdownComponent.prototype.keyhandler = function (event) {
+            var _a;
+            (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.keyHandler(event);
+        };
+        DropdownComponent.prototype.blur = function (event) {
+            var _a;
+            (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
+            this.updateInputDomElement();
+        };
+        DropdownComponent.prototype.inputChange = function (event) {
+            this.detectChanges();
+        };
+        DropdownComponent.prototype.updateInputDomElement = function () {
+            var _a;
+            if (!!((_a = this.inputElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                var control = this.inputElementRef.nativeElement;
+                var newValue = this.model.filterString;
+                if (!Survey.Helpers.isTwoValueEquals(newValue, control.value)) {
+                    control.value = this.model.filterString || "";
+                }
+            }
+        };
+        return DropdownComponent;
+    }(BaseAngular));
+    DropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-label]=\"model.placeholder\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-dropdown, '[sv-ng-dropdown]'",
+                        templateUrl: "./dropdown.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], inputElementRef: [{
+                    type: i0.ViewChild,
+                    args: ["inputElement"]
+                }] } });
+
+    var TagboxFilterComponent = /** @class */ (function (_super) {
+        __extends(TagboxFilterComponent, _super);
+        function TagboxFilterComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TagboxFilterComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return TagboxFilterComponent;
+    }(BaseAngular));
+    TagboxFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <input\n    type=\"text\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"model.filterString\"\n    [attr.id]=\"question.getInputId()\"\n    [class]=\"question.cssClasses.filterStringInput\"\n    [attr.inputmode]=\"model.inputMode\"\n    [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n    [attr.readonly]=\"!model.searchEnabled ? true : null\"\n    [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n    [attr.size]=\"!model.filterString ? 1 : null\"\n    [attr.aria-label]=\"question.placeholder\"\n    [attr.placeholder]=\"model.filterStringPlaceholder\"\n    (keydown)=\"model.inputKeyHandler($event)\"\n    (blur)=\"model.onBlur($event)\"\n  />\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-tagbox-filter",
+                        templateUrl: "./tagbox-filter.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], question: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-tagbox-filter", TagboxFilterComponent);
+
+    var TagboxItemComponent = /** @class */ (function (_super) {
+        __extends(TagboxItemComponent, _super);
+        function TagboxItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TagboxItemComponent.prototype.removeItem = function (event) {
+            this.question.dropdownListModel.deselectItem(this.item.value);
+            event.stopPropagation();
+        };
+        TagboxItemComponent.prototype.getModel = function () {
+            return this.item;
+        };
+        return TagboxItemComponent;
+    }(BaseAngular));
+    TagboxItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TagboxItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: { item: "item", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"sv-tagbox__item\">\n  <div class=\"sv-tagbox__item-text\" [model]=\"item.locText\" sv-ng-string></div>  \n  <div [class]=\"question.cssClasses.cleanItemButton\" (click)=\"removeItem($event)\">\n    <svg [iconName]=\"question.cssClasses.cleanItemButtonIconId\" [partCss]=\"question.cssClasses.cleanItemButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'",
+                        templateUrl: "./tagbox-item.component.html",
+                    }]
+            }], propDecorators: { item: [{
+                    type: i0.Input
+                }], question: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-tagbox-item", TagboxItemComponent);
+
+    var TagboxComponent = /** @class */ (function () {
+        function TagboxComponent() {
+        }
+        Object.defineProperty(TagboxComponent.prototype, "dropdownModel", {
+            get: function () {
+                return this.dropdownListModel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TagboxComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        TagboxComponent.prototype.ngOnInit = function () {
+            this.dropdownListModel = this.model.dropdownListModel || new Survey.DropdownMultiSelectListModel(this.model);
+        };
+        TagboxComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+        TagboxComponent.prototype.click = function (event) {
+            var _a;
+            (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
+        };
+        TagboxComponent.prototype.clear = function (event) {
+            var _a;
+            (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
+        };
+        TagboxComponent.prototype.keyhandler = function (event) {
+            var _a;
+            (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.keyHandler(event);
+        };
+        TagboxComponent.prototype.blur = function (event) {
+            var _a;
+            (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
+        };
+        return TagboxComponent;
+    }());
+    TagboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-tagbox, '[sv-ng-tagbox]'",
+                        templateUrl: "./tagbox.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+
+    var DropdownOptionItemComponent = /** @class */ (function (_super) {
+        __extends(DropdownOptionItemComponent, _super);
+        function DropdownOptionItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DropdownOptionItemComponent.prototype.getModel = function () {
+            return this.item;
+        };
+        return DropdownOptionItemComponent;
+    }(BaseAngular));
+    DropdownOptionItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownOptionItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropdownOptionItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownOptionItemComponent, selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'", inputs: { item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>', isInline: true, directives: [{ type: i3__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownOptionItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'",
+                        template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>',
+                    }]
+            }], propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-dropdown-option-item", DropdownOptionItemComponent);
+
+    var SurveyCommentOtherComponent = /** @class */ (function () {
+        function SurveyCommentOtherComponent() {
+        }
+        Object.defineProperty(SurveyCommentOtherComponent.prototype, "otherValue", {
+            get: function () {
+                var val = this.question.otherValue;
+                return !!val ? val : "";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SurveyCommentOtherComponent.prototype.onOtherValueChange = function (event) {
+            this.question.onOtherValueChange(event);
+        };
+        SurveyCommentOtherComponent.prototype.onOtherValueInput = function (event) {
+            this.question.onOtherValueInput(event);
+        };
+        Object.defineProperty(SurveyCommentOtherComponent.prototype, "otherId", {
+            get: function () {
+                return this.question.otherId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SurveyCommentOtherComponent.prototype, "otherPlaceholder", {
+            get: function () {
+                return this.question.otherPlaceholder;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SurveyCommentOtherComponent;
+    }());
+    SurveyCommentOtherComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCommentOtherComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyCommentOtherComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: { question: "question" }, ngImport: i0__namespace, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"otherId\" [attr.max-length]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"otherPlaceholder\" \n  [value]=\"otherValue\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"onOtherValueChange($event)\"\n  (input)=\"onOtherValueInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ otherValue }}</div>\n", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCommentOtherComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-comment-other, '[sv-ng-comment-other]'",
+                        templateUrl: "./comment-other.component.html",
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                    type: i0.Input
+                }] } });
+
+    var DropdownSelectComponent = /** @class */ (function () {
+        function DropdownSelectComponent() {
+        }
+        Object.defineProperty(DropdownSelectComponent.prototype, "editableValue", {
+            get: function () {
+                return this.model.renderedValue || "";
+            },
+            set: function (newValue) {
+                if (newValue === "") {
+                    this.model.renderedValue = undefined;
+                }
+                else {
+                    this.model.renderedValue = newValue;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DropdownSelectComponent.prototype.click = function (event) {
+            this.model.onClick(event);
+        };
+        DropdownSelectComponent.prototype.keyup = function (event) {
+            this.model.onKeyUp(event);
+        };
+        return DropdownSelectComponent;
+    }());
+    DropdownSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropdownSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n  </div>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-dropdown-select-question",
+                        templateUrl: "./dropdown-select.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("dropdown-select-question", DropdownSelectComponent);
+    Survey.RendererFactory.Instance.registerRenderer("dropdown", "select", "dropdown-select-question");
+
+    //temp: disables angular sanitizer, which breaks a links
+    var SafeUrlPipe = /** @class */ (function () {
+        function SafeUrlPipe(domSanitizer) {
+            this.domSanitizer = domSanitizer;
+        }
+        SafeUrlPipe.prototype.transform = function (url) {
+            return this.domSanitizer.bypassSecurityTrustUrl(url);
+        };
+        return SafeUrlPipe;
+    }());
+    SafeUrlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeUrlPipe, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeUrlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeUrlPipe, name: "safeUrl" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeUrlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "safeUrl" }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
+    var SafeResourceUrlPipe = /** @class */ (function () {
+        function SafeResourceUrlPipe(domSanitizer) {
+            this.domSanitizer = domSanitizer;
+        }
+        SafeResourceUrlPipe.prototype.transform = function (url) {
+            return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
+        };
+        return SafeResourceUrlPipe;
+    }());
+    SafeResourceUrlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeResourceUrlPipe, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeResourceUrlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeResourceUrlPipe, name: "safeResourceUrl" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeResourceUrlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "safeResourceUrl" }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
+
+    var LogoImageComponent = /** @class */ (function (_super) {
+        __extends(LogoImageComponent, _super);
+        function LogoImageComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(LogoImageComponent.prototype, "survey", {
+            get: function () {
+                return this.data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return LogoImageComponent;
+    }(EmbeddedViewContentComponent));
+    LogoImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogoImageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    LogoImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogoImageComponent, selector: "sv-logo-image", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <img\n  [class]=\"survey.css.logoImage\"\n  [attr.src]=\"survey.locLogo.renderedHtml | safeUrl\"\n  [attr.width]=\"survey.logoWidth ? survey.logoWidth : undefined\"\n  [attr.height]=\"survey.logoHeight ? survey.logoHeight : undefined\"\n  [attr.alt]=\"survey.locTitle.renderedHtml\"\n  [style.objectFit]=\"survey.logoFit\"\n  />\n</ng-template>", styles: [":host{display:none}\n"], pipes: { "safeUrl": SafeUrlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogoImageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-logo-image",
+                        templateUrl: "./logo-image.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-logo-image", LogoImageComponent);
+
+    var QuestionAngular = /** @class */ (function (_super) {
+        __extends(QuestionAngular, _super);
+        function QuestionAngular() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QuestionAngular.prototype.getModel = function () {
+            return this.model;
+        };
+        QuestionAngular.prototype.ngAfterViewInit = function () {
+            var _a;
+            if (!!this.model) {
+                this.model.afterRenderQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
+            }
+        };
+        QuestionAngular.prototype.ngOnDestroy = function () {
+            var _a;
+            if (!!this.model) {
+                this.model.beforeDestroyQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
+            }
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return QuestionAngular;
+    }(BaseAngular));
+    QuestionAngular.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    QuestionAngular.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionAngular, selector: "ng-component", inputs: { model: "model" }, viewQueries: [{ propertyName: "elementContentRef", first: true, predicate: ["contentElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: ""
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], elementContentRef: [{
+                    type: i0.ViewChild,
+                    args: ["contentElement"]
+                }] } });
+
+    var CharacterCounterComponent = /** @class */ (function (_super) {
+        __extends(CharacterCounterComponent, _super);
+        function CharacterCounterComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        CharacterCounterComponent.prototype.getModel = function () {
+            return this.counter;
+        };
+        return CharacterCounterComponent;
+    }(BaseAngular));
+    CharacterCounterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CharacterCounterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    CharacterCounterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: { counter: "counter", remainingCharacterCounter: "remainingCharacterCounter" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"remainingCharacterCounter\">{{ counter.remainingCharacterCounter }}</div>\n</ng-template>", styles: [":host { display: none; }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CharacterCounterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-character-counter",
+                        templateUrl: "./character-counter.component.html",
+                        styles: [":host { display: none; }"],
+                    }]
+            }], propDecorators: { counter: [{
+                    type: i0.Input
+                }], remainingCharacterCounter: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("character-counter", CharacterCounterComponent);
+
+    var TextQuestionComponent = /** @class */ (function (_super) {
+        __extends(TextQuestionComponent, _super);
+        function TextQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TextQuestionComponent;
+    }(QuestionAngular));
+    TextQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0__namespace, template: "  <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n    <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n  <ng-template #input>\n    <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n    (change)=\"model.onChange($event)\" [attr.value]=\"model.value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n    (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n    [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autocomplete\"\n    [attr.ar] #contentElement/>\n    <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n    [counter]=\"model.characterCounter\"\n    [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n  </sv-ng-character-counter>\n  </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-text-question",
+                        templateUrl: "./text.component.html",
+                        styleUrls: ["./text.component.scss"]
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("text-question", TextQuestionComponent);
+
+    var SafeHtmlPipe = /** @class */ (function () {
+        function SafeHtmlPipe(domSanitizer) {
+            this.domSanitizer = domSanitizer;
+        }
+        SafeHtmlPipe.prototype.transform = function (url) {
+            return this.domSanitizer.bypassSecurityTrustHtml(url);
+        };
+        return SafeHtmlPipe;
+    }());
+    SafeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, name: "safeHtml" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "safeHtml" }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
+
+    var HtmlQuestionComponent = /** @class */ (function (_super) {
+        __extends(HtmlQuestionComponent, _super);
+        function HtmlQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        HtmlQuestionComponent.prototype.onModelChanged = function () {
+            var _this = this;
+            _super.prototype.onModelChanged.call(this);
+            this.model.locHtml.onChanged = function () {
+                _this.detectChanges();
+            };
+        };
+        HtmlQuestionComponent.prototype.ngOnDestroy = function () {
+            this.model.locHtml.onChanged = function () { };
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return HtmlQuestionComponent;
+    }(QuestionAngular));
+    HtmlQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HtmlQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    HtmlQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HtmlQuestionComponent, selector: "sv-ng-html-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\" [innerHTML]=\"model.locHtml.renderedHtml | safeHtml\" #contentElement></div>", pipes: { "safeHtml": SafeHtmlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HtmlQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-html-question",
+                        templateUrl: "./html.component.html",
+                        styleUrls: []
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("html-question", HtmlQuestionComponent);
+
+    var SelectBaseComponent = /** @class */ (function (_super) {
+        __extends(SelectBaseComponent, _super);
+        function SelectBaseComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.inputType = "checkbox";
+            _this.showLegend = true;
+            return _this;
+        }
+        SelectBaseComponent.prototype.getDefaultComponentName = function () {
+            return "sv-ng-selectbase-item";
+        };
+        SelectBaseComponent.prototype.trackItemBy = function (_, item) {
+            return item.value;
+        };
+        SelectBaseComponent.prototype.trackColumnBy = function (index) {
+            return index;
+        };
+        SelectBaseComponent.prototype.getItemValueComponentName = function (item) {
+            return this.model.getItemValueWrapperComponentName(item) || this.getDefaultComponentName();
+        };
+        SelectBaseComponent.prototype.getItemValueComponentData = function (item) {
+            var itemComponentProperty = this.model.getPropertyByName("itemComponent");
+            var isDefaultItemComponent = itemComponentProperty.isDefaultValue(this.model.itemComponent);
+            var itemComponentName = isDefaultItemComponent ? this.getDefaultComponentName() : this.model.itemComponent;
+            return {
+                componentName: itemComponentName,
+                componentData: {
+                    question: this.model,
+                    model: item,
+                    inputType: this.inputType,
+                    data: this.model.getItemValueWrapperComponentData(item)
+                }
+            };
+        };
+        return SelectBaseComponent;
+    }(QuestionAngular));
+    SelectBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "['sv-ng-selectbase']",
+                        templateUrl: "./selectbase.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("selectbase", SelectBaseComponent);
+
+    var RadiogroupComponent = /** @class */ (function (_super) {
+        __extends(RadiogroupComponent, _super);
+        function RadiogroupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        RadiogroupComponent.prototype.ngOnInit = function () {
+            this.inputType = "radio";
+            this.showLegend = false;
+            _super.prototype.ngOnInit.call(this);
+        };
+        return RadiogroupComponent;
+    }(SelectBaseComponent));
+    RadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-radiogroup-question",
+                        templateUrl: "./selectbase.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("radiogroup-question", RadiogroupComponent);
+
+    var RadiogroupItemComponent = /** @class */ (function () {
+        function RadiogroupItemComponent() {
+        }
+        return RadiogroupItemComponent;
+    }());
+    RadiogroupItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadiogroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model" }, ngImport: i0__namespace, template: "<input type=\"radio\" [name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i3__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'",
+                        templateUrl: "./radiogroup-item.component.html",
+                        styleUrls: ["./radiogroup-item.component.scss"]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }] } });
+
+    var CheckboxComponent = /** @class */ (function (_super) {
+        __extends(CheckboxComponent, _super);
+        function CheckboxComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return CheckboxComponent;
+    }(SelectBaseComponent));
+    CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-checkbox-question",
+                        templateUrl: "./selectbase.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("checkbox-question", CheckboxComponent);
+
+    var CheckboxItemComponent = /** @class */ (function () {
+        function CheckboxItemComponent() {
+        }
+        CheckboxItemComponent.prototype.onChange = function (event) {
+            this.question.clickItemHandler(this.model, event.target.checked);
+        };
+        CheckboxItemComponent.prototype.onSelectAllChange = function (event) {
+            this.question.toggleSelectAll();
+        };
+        return CheckboxItemComponent;
+    }());
+    CheckboxItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0__namespace, template: "<input *ngIf=\"model == question.selectAllItem\" role=\"option\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" role=\"option\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'",
+                        templateUrl: "./checkbox-item.component.html",
+                        styleUrls: ["./checkbox-item.component.scss"]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }] } });
+
+    var DropdownQuestionComponent = /** @class */ (function (_super) {
+        __extends(DropdownQuestionComponent, _super);
+        function DropdownQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return DropdownQuestionComponent;
+    }(QuestionAngular));
+    DropdownQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropdownQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownQuestionComponent, selector: "sv-ng-dropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-dropdown [model]=\"model\"></sv-ng-dropdown>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: ["model"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-dropdown-question",
+                        templateUrl: "./dropdown.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("dropdown-question", DropdownQuestionComponent);
+
+    var TagboxQuestionComponent = /** @class */ (function (_super) {
+        __extends(TagboxQuestionComponent, _super);
+        function TagboxQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TagboxQuestionComponent;
+    }(QuestionAngular));
+    TagboxQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TagboxQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxQuestionComponent, selector: "sv-ng-tagbox-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-tagbox [model]=\"model\"></sv-ng-tagbox>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: ["model"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-tagbox-question",
+                        templateUrl: "./tagbox.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("tagbox-question", TagboxQuestionComponent);
+
+    var RatingQuestionComponent = /** @class */ (function (_super) {
+        __extends(RatingQuestionComponent, _super);
+        function RatingQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        RatingQuestionComponent.prototype.trackByFn = function (index) {
+            return index;
+        };
+        RatingQuestionComponent.prototype.onClick = function (event) {
+            event.stopPropagation();
+            this.model.setValueFromClick(event.target.value);
+        };
+        return RatingQuestionComponent;
+    }(QuestionAngular));
+    RatingQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RatingQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingQuestionComponent, selector: "sv-ng-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <ng-template *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [component]=\"{ name: 'sv-rating-item', data: {model: model, item: item, index: index }}\"></ng-template>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-rating-question",
+                        templateUrl: "./rating.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("rating-question", RatingQuestionComponent);
+
+    var BooleanQuestionComponent = /** @class */ (function (_super) {
+        __extends(BooleanQuestionComponent, _super);
+        function BooleanQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        BooleanQuestionComponent.prototype.onChange = function (event) {
+            this.model.booleanValue = event.target.value;
+        };
+        return BooleanQuestionComponent;
+    }(QuestionAngular));
+    BooleanQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    BooleanQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i3__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-boolean-question",
+                        templateUrl: "./boolean.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("boolean-question", BooleanQuestionComponent);
+
+    var ImagePickerItemComponent = /** @class */ (function (_super) {
+        __extends(ImagePickerItemComponent, _super);
+        function ImagePickerItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ImagePickerItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        ImagePickerItemComponent.prototype.onChange = function (event) {
+            if (this.question.multiSelect) {
+                if (event.target.checked) {
+                    this.question.value = this.question.value.concat(event.target.value);
+                }
+                else {
+                    var currValue = this.question.value;
+                    currValue.splice(this.question.value.indexOf(event.target.value), 1);
+                    this.question.value = currValue;
+                }
+            }
+            else {
+                this.question.value = event.target.value;
+            }
+        };
+        ImagePickerItemComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.model.locImageLink.onChanged = function () {
+                _this.detectChanges();
+            };
+        };
+        ImagePickerItemComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this.model.locImageLink.onChanged = function () { };
+        };
+        return ImagePickerItemComponent;
+    }(BaseAngular));
+    ImagePickerItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImagePickerItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth\" [style.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\">\n                <svg [class]=\"question.cssClasses.itemNoImageSvgIcon\" *ngIf=\"question.cssClasses.itemNoImageSvgIcon\">\n                  <use [attr.xlink:href]=\"question.cssClasses.itemNoImageSvgIconId\"></use>\n                </svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-imagepicker-item",
+                        templateUrl: "./imagepicker-item.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-ng-imagepicker-item", ImagePickerItemComponent);
+
+    var ImagePickerQuestionComponent = /** @class */ (function (_super) {
+        __extends(ImagePickerQuestionComponent, _super);
+        function ImagePickerQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ImagePickerQuestionComponent.prototype.getItemValueComponentName = function (item) {
+            return this.model.getItemValueWrapperComponentName(item) || "sv-ng-imagepicker-item";
+        };
+        ImagePickerQuestionComponent.prototype.getItemValueComponentData = function (item) {
+            return {
+                componentName: "sv-ng-imagepicker-item",
+                componentData: {
+                    question: this.model,
+                    model: item,
+                    data: this.model.getItemValueWrapperComponentData(item)
+                }
+            };
+        };
+        return ImagePickerQuestionComponent;
+    }(QuestionAngular));
+    ImagePickerQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImagePickerQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerQuestionComponent, selector: "sv-ng-imagepicker-question", usesInheritance: true, ngImport: i0__namespace, template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\" role=\"radio\"></legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-imagepicker-question",
+                        templateUrl: "./imagepicker.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("imagepicker-question", ImagePickerQuestionComponent);
+
+    var ButtonGroupItemComponent = /** @class */ (function (_super) {
+        __extends(ButtonGroupItemComponent, _super);
+        function ButtonGroupItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ButtonGroupItemComponent.prototype.ngOnChanges = function () {
+            this.model = new Survey.ButtonGroupItemModel(this.question, this.item, this.index);
+        };
+        ButtonGroupItemComponent.prototype.getModel = function () {
+            return this.item;
+        };
+        return ButtonGroupItemComponent;
+    }(BaseAngular));
+    ButtonGroupItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ButtonGroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-describedby]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i3__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-button-group-item",
+                        templateUrl: "./button-group-item.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { item: [{
+                    type: i0.Input
+                }], question: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }] } });
+
+    var ButtonGroupQuestionComponent = /** @class */ (function (_super) {
+        __extends(ButtonGroupQuestionComponent, _super);
+        function ButtonGroupQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ButtonGroupQuestionComponent;
+    }(QuestionAngular));
+    ButtonGroupQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ButtonGroupQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupQuestionComponent, selector: "sv-ng-buttongroup-question", usesInheritance: true, ngImport: i0__namespace, template: "<div role=\"group\" [class]=\"model.cssClasses.root\">\n  <sv-button-group-item *ngFor=\"let item of model.visibleChoices; index as index\" [question]=\"model\" [item]=\"item\" [index]=\"index\" ></sv-button-group-item>\n</div>\n", components: [{ type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: ["item", "question", "index"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-buttongroup-question",
+                        templateUrl: "./button-group.component.html"
+                    }]
+            }] });
+
+    var Key2ClickDirective = /** @class */ (function () {
+        function Key2ClickDirective(el) {
+            var _this = this;
+            this.el = el;
+            this.isSubscribed = false;
+            this.options = Key2ClickDirective.defaultOptions;
+            this.onkeyup = function (evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                Survey.doKey2ClickUp(evt, _this.options);
+                return false;
+            };
+            this.subscribeEventListeners();
+        }
+        Key2ClickDirective.prototype.onkeydown = function (evt) {
+            Survey.doKey2ClickDown(evt, this.options);
+        };
+        Key2ClickDirective.prototype.blur = function (evt) {
+            Survey.doKey2ClickBlur(evt);
+        };
+        Object.defineProperty(Key2ClickDirective.prototype, "element", {
+            get: function () {
+                return this.el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Key2ClickDirective.prototype.subscribeEventListeners = function () {
+            if (this.isSubscribed)
+                return;
+            this.element.tabIndex = 0;
+            this.element.addEventListener("keyup", this.onkeyup);
+            this.element.addEventListener("keydown", this.onkeydown);
+            this.element.addEventListener("blur", this.blur);
+            this.isSubscribed = true;
+        };
+        Key2ClickDirective.prototype.unsubscribeEventListeners = function () {
+            if (!this.isSubscribed)
+                return;
+            this.element.tabIndex = -1;
+            this.element.removeEventListener("keyup", this.onkeyup);
+            this.element.removeEventListener("keydown", this.onkeydown);
+            this.element.removeEventListener("blur", this.blur);
+            this.isSubscribed = false;
+        };
+        Key2ClickDirective.prototype.ngOnChanges = function (changes) {
+            var curValue = changes["key2click"].currentValue;
+            if (curValue.disableTabStop) {
+                this.unsubscribeEventListeners();
+            }
+            else {
+                this.subscribeEventListeners();
+            }
+            this.options = Object.assign({}, Key2ClickDirective.defaultOptions, curValue);
+        };
+        Key2ClickDirective.prototype.ngOnDestroy = function () {
+            this.unsubscribeEventListeners();
+        };
+        return Key2ClickDirective;
+    }());
+    Key2ClickDirective.defaultOptions = { processEsc: true, disableTabStop: false };
+    Key2ClickDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Key2ClickDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    Key2ClickDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: Key2ClickDirective, selector: "[key2click]", inputs: { key2click: "key2click" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Key2ClickDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[key2click]"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { key2click: [{
+                    type: i0.Input
+                }] } });
+
+    var ActionBarItemComponent = /** @class */ (function (_super) {
+        __extends(ActionBarItemComponent, _super);
+        function ActionBarItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ActionBarItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return ActionBarItemComponent;
+    }(BaseAngular));
+    ActionBarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionBarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.aria-expanded]=\"model.ariaExpanded\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\" \n    data-bind=\"key2click: { processEsc: false }\">\n    <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n  </button>\n<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-action-bar-item",
+                        templateUrl: "./action-bar-item.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-action-bar-item", ActionBarItemComponent);
+
+    var ActionBarItemDropdownComponent = /** @class */ (function (_super) {
+        __extends(ActionBarItemDropdownComponent, _super);
+        function ActionBarItemDropdownComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ActionBarItemDropdownComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        ActionBarItemDropdownComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.viewModel = new Survey.ActionDropdownViewModel(this.model);
+        };
+        ActionBarItemDropdownComponent.prototype.ngOnDestroy = function () {
+            this.viewModel.dispose();
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return ActionBarItemDropdownComponent;
+    }(BaseAngular));
+    ActionBarItemDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarItemDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionBarItemDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemDropdownComponent, selector: "sv-action-bar-item-dropdown", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" [attr.role]=\"model.ariaRole\">\n        <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n        <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </button>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarItemDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-action-bar-item-dropdown",
+                        templateUrl: "./action-bar-item-dropdown.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-action-bar-item-dropdown", ActionBarItemDropdownComponent);
+
+    var SelectBaseItemComponent = /** @class */ (function (_super) {
+        __extends(SelectBaseItemComponent, _super);
+        function SelectBaseItemComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.showLabel = true;
+            return _this;
+        }
+        SelectBaseItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return SelectBaseItemComponent;
+    }(BaseAngular));
+    SelectBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item",
+                        templateUrl: "./selectbase-item.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], inputType: [{
+                    type: i0.Input
+                }], showLabel: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-ng-selectbase-item", SelectBaseItemComponent);
+
+    var SkeletonComponent = /** @class */ (function (_super) {
+        __extends(SkeletonComponent, _super);
+        function SkeletonComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return SkeletonComponent;
+    }(EmbeddedViewContentComponent));
+    SkeletonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SkeletonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkeletonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SkeletonComponent, selector: "sv-skeleton", inputs: { element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"sv-skeleton-element\" [id]=\"element.id\"></div>\n</ng-template>", styles: [":host{display:none}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SkeletonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-skeleton",
+                        templateUrl: "./skeleton.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-skeleton", SkeletonComponent);
+
+    var ListItemComponent = /** @class */ (function (_super) {
+        __extends(ListItemComponent, _super);
+        function ListItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(ListItemComponent.prototype, "ariaSelected", {
+            get: function () {
+                return this.listModel.isItemSelected(this.model) || "";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListItemComponent.prototype, "class", {
+            get: function () {
+                return this.listModel.getItemClass(this.model);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListItemComponent.prototype, "paddingLeft", {
+            get: function () {
+                return this.listModel.getItemIndent(this.model);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListItemComponent.prototype.click = function (event) {
+            this.listModel.onItemClick(this.model);
+            event.stopPropagation();
+        };
+        ListItemComponent.prototype.pointerdown = function (event) {
+            this.listModel.onPointerDown(event, this.model);
+        };
+        ListItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        ListItemComponent.prototype.ngAfterViewInit = function () {
+            this.listModel.onLastItemRended(this.model);
+        };
+        return ListItemComponent;
+    }(BaseAngular));
+    ListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.aria-selected]=\"ariaSelected\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style.paddingInlineStart]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"24\"\n        sv-ng-svg-icon></svg>\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </ng-container>\n    <ng-container *ngIf=\"model.component\">\n      <ng-template [component]=\"{ name: model.component, data: { model: model } }\"></ng-template>\n    </ng-container>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-list-item, '[sv-ng-list-item]'",
+                        templateUrl: "./list-item.component.html",
+                        styleUrls: ["../../hide-host.scss"],
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], listModel: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-list-item", ListItemComponent);
+
+    var ListComponent = /** @class */ (function (_super) {
+        __extends(ListComponent, _super);
+        function ListComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.trackItemBy = function (_, item) {
+                return item.id;
+            };
+            return _this;
+        }
+        ListComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        ListComponent.prototype.onGoToItems = function (event) {
+            this.model.goToItems(event);
+        };
+        ListComponent.prototype.onMouseDown = function (event) {
+            event.preventDefault();
+        };
+        ListComponent.prototype.onKeyDown = function (event) {
+            this.model.onKeyDown(event);
+        };
+        ListComponent.prototype.onMouseMove = function (event) {
+            this.model.onMouseMove(event);
+        };
+        ListComponent.prototype.ngAfterViewInit = function () {
+            var _a;
+            if (!!((_a = this.listContainerElement) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                this.model.initListContainerHtmlElement(this.listContainerElement.nativeElement);
+            }
+        };
+        return ListComponent;
+    }(BaseAngular));
+    ListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "listContainerElement", first: true, predicate: ["listContainerElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\" #listContainerElement>\n        <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n                [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n                [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n                <button *ngIf=\"model.showSearchClearButton && !!model.filterString\" (click)=\"model.onClickSearchClearButton($event)\" [class]=\"model.cssClasses.searchClearButtonIcon\">\n                    <svg [iconName]=\"'icon-searchclear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                </button>\n        </div>\n        <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-list, '[sv-ng-list]'",
+                        templateUrl: "./list.component.html",
+                        styleUrls: ["../../hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], listContainerElement: [{
+                    type: i0.ViewChild,
+                    args: ["listContainerElement"]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-list", ListComponent);
+
+    var RatingItemComponent = /** @class */ (function (_super) {
+        __extends(RatingItemComponent, _super);
+        function RatingItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        RatingItemComponent.prototype.onClick = function (event) {
+            this.model.setValueFromClick(event.target.value);
+            event.stopPropagation();
+        };
+        RatingItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return RatingItemComponent;
+    }(BaseAngular));
+    RatingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RatingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue)\" >\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-rating-item",
+                        templateUrl: "./rating-item.component.html",
+                        styleUrls: ["../../hide-host.scss"],
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], item: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-rating-item", RatingItemComponent);
+
+    var RatingDropdownComponent = /** @class */ (function () {
+        function RatingDropdownComponent() {
+        }
+        return RatingDropdownComponent;
+    }());
+    RatingDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingDropdownComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RatingDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingDropdownComponent, selector: "sv-ng-rating-dropdown-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.rootDropdown\">\n    <sv-ng-dropdown [model]=\"model\"></sv-ng-dropdown>\n</div>", components: [{ type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-rating-dropdown-question",
+                        templateUrl: "./rating-dropdown.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("rating-dropdown-question", RatingDropdownComponent);
+    Survey.RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown-question");
+
+    var BooleanCheckboxComponent = /** @class */ (function () {
+        function BooleanCheckboxComponent() {
+        }
+        return BooleanCheckboxComponent;
+    }());
+    BooleanCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BooleanCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i3__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-boolean-checkbox-question",
+                        templateUrl: "./boolean-checkbox.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("boolean-checkbox-question", BooleanCheckboxComponent);
+    Survey.RendererFactory.Instance.registerRenderer("boolean", "checkbox", "boolean-checkbox-question");
+
+    var BooleanRadioItemComponent = /** @class */ (function () {
+        function BooleanRadioItemComponent() {
+        }
+        return BooleanRadioItemComponent;
+    }());
+    BooleanRadioItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BooleanRadioItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0__namespace, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i3__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-boolean-radio-item",
+                        templateUrl: "boolean-radio-item.component.html",
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], locText: [{
+                    type: i0.Input
+                }] } });
+
+    var BooleanRadioComponent = /** @class */ (function () {
+        function BooleanRadioComponent() {
+        }
+        return BooleanRadioComponent;
+    }());
+    BooleanRadioComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BooleanRadioComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioComponent, selector: "sv-ng-boolean-radio-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.rootRadio\">\n  <fieldset role=\"presentation\" [class]=\"model.cssClasses.radioFieldset\">\n    <sv-ng-boolean-radio-item  [value]=\"false\" [locText]=\"model.locLabelFalse\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n    <sv-ng-boolean-radio-item  [value]=\"true\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n  </fieldset>\n</div>\n", components: [{ type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: ["question", "value", "locText"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-boolean-radio-question",
+                        templateUrl: "./boolean-radio.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("boolean-radio-question", BooleanRadioComponent);
+    Survey.RendererFactory.Instance.registerRenderer("boolean", "radio", "boolean-radio-question");
+
+    var ProgressDefaultComponent = /** @class */ (function (_super) {
+        __extends(ProgressDefaultComponent, _super);
+        function ProgressDefaultComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ProgressDefaultComponent.prototype.getProgressTextInBarCss = function (css) {
+            return Survey.SurveyProgressModel.getProgressTextInBarCss(css);
+        };
+        ProgressDefaultComponent.prototype.getProgressTextUnderBarCss = function (css) {
+            return Survey.SurveyProgressModel.getProgressTextUnderBarCss(css);
+        };
+        return ProgressDefaultComponent;
+    }(EmbeddedViewContentComponent));
+    ProgressDefaultComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressDefaultComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProgressDefaultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressDefaultComponent, selector: "sv-ng-progress-default", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.getProgressCssClasses()\">\n    <div [class]=\"model.css.progressBar\" [style.width]=\"model.progressValue + '%'\"\n        role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <span [class]=\"getProgressTextInBarCss(model.css)\">\n          {{ model.progressText }}\n        </span>\n    </div>\n    <span [class]=\"getProgressTextUnderBarCss(model.css)\"> {{  model.progressText }} </span>\n  </div>\n</ng-template>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressDefaultComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-progress-default",
+                        templateUrl: "./progress.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-progress-progress", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-pages", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-questions", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-correctQuestions", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-requiredQuestions", ProgressDefaultComponent);
+
+    var ProgressButtonsComponent = /** @class */ (function () {
+        function ProgressButtonsComponent(changeDetectorRef) {
+            this.changeDetectorRef = changeDetectorRef;
+            this.hasScroller = false;
+            this.updateScroller = undefined;
+        }
+        ProgressButtonsComponent.prototype.createProgressButtonsModel = function () {
+            this.progressButtonsModel = new Survey.SurveyProgressButtonsModel(this.model);
+        };
+        ProgressButtonsComponent.prototype.ngOnInit = function () {
+            this.createProgressButtonsModel();
+        };
+        ProgressButtonsComponent.prototype.ngOnChanges = function (changes) {
+            this.createProgressButtonsModel();
+        };
+        ProgressButtonsComponent.prototype.isListElementClickable = function (index) {
+            return this.progressButtonsModel.isListElementClickable(index);
+        };
+        ProgressButtonsComponent.prototype.getListElementCss = function (index) {
+            return this.progressButtonsModel.getListElementCss(index);
+        };
+        ProgressButtonsComponent.prototype.clickListElement = function (index) {
+            this.progressButtonsModel.clickListElement(index);
+        };
+        ProgressButtonsComponent.prototype.getScrollButtonCss = function (isLeftScroll) {
+            return this.progressButtonsModel.getScrollButtonCss(this.hasScroller, isLeftScroll);
+        };
+        ProgressButtonsComponent.prototype.clickScrollButton = function (isLeftScroll) {
+            if (this.progressButtonsListContainer) {
+                this.progressButtonsListContainer.nativeElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
+            }
+        };
+        ProgressButtonsComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.progressButtonsModel = new Survey.SurveyProgressButtonsModel(this.model);
+            this.updateScroller = setInterval(function () {
+                var _a;
+                if (!!((_a = _this.progressButtonsListContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                    var listContainerElement = _this.progressButtonsListContainer.nativeElement;
+                    _this.hasScroller = listContainerElement.scrollWidth > listContainerElement.offsetWidth;
+                    _this.changeDetectorRef.detectChanges();
+                }
+            }, 100);
+        };
+        ProgressButtonsComponent.prototype.ngOnDestroy = function () {
+            if (typeof this.updateScroller !== "undefined") {
+                clearInterval(this.updateScroller);
+                this.updateScroller = undefined;
+            }
+        };
+        return ProgressButtonsComponent;
+    }());
+    ProgressButtonsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressButtonsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProgressButtonsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.locNavigationTitle.renderedHtml || page.name\"\n          >\n            {{ page.locNavigationTitle.renderedHtml || page.name }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressButtonsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-progress-buttons",
+                        templateUrl: "./progress.component.html"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                    type: i0.Input
+                }], progressButtonsListContainer: [{
+                    type: i0.ViewChild,
+                    args: ["progressButtonsListContainer"]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-progress-buttons", ProgressButtonsComponent);
+
+    var PanelComponent = /** @class */ (function (_super) {
+        __extends(PanelComponent, _super);
+        function PanelComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.trackRowBy = function (_, row) {
+                return row.id;
+            };
+            return _this;
+        }
+        PanelComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        PanelComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            if (!!((_a = this.panelContainerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                (_b = this.model.survey) === null || _b === void 0 ? void 0 : _b.afterRenderPanel(this.model, this.panelContainerRef.nativeElement);
+            }
+        };
+        return PanelComponent;
+    }(BaseAngular));
+    PanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model && model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <!-- ko template: { name: 'survey-question-errors', data: $data } -->\n    <!-- /ko -->\n    <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-panel, '[sv-ng-panel]'",
+                        templateUrl: "./panel.component.html",
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], panelContainerRef: [{
+                    type: i0.ViewChild,
+                    args: ["panelContainer", { static: false, read: i0.ElementRef }]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
+
+    var SurveyNavigationButton = /** @class */ (function () {
+        function SurveyNavigationButton() {
+        }
+        SurveyNavigationButton.prototype.getModel = function () {
+            return this.model;
+        };
+        SurveyNavigationButton.prototype.buttonMouseDown = function () {
+            return this.model.data && this.model.data.mouseDown();
+        };
+        return SurveyNavigationButton;
+    }());
+    SurveyNavigationButton.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyNavigationButton, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurveyNavigationButton.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyNavigationButton, selector: "sv-ng-nav-btn", inputs: { model: "model" }, ngImport: i0__namespace, template: "<input *ngIf=\"model.visible\" type=\"button\" [value]=\"model.title\" [class]=\"model.innerCss\" (mousedown)=\"buttonMouseDown()\" (click)=\"model.action()\" [disabled]=\"model.disabled\" [attr.title]=\"model.getTooltip()\"/>", styles: [":host { display: contents; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyNavigationButton, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: "./survey-nav-btn.component.html",
+                        selector: "sv-ng-nav-btn",
+                        styles: [":host { display: contents; }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-nav-btn", SurveyNavigationButton);
+
+    var MatrixQuestionComponent = /** @class */ (function (_super) {
+        __extends(MatrixQuestionComponent, _super);
+        function MatrixQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MatrixQuestionComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.model.visibleRowsChangedCallback = function () {
+                _this.detectChanges();
+            };
+            _super.prototype.ngOnInit.call(this);
+        };
+        MatrixQuestionComponent.prototype.onChange = function (row, column) {
+            if (this.model.isInputReadOnly)
+                return;
+            row.value = column.value;
+            this.detectChanges();
+        };
+        MatrixQuestionComponent.prototype.trackRowByFn = function (i, row) {
+            return "column-" + row.name + "-" + i;
+        };
+        MatrixQuestionComponent.prototype.trackColumnByFn = function (i, column) {
+            return "column-" + column.value + "-" + i;
+        };
+        return MatrixQuestionComponent;
+    }(QuestionAngular));
+    MatrixQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td *ngIf=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-question",
+                        templateUrl: "./matrix.component.html",
+                        styleUrls: ["../hide-host.scss"]
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("matrix-question", MatrixQuestionComponent);
+
+    var FileQuestionComponent = /** @class */ (function (_super) {
+        __extends(FileQuestionComponent, _super);
+        function FileQuestionComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.trackFilesFn = function (index) {
+                return _this.model.inputId + "_" + index;
+            };
+            return _this;
+        }
+        return FileQuestionComponent;
+    }(QuestionAngular));
+    FileQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    FileQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    tabindex=\"-1\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div [class]=\"model.cssClasses.dragArea\"\n    (dragenter)=\"model.onDragEnter($event)\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\">  \n    <div\n      [class]=\"model.getFileDecoratorCss()\"\n    >\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <label\n          role=\"button\"\n          tabindex=\"0\"\n          [class]=\"model.getChooseFileCss()\"\n          [attr.for]=\"model.inputId\"\n          [attr.aria-label]=\"model.chooseButtonCaption\"\n          >\n          <span>{{ model.chooseButtonCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </label>\n        <span\n          [class]=\"model.cssClasses.noFileChosen\"\n          *ngIf=\"model.isEmpty()\"\n          >{{ model.noFileChosenCaption }}</span\n        >\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButton\"\n      [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n      <span\n        *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\"\n        [class]=\"model.cssClasses.preview\"\n      >\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img\n            *ngIf=\"model.canPreviewImage(val)\"\n            [attr.src]=\"val.content | safeUrl\"\n            [style.height]=\"model.imageHeight\"\n            [style.width]=\"model.imageWidth\"\n            alt=\"File preview\"\n          />\n          <svg *ngIf=\"model.defaultImage(val)\" \n            [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n            <span\n              [class]=\"model.cssClasses.removeFile\"\n              >{{ model.removeFileCaption }}</span\n            >\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n      </span>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButtonBottom\"\n      [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-file-question",
+                        templateUrl: "./file.component.html",
+                        styleUrls: []
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("file-question", FileQuestionComponent);
+
+    var CommentQuestionComponent = /** @class */ (function (_super) {
+        __extends(CommentQuestionComponent, _super);
+        function CommentQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        CommentQuestionComponent.prototype.onChange = function (event) {
+            this.model.value = event.target.value;
+        };
+        return CommentQuestionComponent;
+    }(QuestionAngular));
+    CommentQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    CommentQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0__namespace, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.ariaRequired\"\n[attr.aria-label]=\"model.ariaLabel\"\n[attr.aria-invalid]=\"model.ariaInvalid\"\n[attr.aria-describedby]=\"model.ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<sv-ng-character-counter *ngIf=\"!model.isReadOnlyRenderDiv() && model.getMaxLength()\" \n[counter]=\"model.characterCounter\"\n[remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n</sv-ng-character-counter>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: "./comment.component.html",
+                        selector: "sv-ng-question-comment"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("comment-question", CommentQuestionComponent);
+
+    var SignaturePadQuestionComponent = /** @class */ (function (_super) {
+        __extends(SignaturePadQuestionComponent, _super);
+        function SignaturePadQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return SignaturePadQuestionComponent;
+    }(QuestionAngular));
+    SignaturePadQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturePadQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SignaturePadQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\">\n  {{ model.placeHolderText }}\n</div>\n<div>\n  <canvas tabindex=\"0\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturePadQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-signature-component",
+                        templateUrl: "./signature.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("signaturepad-question", SignaturePadQuestionComponent);
+
+    var MultipleTextItemComponent = /** @class */ (function (_super) {
+        __extends(MultipleTextItemComponent, _super);
+        function MultipleTextItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MultipleTextItemComponent.prototype.getModel = function () {
+            return this.model.editor;
+        };
+        return MultipleTextItemComponent;
+    }(BaseAngular));
+    MultipleTextItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultipleTextItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultipleTextItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<label [class]=\"question.getItemLabelCss(model)\">\n  <span [class]=\"question.getItemTitleCss()\">\n    <span *ngIf=\" model.editor.isRequireTextBeforeTitle || model.editor.isRequireTextOnStart\"\n      [class]=\"question.cssClasses.requiredText\">{{ model.editor.requiredText }}</span>\n    <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    <span\n      *ngIf=\"model.editor.isRequireTextAfterTitle\"\n      [class]=\"question.cssClasses.requiredText\"\n      >{{ model.editor.requiredText }}</span\n    >\n  </span>\n  <div [class]=\"question.getItemCss()\">\n    <div *ngIf=\"model.editor.showErrorOnTop && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n    <sv-ng-text-question [model]=\"model.editor\"></sv-ng-text-question>\n    <div *ngIf=\"model.editor.showErrorOnBottom && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n  </div>\n  <div *ngIf=\"model.editor.isErrorsModeTooltip && model.editor.hasVisibleErrors\" [element]=\"model.editor\" [location]=\"'tooltip'\" sv-ng-errors></div>\n</label>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: TextQuestionComponent, selector: "sv-ng-text-question" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultipleTextItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "'[sv-ng-multipletext-item]'",
+                        templateUrl: "./mutlipletextitem.component.html"
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }] } });
+
+    var MultipleTextComponent = /** @class */ (function (_super) {
+        __extends(MultipleTextComponent, _super);
+        function MultipleTextComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.trackRowBy = function (index) {
+                return _this.model.inputId + "rowkey" + index;
+            };
+            return _this;
+        }
+        MultipleTextComponent.prototype.trackItemBy = function (_, item) {
+            return "item" + item.editor.id;
+        };
+        return MultipleTextComponent;
+    }(QuestionAngular));
+    MultipleTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultipleTextComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultipleTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultipleTextComponent, selector: "sv-ng-multipletext-question", usesInheritance: true, ngImport: i0__namespace, template: "<table [class]=\"model.cssClasses.root\" #contentElement>\n  <tbody>\n    <tr\n      *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\"\n      [class]=\"model.cssClasses.row\"\n    >\n      <ng-container *ngFor=\"let item of row; trackBy: trackItemBy\" >\n        <td [class]=\"model.cssClasses.cell\" [question]=\"model\" [model]=\"item\" sv-ng-multipletext-item></td>\n      </ng-container>\n    </tr>\n  </tbody>\n</table>\n", components: [{ type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: ["question", "model"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultipleTextComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-multipletext-question",
+                        templateUrl: "./multipletext.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("multipletext-question", MultipleTextComponent);
+
+    var RankingQuestionComponent = /** @class */ (function (_super) {
+        __extends(RankingQuestionComponent, _super);
+        function RankingQuestionComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.inputType = "";
+            _this.trackItemBy = function (index, item) {
+                return item.value + "-" + index + "-item";
+            };
+            return _this;
+        }
+        RankingQuestionComponent.prototype.getDefaultComponentName = function () {
+            return "sv-ng-ranking-item";
+        };
+        RankingQuestionComponent.prototype.getItemValueComponentData = function (item, index) {
+            var res = _super.prototype.getItemValueComponentData.call(this, item);
+            res.componentData.index = index;
+            return res;
+        };
+        return RankingQuestionComponent;
+    }(SelectBaseComponent));
+    RankingQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RankingQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingQuestionComponent, selector: "sv-ng-ranking-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.rootClass\" #contentElement>\n  <ng-container *ngFor=\"let item of model.rankingChoices; index as index; trackBy: trackItemBy\">\n    <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }\"></ng-template>\n  </ng-container>\n</div>", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-ranking-question",
+                        templateUrl: "./ranking.component.html",
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("ranking-question", RankingQuestionComponent);
+
+    var RankingItemComponent = /** @class */ (function (_super) {
+        __extends(RankingItemComponent, _super);
+        function RankingItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        RankingItemComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return RankingItemComponent;
+    }(BaseAngular));
+    RankingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RankingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.getItemIndexClasses()\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-ranking-item",
+                        templateUrl: "./ranking-item.component.html"
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-ng-ranking-item", RankingItemComponent);
+
+    var StringEditorComponent = /** @class */ (function () {
+        function StringEditorComponent() {
+            var _this = this;
+            this.onInput = function (event) {
+                _this.model.text = event.target.innerText;
+            };
+            this.onClick = function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+        }
+        return StringEditorComponent;
+    }());
+    StringEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    StringEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0__namespace, template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-string-editor",
+                        templateUrl: "./string-editor.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent(Survey.LocalizableString.editableRenderer, StringEditorComponent);
+
+    var PaneldynamicAction = /** @class */ (function () {
+        function PaneldynamicAction() {
+        }
+        Object.defineProperty(PaneldynamicAction.prototype, "question", {
+            get: function () {
+                return (this.model && this.model.data.question) || this.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PaneldynamicAction;
+    }());
+    PaneldynamicAction.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PaneldynamicAction, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PaneldynamicAction.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PaneldynamicAction, selector: "ng-component", inputs: { data: "data", model: "model" }, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PaneldynamicAction, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "",
+                        template: ""
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }] } });
+    var PanelDynamicAddBtn = /** @class */ (function (_super) {
+        __extends(PanelDynamicAddBtn, _super);
+        function PanelDynamicAddBtn() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PanelDynamicAddBtn.prototype.addPanelClick = function () {
+            this.question.addPanelUI();
+        };
+        return PanelDynamicAddBtn;
+    }(PaneldynamicAction));
+    PanelDynamicAddBtn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicAddBtn, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelDynamicAddBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn", usesInheritance: true, ngImport: i0__namespace, template: "<button type=\"button\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\">{{question.panelAddText}}</span>\n</button>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicAddBtn, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-add-btn",
+                        templateUrl: "./paneldynamic-add-btn.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-add-btn", PanelDynamicAddBtn);
+
+    var PanelDynamicNextBtn = /** @class */ (function (_super) {
+        __extends(PanelDynamicNextBtn, _super);
+        function PanelDynamicNextBtn() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PanelDynamicNextBtn.prototype.nextPanelClick = function () {
+            this.question.goToNextPanel();
+        };
+        return PanelDynamicNextBtn;
+    }(PaneldynamicAction));
+    PanelDynamicNextBtn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicNextBtn, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelDynamicNextBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn", usesInheritance: true, ngImport: i0__namespace, template: "<div [attr.title]=\"question.panelNextText\" (click)=\"nextPanelClick()\" [class]=\"question.getNextButtonCss()\">\n  <svg [iconName]=\"question.cssClasses.progressBtnIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicNextBtn, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-next-btn",
+                        templateUrl: "./paneldynamic-next-btn.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-next-btn", PanelDynamicNextBtn);
+
+    var PanelDynamicPrevBtn = /** @class */ (function (_super) {
+        __extends(PanelDynamicPrevBtn, _super);
+        function PanelDynamicPrevBtn() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PanelDynamicPrevBtn.prototype.prevPanelClick = function () {
+            this.question.goToPrevPanel();
+        };
+        return PanelDynamicPrevBtn;
+    }(PaneldynamicAction));
+    PanelDynamicPrevBtn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicPrevBtn, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelDynamicPrevBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn", usesInheritance: true, ngImport: i0__namespace, template: "<div [attr.title]=\"question.panelPrevText\" (click)=\"prevPanelClick()\" [class]=\"question.getPrevButtonCss()\">\n  <svg [iconName]=\"question.cssClasses.progressBtnIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n</div>\n", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicPrevBtn, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-prev-btn",
+                        templateUrl: "./paneldynamic-prev-btn.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-prev-btn", PanelDynamicPrevBtn);
+
+    var PaneldynamicRemoveButtonComponent = /** @class */ (function (_super) {
+        __extends(PaneldynamicRemoveButtonComponent, _super);
+        function PaneldynamicRemoveButtonComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(PaneldynamicRemoveButtonComponent.prototype, "panel", {
+            get: function () {
+                return (this.data ? this.data : this.model.data).panel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PaneldynamicRemoveButtonComponent;
+    }(PaneldynamicAction));
+    PaneldynamicRemoveButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PaneldynamicRemoveButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PaneldynamicRemoveButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-btn", usesInheritance: true, ngImport: i0__namespace, template: "<button type=\"button\" (click)=\"question.removePanelUI(panel)\" [class]=\"question.getPanelRemoveButtonCss()\"> \n  <span [class]=\"question.cssClasses.buttonRemoveText\">{{question.panelRemoveText}}</span>\n  <span [class]=\"question.cssClasses.iconRemove\"></span>\n</button>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PaneldynamicRemoveButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-remove-btn",
+                        templateUrl: "./paneldynamic-remove-btn.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-remove-btn", PaneldynamicRemoveButtonComponent);
+
+    var PanelDynamicProgressText = /** @class */ (function (_super) {
+        __extends(PanelDynamicProgressText, _super);
+        function PanelDynamicProgressText() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return PanelDynamicProgressText;
+    }(PaneldynamicAction));
+    PanelDynamicProgressText.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicProgressText, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelDynamicProgressText.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"question.cssClasses.progressText\">{{ question.progressText }}</div>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicProgressText, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-progress-text",
+                        templateUrl: "./paneldynamic-progress-text.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-progress-text", PanelDynamicProgressText);
+
+    var PanelDynamicQuestionComponent = /** @class */ (function (_super) {
+        __extends(PanelDynamicQuestionComponent, _super);
+        function PanelDynamicQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(PanelDynamicQuestionComponent.prototype, "renderedPanels", {
+            get: function () {
+                if (this.model.isRenderModeList)
+                    return this.model.panels;
+                var panels = [];
+                if (this.model.currentPanel) {
+                    panels.push(this.model.currentPanel);
+                }
+                return panels;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PanelDynamicQuestionComponent.prototype.onModelChanged = function () {
+            var _this = this;
+            _super.prototype.onModelChanged.call(this);
+            this.model.panelCountChangedCallback = function () {
+                _this.detectChanges();
+            };
+            this.model.currentIndexChangedCallback = function () {
+                _this.detectChanges();
+            };
+            this.model.renderModeChangedCallback = function () {
+                _this.detectChanges();
+            };
+        };
+        Object.defineProperty(PanelDynamicQuestionComponent.prototype, "progressCssClass", {
+            get: function () {
+                return this.model.isProgressTopShowing
+                    ? this.model.cssClasses.progressTop
+                    : this.model.cssClasses.progressBottom;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PanelDynamicQuestionComponent.prototype.ngOnDestroy = function () {
+            this.model.panelCountChangedCallback = function () { };
+            this.model.currentIndexChangedCallback = function () { };
+            this.model.renderModeChangedCallback = function () { };
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        PanelDynamicQuestionComponent.prototype.getPanelComponentName = function (panel) {
+            var survey = this.surveyModel;
+            if (!!survey) {
+                var name = survey.getElementWrapperComponentName(panel);
+                if (!!name) {
+                    return name;
+                }
+            }
+            return "panel";
+        };
+        PanelDynamicQuestionComponent.prototype.getPanelComponentData = function (panel) {
+            var survey = this.surveyModel;
+            var data;
+            if (!!survey) {
+                data = survey.getElementWrapperComponentData(panel);
+            }
+            return {
+                componentName: "panel",
+                componentData: {
+                    model: panel,
+                    data: data
+                }
+            };
+        };
+        return PanelDynamicQuestionComponent;
+    }(QuestionAngular));
+    PanelDynamicQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right'\">\n        <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n      </ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.panelCount !== 0 && !model.showLegacyNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-paneldynamic-question",
+                        templateUrl: "./paneldynamic.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("paneldynamic-question", PanelDynamicQuestionComponent);
+
+    var TemplateRendererComponent = /** @class */ (function (_super) {
+        __extends(TemplateRendererComponent, _super);
+        function TemplateRendererComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TemplateRendererComponent;
+    }(EmbeddedViewContentComponent));
+    TemplateRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateRendererComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplateRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateRendererComponent, selector: "sv-template-renderer", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!componentName\">\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"!componentName && contentTempl\">\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-template-renderer",
+                        templateUrl: "./template-renderer.component.html",
+                        styleUrls: ["./hide-host.scss"]
+                    }]
+            }], propDecorators: { componentName: [{
+                    type: i0.Input
+                }], componentData: [{
+                    type: i0.Input
+                }], contentTempl: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent(Survey.SurveyModel.TemplateRendererComponentName, TemplateRendererComponent);
+
+    var CustomWidgetComponent = /** @class */ (function () {
+        function CustomWidgetComponent() {
+        }
+        Object.defineProperty(CustomWidgetComponent.prototype, "hasDefaultRender", {
+            get: function () {
+                return this.model.customWidget.isDefaultRender || this.hasAngularComponent;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomWidgetComponent.prototype, "hasHtml", {
+            get: function () {
+                return this.model.customWidget.htmlTemplate ? true : false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomWidgetComponent.prototype, "customHtml", {
+            get: function () {
+                return this.model.customWidget.htmlTemplate;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomWidgetComponent.prototype, "hasAngularComponent", {
+            get: function () {
+                return AngularComponentFactory.Instance.isComponentRegistered(this.model.customWidget.name);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomWidgetComponent.prototype, "componentName", {
+            get: function () {
+                if (this.hasAngularComponent)
+                    return this.model.customWidget.name;
+                return this.model.getTemplate() + "-question";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CustomWidgetComponent.prototype.ngAfterViewInit = function () {
+            this.model.customWidget.afterRender(this.model, this.container.nativeElement);
+        };
+        CustomWidgetComponent.prototype.ngOnChanges = function (simpleChanges) {
+            if (simpleChanges["model"].previousValue !== undefined && simpleChanges["model"].currentValue !== undefined) {
+                this.model.customWidget.afterRender(this.model, this.container.nativeElement);
+            }
+        };
+        CustomWidgetComponent.prototype.ngOnDestroy = function () {
+            this.model.customWidget.willUnmount(this.model, this.container.nativeElement);
+        };
+        return CustomWidgetComponent;
+    }());
+    CustomWidgetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomWidgetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CustomWidgetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomWidgetComponent, selector: "sv-ng-custom-widget", inputs: { css: "css", model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #content>\n  <div *ngIf=\"hasHtml\" [innerHTML]=\"customHtml | safeHtml\"></div>\n  <ng-container *ngIf=\"hasDefaultRender\">\n    <ng-template [component]=\"{ name: componentName, data: { model: model, css: css } }\"></ng-template>  \n  </ng-container>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomWidgetComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: "./customwidget.component.html",
+                        selector: "sv-ng-custom-widget"
+                    }]
+            }], propDecorators: { css: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ["content"]
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("survey-customwidget", CustomWidgetComponent);
+
+    var MatrixDynamicDragDropIconComponent = /** @class */ (function (_super) {
+        __extends(MatrixDynamicDragDropIconComponent, _super);
+        function MatrixDynamicDragDropIconComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(MatrixDynamicDragDropIconComponent.prototype, "question", {
+            get: function () {
+                return this.model.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MatrixDynamicDragDropIconComponent;
+    }(EmbeddedViewContentComponent));
+    MatrixDynamicDragDropIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicDragDropIconComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixDynamicDragDropIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n    <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n  </svg>\n  <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicDragDropIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: "drag-drop-icon.component.html",
+                        selector: "sv-ng-matrix-drag-drop-icon",
+                        styleUrls: ["../../../hide-host.scss"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-matrix-drag-drop-icon", MatrixDynamicDragDropIconComponent);
+
+    var MatrixCellComponent = /** @class */ (function (_super) {
+        __extends(MatrixCellComponent, _super);
+        function MatrixCellComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.isVisible = false;
+            return _this;
+        }
+        MatrixCellComponent.prototype.getModel = function () {
+            return this.cell.question;
+        };
+        Object.defineProperty(MatrixCellComponent.prototype, "row", {
+            get: function () {
+                return this.cell.row;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatrixCellComponent.prototype, "panelComponentName", {
+            get: function () {
+                var panel = this.cell.panel;
+                var survey = panel.survey;
+                if (!!survey) {
+                    var name = survey.getElementWrapperComponentName(panel);
+                    if (!!name) {
+                        return name;
+                    }
+                }
+                return "panel";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatrixCellComponent.prototype, "panelComponentData", {
+            get: function () {
+                var panel = this.cell.panel;
+                var survey = panel.survey;
+                var data;
+                if (!!survey) {
+                    data = survey.getElementWrapperComponentData(panel);
+                }
+                return {
+                    componentName: "panel",
+                    componentData: {
+                        model: panel,
+                        data: data
+                    }
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatrixCellComponent.prototype.getComponentName = function (element) {
+            if (element.customWidget) {
+                return "survey-customwidget";
+            }
+            return element.getType() + "-question";
+        };
+        MatrixCellComponent.prototype.getHeaders = function () {
+            return this.cell.headers;
+        };
+        MatrixCellComponent.prototype.getCellStyle = function () {
+            if (!!this.cell.width || !!this.cell.minWidth)
+                return { width: this.cell.width, minWidth: this.cell.minWidth };
+            return null;
+        };
+        MatrixCellComponent.prototype.ngAfterViewInit = function () {
+            if (!this.cell.hasQuestion || !this.question || !this.question.survey)
+                return;
+            var options = {
+                cell: this.cell.cell,
+                cellQuestion: this.cell.question,
+                htmlElement: this.cellContainer.nativeElement,
+                row: this.cell.row,
+                column: this.cell.cell.column,
+            };
+            this.question.survey.matrixAfterCellRender(this.question, options);
+        };
+        return MatrixCellComponent;
+    }(BaseAngular));
+    MatrixCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\" [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\" [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\" [visible]=\"cell.question.isVisible\">\n      <div *ngIf=\"cell.showErrorOnTop && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n          <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n            <ng-template  [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n          </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\" [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <sv-ng-selebase-item\n        *ngIf=\"cell.isItemChoice\"\n        [showLabel]=\"false\"\n        [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n        [question]=\"cell.question\"\n        [model]=\"cell.item\"\n      ></sv-ng-selebase-item>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\" sv-ng-comment-other></div>\n      <div *ngIf=\"cell.showErrorOnBottom && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <div *ngIf=\"cell.question.isErrorsModeTooltip && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!!cell.requiredText\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>  \n      </ng-template>\n    </ng-container>\n</td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-cell",
+                        templateUrl: "./matrixcell.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], cell: [{
+                    type: i0.Input
+                }], cellContainer: [{
+                    type: i0.ViewChild,
+                    args: ["cellContainer"]
+                }] } });
+
+    var MatrixRequiredHeader = /** @class */ (function (_super) {
+        __extends(MatrixRequiredHeader, _super);
+        function MatrixRequiredHeader() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MatrixRequiredHeader.prototype.getModel = function () {
+            return this.column;
+        };
+        return MatrixRequiredHeader;
+    }(BaseAngular));
+    MatrixRequiredHeader.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRequiredHeader, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixRequiredHeader.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: { column: "column", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>", isInline: true, styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRequiredHeader, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrixheaderrequired",
+                        styles: [":host { display: none; }"],
+                        template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>"
+                    }]
+            }], propDecorators: { column: [{
+                    type: i0.Input
+                }], question: [{
+                    type: i0.Input
+                }] } });
+
+    var MatrixRowComponent = /** @class */ (function (_super) {
+        __extends(MatrixRowComponent, _super);
+        function MatrixRowComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MatrixRowComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(MatrixRowComponent.prototype, "row", {
+            get: function () {
+                return this.model.row;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatrixRowComponent.prototype.trackCellBy = function (_, cell) {
+            return cell.id;
+        };
+        return MatrixRowComponent;
+    }(BaseAngular));
+    MatrixRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <tr [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\" [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrix-cell\n      [cell]=\"cell\"\n      [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"\n    ></sv-ng-matrix-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-row",
+                        templateUrl: "./matrix-row.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], question: [{
+                    type: i0.Input
+                }] } });
+
+    var MatrixTableComponent = /** @class */ (function (_super) {
+        __extends(MatrixTableComponent, _super);
+        function MatrixTableComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MatrixTableComponent.prototype.getModel = function () {
+            return this.table;
+        };
+        MatrixTableComponent.prototype.trackCellBy = function (_, cell) {
+            return cell.id;
+        };
+        MatrixTableComponent.prototype.trackRowBy = function (index, row) {
+            return row.id;
+        };
+        return MatrixTableComponent;
+    }(BaseAngular));
+    MatrixTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixTableComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0__namespace, template: "<div [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement [class]=\"question.cssClasses.tableWrapper\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container\n          *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n        >\n              <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n                <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n                  <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n                  <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n                  </sv-ng-matrixheaderrequired>\n                </ng-template>\n              </th>\n              \n              <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n        <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"table.showFooter\">\n      <tr>\n        <sv-ng-matrix-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n        </sv-ng-matrix-cell>\n      </tr>\n    </tfoot>\n  </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixTableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-table",
+                        templateUrl: "./matrixtable.component.html"
+                    }]
+            }], propDecorators: { question: [{
+                    type: i0.Input
+                }], table: [{
+                    type: i0.Input
+                }] } });
+
+    var MatrixDropdownComponent = /** @class */ (function (_super) {
+        __extends(MatrixDropdownComponent, _super);
+        function MatrixDropdownComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MatrixDropdownComponent;
+    }(QuestionAngular));
+    MatrixDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownComponent, selector: "sv-ng-matrixdropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrixdropdown-question",
+                        templateUrl: "./matrixdropdown.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("matrixdropdown-question", MatrixDropdownComponent);
+
+    var MatrixDynamicComponent = /** @class */ (function (_super) {
+        __extends(MatrixDynamicComponent, _super);
+        function MatrixDynamicComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MatrixDynamicComponent;
+    }(QuestionAngular));
+    MatrixDynamicComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixDynamicComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrixdynamic-question",
+                        templateUrl: "./matrixdynamic.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("matrixdynamic-question", MatrixDynamicComponent);
+
+    var MatrixDynamicRemoveButtonComponent = /** @class */ (function () {
+        function MatrixDynamicRemoveButtonComponent() {
+        }
+        Object.defineProperty(MatrixDynamicRemoveButtonComponent.prototype, "question", {
+            get: function () {
+                return this.model.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatrixDynamicRemoveButtonComponent.prototype, "row", {
+            get: function () {
+                return this.model.data.row;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatrixDynamicRemoveButtonComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return MatrixDynamicRemoveButtonComponent;
+    }());
+    MatrixDynamicRemoveButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicRemoveButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixDynamicRemoveButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicRemoveButtonComponent, selector: "sv-ng-matrix-remove-btn", inputs: { model: "model" }, ngImport: i0__namespace, template: "<button type=\"button\" [class]=\"question.getRemoveRowButtonCss()\" [disabled]=\"question.isInputReadOnly\" (click)=\"question.removeRowUI(row)\">\n  <sv-ng-string [model]=\"question.locRemoveRowText\" ></sv-ng-string>\n  <span [class]=\"question.cssClasses.iconRemove\"></span>\n</button>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicRemoveButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-remove-btn",
+                        templateUrl: "./remove-button.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-matrix-remove-button", MatrixDynamicRemoveButtonComponent);
+
+    var MatrixDetailButtonComponent = /** @class */ (function () {
+        function MatrixDetailButtonComponent() {
+        }
+        Object.defineProperty(MatrixDetailButtonComponent.prototype, "question", {
+            get: function () {
+                return this.model.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatrixDetailButtonComponent.prototype, "row", {
+            get: function () {
+                return this.model.data.row;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatrixDetailButtonComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return MatrixDetailButtonComponent;
+    }());
+    MatrixDetailButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDetailButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatrixDetailButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDetailButtonComponent, selector: "sv-ng-matrix-detail-btn", inputs: { model: "model" }, ngImport: i0__namespace, template: "<button type=\"button\" [class]=\"question.getDetailPanelButtonCss(row)\" (click)=\"row.showHideDetailPanelClick()\"\n  [attr.aria-expanded]=\"question.getIsDetailPanelShowing(row) ? 'true' : 'false'\"\n  [attr.aria-controls]=\"question.getIsDetailPanelShowing(row) ? row.detailPanelId : null\">\n  <svg [class]=\"this.question.getDetailPanelIconCss(this.row)\" \n    [iconName]=\"this.question.getDetailPanelIconId(this.row)\" [size]=\"'auto'\" sv-ng-svg-icon>\n  </svg>\n</button>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDetailButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-matrix-detail-btn",
+                        templateUrl: "./detail-button.component.html"
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-matrix-detail-button", MatrixDetailButtonComponent);
+
+    var ExpressionComponent = /** @class */ (function (_super) {
+        __extends(ExpressionComponent, _super);
+        function ExpressionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ExpressionComponent;
+    }(QuestionAngular));
+    ExpressionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExpressionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExpressionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExpressionComponent, selector: "sv-ng-expression", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]='model.cssClasses.root' #contentElement>{{ model.formatedValue }}</div>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExpressionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-expression",
+                        template: "<div [class]='model.cssClasses.root' #contentElement>{{ model.formatedValue }}</div>"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("expression-question", ExpressionComponent);
+
+    var ImageQuestionComponent = /** @class */ (function (_super) {
+        __extends(ImageQuestionComponent, _super);
+        function ImageQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ImageQuestionComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.model.locImageLink.onChanged = function () {
+                _this.detectChanges();
+            };
+            _super.prototype.ngAfterViewInit.call(this);
+        };
+        ImageQuestionComponent.prototype.ngOnDestroy = function () {
+            this.model.locImageLink.onChanged = function () { };
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return ImageQuestionComponent;
+    }(QuestionAngular));
+    ImageQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.altText || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></iframe>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-image-question",
+                        templateUrl: "./image.component.html"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("image-question", ImageQuestionComponent);
+
+    var CustomQuestionComponent = /** @class */ (function (_super) {
+        __extends(CustomQuestionComponent, _super);
+        function CustomQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(CustomQuestionComponent.prototype, "contentQuestion", {
+            get: function () {
+                return this.model.contentQuestion;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CustomQuestionComponent.prototype.getComponentName = function (element) {
+            if (element.customWidget) {
+                return "survey-customwidget";
+            }
+            return element.getTemplate() + "-question";
+        };
+        return CustomQuestionComponent;
+    }(QuestionAngular));
+    CustomQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    CustomQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomQuestionComponent, selector: "sv-ng-custom-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [component]='{ name: getComponentName(contentQuestion), data: { model: contentQuestion } }'></ng-template>", isInline: true, directives: [{ type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-custom-question",
+                        template: "<ng-template [component]='{ name: getComponentName(contentQuestion), data: { model: contentQuestion } }'></ng-template>"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("custom-question", CustomQuestionComponent);
+
+    var CompositeQuestionComponent = /** @class */ (function (_super) {
+        __extends(CompositeQuestionComponent, _super);
+        function CompositeQuestionComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(CompositeQuestionComponent.prototype, "contentPanel", {
+            get: function () {
+                return this.model.contentPanel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CompositeQuestionComponent;
+    }(QuestionAngular));
+    CompositeQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CompositeQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    CompositeQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CompositeQuestionComponent, selector: "sv-ng-composite-question", usesInheritance: true, ngImport: i0__namespace, template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>", isInline: true, components: [{ type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CompositeQuestionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-composite-question",
+                        template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>"
+                    }]
+            }] });
+    AngularComponentFactory.Instance.registerComponent("composite-question", CompositeQuestionComponent);
+
+    var SurveyModule = /** @class */ (function () {
+        function SurveyModule() {
+        }
+        return SurveyModule;
+    }());
+    SurveyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SurveyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, declarations: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+            SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+            QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
+            CharacterCounterComponent,
+            DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
+            PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
+            ListComponent, ListItemComponent, RatingItemComponent,
+            TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
+            ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
+            SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
+            RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+            MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
+            MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
+            CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
+            NotifierComponent], imports: [i2.CommonModule, i3.FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+            SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+            QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
+            DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
+            PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
+            ListComponent, ListItemComponent, RatingItemComponent,
+            TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
+            ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
+            SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
+            RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+            MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
+            MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
+            CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
+            NotifierComponent] });
+    SurveyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, providers: [PopupService], imports: [[
+                i2.CommonModule, i3.FormsModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+                            SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+                            QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
+                            CharacterCounterComponent,
+                            DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
+                            PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
+                            ListComponent, ListItemComponent, RatingItemComponent,
+                            TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
+                            ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
+                            SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
+                            RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+                            MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
+                            MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
+                            CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
+                            NotifierComponent
+                        ],
+                        imports: [
+                            i2.CommonModule, i3.FormsModule
+                        ],
+                        exports: [
+                            VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+                            SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+                            QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
+                            DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
+                            PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
+                            ListComponent, ListItemComponent, RatingItemComponent,
+                            TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
+                            ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
+                            SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
+                            RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+                            MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
+                            MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
+                            CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
+                            NotifierComponent
+                        ],
+                        providers: [PopupService],
+                    }]
+            }] });
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.ActionBarComponent = ActionBarComponent;
+    exports.ActionBarItemComponent = ActionBarItemComponent;
+    exports.ActionBarItemDropdownComponent = ActionBarItemDropdownComponent;
+    exports.ActionComponent = ActionComponent;
+    exports.AngularComponentFactory = AngularComponentFactory;
+    exports.BaseAngular = BaseAngular;
+    exports.BooleanCheckboxComponent = BooleanCheckboxComponent;
+    exports.BooleanQuestionComponent = BooleanQuestionComponent;
+    exports.BooleanRadioComponent = BooleanRadioComponent;
+    exports.BooleanRadioItemComponent = BooleanRadioItemComponent;
+    exports.BrandInfoComponent = BrandInfoComponent;
+    exports.ButtonGroupQuestionComponent = ButtonGroupQuestionComponent;
+    exports.CharacterCounterComponent = CharacterCounterComponent;
+    exports.CheckboxComponent = CheckboxComponent;
+    exports.CheckboxItemComponent = CheckboxItemComponent;
+    exports.CommentQuestionComponent = CommentQuestionComponent;
+    exports.CompositeQuestionComponent = CompositeQuestionComponent;
+    exports.CustomQuestionComponent = CustomQuestionComponent;
+    exports.CustomWidgetComponent = CustomWidgetComponent;
+    exports.DropdownComponent = DropdownComponent;
+    exports.DropdownOptionItemComponent = DropdownOptionItemComponent;
+    exports.DropdownQuestionComponent = DropdownQuestionComponent;
+    exports.DropdownSelectComponent = DropdownSelectComponent;
+    exports.DynamicComponentDirective = DynamicComponentDirective;
+    exports.DynamicHeadComponent = DynamicHeadComponent;
+    exports.ElementComponent = ElementComponent;
+    exports.ElementHeaderComponent = ElementHeaderComponent;
+    exports.ElementTitleComponent = ElementTitleComponent;
+    exports.EmbeddedViewContentComponent = EmbeddedViewContentComponent;
+    exports.ErrorsComponent = ErrorsComponent;
+    exports.ExpressionComponent = ExpressionComponent;
+    exports.FileQuestionComponent = FileQuestionComponent;
+    exports.HtmlQuestionComponent = HtmlQuestionComponent;
+    exports.ImagePickerItemComponent = ImagePickerItemComponent;
+    exports.ImagePickerQuestionComponent = ImagePickerQuestionComponent;
+    exports.ImageQuestionComponent = ImageQuestionComponent;
+    exports.Key2ClickDirective = Key2ClickDirective;
+    exports.ListComponent = ListComponent;
+    exports.ListItemComponent = ListItemComponent;
+    exports.LogoImageComponent = LogoImageComponent;
+    exports.MatrixCellComponent = MatrixCellComponent;
+    exports.MatrixDetailButtonComponent = MatrixDetailButtonComponent;
+    exports.MatrixDropdownComponent = MatrixDropdownComponent;
+    exports.MatrixDynamicComponent = MatrixDynamicComponent;
+    exports.MatrixDynamicDragDropIconComponent = MatrixDynamicDragDropIconComponent;
+    exports.MatrixDynamicRemoveButtonComponent = MatrixDynamicRemoveButtonComponent;
+    exports.MatrixQuestionComponent = MatrixQuestionComponent;
+    exports.MatrixRequiredHeader = MatrixRequiredHeader;
+    exports.MatrixTableComponent = MatrixTableComponent;
+    exports.ModalComponent = ModalComponent;
+    exports.MultipleTextComponent = MultipleTextComponent;
+    exports.MultipleTextItemComponent = MultipleTextItemComponent;
+    exports.NotifierComponent = NotifierComponent;
+    exports.PageComponent = PageComponent;
+    exports.PanelComponent = PanelComponent;
+    exports.PanelDynamicAddBtn = PanelDynamicAddBtn;
+    exports.PanelDynamicNextBtn = PanelDynamicNextBtn;
+    exports.PanelDynamicPrevBtn = PanelDynamicPrevBtn;
+    exports.PanelDynamicProgressText = PanelDynamicProgressText;
+    exports.PanelDynamicQuestionComponent = PanelDynamicQuestionComponent;
+    exports.PaneldynamicAction = PaneldynamicAction;
+    exports.PaneldynamicRemoveButtonComponent = PaneldynamicRemoveButtonComponent;
+    exports.PopupBaseContainerComponent = PopupBaseContainerComponent;
+    exports.PopupComponent = PopupComponent;
+    exports.PopupPointerComponent = PopupPointerComponent;
+    exports.PopupService = PopupService;
+    exports.PopupSurveyComponent = PopupSurveyComponent;
+    exports.ProgressButtonsComponent = ProgressButtonsComponent;
+    exports.ProgressDefaultComponent = ProgressDefaultComponent;
+    exports.QuestionAngular = QuestionAngular;
+    exports.QuestionComponent = QuestionComponent;
+    exports.QuestionSkeletonComponent = QuestionSkeletonComponent;
+    exports.RadiogroupComponent = RadiogroupComponent;
+    exports.RadiogroupItemComponent = RadiogroupItemComponent;
+    exports.RankingItemComponent = RankingItemComponent;
+    exports.RankingQuestionComponent = RankingQuestionComponent;
+    exports.RatingDropdownComponent = RatingDropdownComponent;
+    exports.RatingItemComponent = RatingItemComponent;
+    exports.RatingQuestionComponent = RatingQuestionComponent;
+    exports.RowComponent = RowComponent;
+    exports.SafeHtmlPipe = SafeHtmlPipe;
+    exports.SafeResourceUrlPipe = SafeResourceUrlPipe;
+    exports.SafeUrlPipe = SafeUrlPipe;
+    exports.SelectBaseComponent = SelectBaseComponent;
+    exports.SelectBaseItemComponent = SelectBaseItemComponent;
+    exports.SignaturePadQuestionComponent = SignaturePadQuestionComponent;
+    exports.SkeletonComponent = SkeletonComponent;
+    exports.StringEditorComponent = StringEditorComponent;
+    exports.StringViewerComponent = StringViewerComponent;
+    exports.SurveyCommentComponent = SurveyCommentComponent;
+    exports.SurveyCommentOtherComponent = SurveyCommentOtherComponent;
+    exports.SurveyComponent = SurveyComponent;
+    exports.SurveyContentComponent = SurveyContentComponent;
+    exports.SurveyHeaderComponent = SurveyHeaderComponent;
+    exports.SurveyModule = SurveyModule;
+    exports.SurveyNavigationButton = SurveyNavigationButton;
+    exports.SurveyStringComponent = SurveyStringComponent;
+    exports.SvgIconComponent = SvgIconComponent;
+    exports.TagboxComponent = TagboxComponent;
+    exports.TagboxFilterComponent = TagboxFilterComponent;
+    exports.TagboxItemComponent = TagboxItemComponent;
+    exports.TagboxQuestionComponent = TagboxQuestionComponent;
+    exports.TemplateRendererComponent = TemplateRendererComponent;
+    exports.TextQuestionComponent = TextQuestionComponent;
+    exports.TimerPanelComponent = TimerPanelComponent;
+    exports.VisibleDirective = VisibleDirective;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=survey-angular-ui.umd.js.map