survey-creator-angular 1.9.92 → 1.9.94

package/README.md

@@ -18,6 +18,40 @@ To get started with Survey Creator / Form Builder for Angular, refer to the foll
 - [Live Examples](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/angular)
 - [What's New](https://surveyjs.io/WhatsNew)
 
+## Build Survey Creator / Form Builder for Angular from Sources
+
+If you want to build the library yourself, do the following:
+
+1. **Build `survey-library` and `survey-creator-core`**\
+    Refer to the following instructions:
+
+    - [Build the SurveyJS Form Library from Sources](https://github.com/surveyjs/survey-library#build-the-surveyjs-form-library-from-sources)
+    - [Build the Survey Creator Model from Sources](https://github.com/surveyjs/survey-creator/tree/master/packages/survey-creator-core#build-the-survey-creator-model-from-sources)
+
+    > NOTE: Make sure that folders with cloned `survey-library` and `survey-creator` repositories are in the same directory.
+
+2.  **Install build dependencies for Survey Creator / Form Builder for Angular**
+
+    ```
+    cd survey-creator/packages/survey-creator-angular
+    npm install
+    ```
+
+3.  **Build the library**
+
+    ```
+    npm run build
+    ```
+
+    You can find the built library in the "build" directory.
+
+4.  **Run unit tests**
+
+    ```
+    npm test
+    ```
+    This command runs unit tests using [Karma](https://karma-runner.github.io/0.13/index.html).
+
 ## Licensing
 
 Survey Creator is **not available for free commercial usage**. If you want to integrate it into your application, you must purchase a [commercial license](https://surveyjs.io/licensing). However, you can [use Survey Creator online](https://surveyjs.io/create-survey) to produce survey JSON configurations and run them with [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview) in your application free of charge.

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

@@ -41,7 +41,7 @@
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
-  /* global Reflect, Promise */
+  /* global Reflect, Promise, SuppressedError, Symbol */
   var extendStatics = function (d, b) {
       extendStatics = Object.setPrototypeOf ||
           ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -411,6 +411,56 @@
           throw new TypeError("Cannot use 'in' operator on non-object");
       return typeof state === "function" ? receiver === state : state.has(receiver);
   }
+  function __addDisposableResource(env, value, async) {
+      if (value !== null && value !== void 0) {
+          if (typeof value !== "object")
+              throw new TypeError("Object expected.");
+          var dispose;
+          if (async) {
+              if (!Symbol.asyncDispose)
+                  throw new TypeError("Symbol.asyncDispose is not defined.");
+              dispose = value[Symbol.asyncDispose];
+          }
+          if (dispose === void 0) {
+              if (!Symbol.dispose)
+                  throw new TypeError("Symbol.dispose is not defined.");
+              dispose = value[Symbol.dispose];
+          }
+          if (typeof dispose !== "function")
+              throw new TypeError("Object not disposable.");
+          env.stack.push({ value: value, dispose: dispose, async: async });
+      }
+      else if (async) {
+          env.stack.push({ async: true });
+      }
+      return value;
+  }
+  var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+  function __disposeResources(env) {
+      function fail(e) {
+          env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+          env.hasError = true;
+      }
+      function next() {
+          while (env.stack.length) {
+              var rec = env.stack.pop();
+              try {
+                  var result = rec.dispose && rec.dispose.call(rec.value);
+                  if (rec.async)
+                      return Promise.resolve(result).then(next, function (e) { fail(e); return next(); });
+              }
+              catch (e) {
+                  fail(e);
+              }
+          }
+          if (env.hasError)
+              throw env.error;
+      }
+      return next();
+  }
   var tslib_es6 = {
       __extends: __extends,
       __assign: __assign,
@@ -437,6 +487,8 @@
       __classPrivateFieldGet: __classPrivateFieldGet,
       __classPrivateFieldSet: __classPrivateFieldSet,
       __classPrivateFieldIn: __classPrivateFieldIn,
+      __addDisposableResource: __addDisposableResource,
+      __disposeResources: __disposeResources,
   };
 
   var SvgBundleComponent = /** @class */ (function () {
@@ -932,7 +984,7 @@
       return PageNavigatorComponent;
   }(CreatorModelComponent));
   PageNavigatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageNavigatorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PageNavigatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container>\n    <ng-container *ngIf=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  PageNavigatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container>\n    <ng-container *ngIf=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: PageNavigatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1548,7 +1600,7 @@
       return AddQuestionButtonComponent;
   }(i1.ActionBarItemComponent));
   AddQuestionButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  AddQuestionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  AddQuestionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1782,7 +1834,7 @@
       return ImageItemValueDesignerComponent;
   }(CreatorModelComponent));
   ImageItemValueDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-context-container svc-image-item-value-controls\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-context-button\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-context-button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.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"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\"\n        class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span *ngIf=\"adorner.isDraggable\" class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\"\n          (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-context-container svc-image-item-value-controls\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-context-button\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\"\n              [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click]\n              [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-context-button svc-image-item-value-controls__add\" [key2click]\n            (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\"\n              sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.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"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1946,7 +1998,7 @@
       return PanelDesignerComponent;
   }(QuestionDesignerComponent));
   PanelDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\"\n      [attr.tabindex]=\"adorner.element.isInteractiveDesignElement ? undefined : -1\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\"\n      [attr.tabindex]=\"adorner.element.isInteractiveDesignElement ? undefined : -1\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2188,7 +2240,7 @@
       return LogicOperatorComponent;
   }(i1.QuestionAngular));
   LogicOperatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicOperatorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  LogicOperatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\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      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\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>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  LogicOperatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\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      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\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>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicOperatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2668,7 +2720,7 @@
       return QuestionColorComponent;
   }(i1.QuestionAngular));
   QuestionColorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionColorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionColorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\">\n  <label [class]=\"model.cssClasses.swatch\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [class]=\"model.cssClasses.colorInput\" [value]=\"model.renderedValue\" (change)=\"model.onColorInputChange($event)\"/>\n  </label>\n  <input autocomplete=\"off\" \n    [disabled]=\"model.isInputReadOnly\" \n    [attr.id]=\"model.inputId\" \n    [placeholder]=\"model.renderedPlaceholder\" \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    (change)=\"model.onChange($event)\" \n    (keyup)=\"model.onKeyUp($event)\" \n    (blur)=\"model.onBlur($event)\" \n    (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\"/>  \n    <ng-container *ngIf=\"model.showDropdownAction\">\n      <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n      <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\" [visible]=\"false\"></sv-ng-popup>\n    </ng-container>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  QuestionColorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\">\n  <label [class]=\"model.cssClasses.swatch\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [class]=\"model.cssClasses.colorInput\" [value]=\"model.renderedValue\" (change)=\"model.onColorInputChange($event)\"/>\n  </label>\n  <input autocomplete=\"off\" \n    [disabled]=\"model.isInputReadOnly\" \n    [attr.id]=\"model.inputId\" \n    [placeholder]=\"model.renderedPlaceholder\" \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    (change)=\"model.onChange($event)\" \n    (keyup)=\"model.onKeyUp($event)\" \n    (blur)=\"model.onBlur($event)\" \n    (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\"/>  \n    <ng-container *ngIf=\"model.showDropdownAction\">\n      <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n      <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n    </ng-container>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], 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: QuestionColorComponent, decorators: [{
               type: i0.Component,
               args: [{