survey-creator-angular 2.2.5 → 2.3.0

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

@@ -751,6 +751,31 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("survey-widget", i1.SurveyContentComponent);
 
+  var SurfacePlaceholderComponent = /** @class */ (function (_super) {
+      __extends(SurfacePlaceholderComponent, _super);
+      function SurfacePlaceholderComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return SurfacePlaceholderComponent;
+  }(i1.EmbeddedViewContentComponent));
+  SurfacePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfacePlaceholderComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  SurfacePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: { name: "name", placeholderTitleText: "placeholderTitleText", placeholderDescriptionText: "placeholderDescriptionText" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-surface-placeholder\">\n    <div class=\"svc-surface-placeholder__image\" [class]=\"'svc-surface-placeholder__image--' + name\"></div>\n    <div class=\"svc-surface-placeholder__text\">\n      <div class=\"svc-surface-placeholder__title\">{{placeholderTitleText}}</div>\n      <div class=\"svc-surface-placeholder__description\">{{placeholderDescriptionText}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfacePlaceholderComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-surface-placeholder",
+                      templateUrl: "./surface-placeholder.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { name: [{
+                  type: i0.Input
+              }], placeholderTitleText: [{
+                  type: i0.Input
+              }], placeholderDescriptionText: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-surface-placeholder", SurfacePlaceholderComponent);
+
   var CreatorModelComponent = /** @class */ (function (_super) {
       __extends(CreatorModelComponent, _super);
       function CreatorModelComponent() {
@@ -795,220 +820,6 @@
                   }]
           }] });
 
-  var ToolboxToolComponent = /** @class */ (function (_super) {
-      __extends(ToolboxToolComponent, _super);
-      function ToolboxToolComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.isCompact = false;
-          return _this;
-      }
-      ToolboxToolComponent.prototype.createModel = function () {
-          this.model = new surveyCreatorCore.ToolboxToolViewModel(this.item, this.creator, this.parentModel);
-      };
-      ToolboxToolComponent.prototype.getPropertiesToTrack = function () {
-          return ["creator", "item"];
-      };
-      ToolboxToolComponent.prototype.getModel = function () {
-          return this.item;
-      };
-      Object.defineProperty(ToolboxToolComponent.prototype, "itemCssClasses", {
-          get: function () {
-              return this.item.css;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      ToolboxToolComponent.prototype.ngOnDestroy = function () {
-          _super.prototype.ngOnDestroy.call(this);
-          this.model.dispose();
-          this.item.updateModeCallback = undefined;
-      };
-      ToolboxToolComponent.prototype.ngAfterViewInit = function () {
-          var _this = this;
-          if (this.item) {
-              this.item.updateModeCallback = function (mode, callback) {
-                  var _a;
-                  _this.item.mode = mode;
-                  callback(mode, (_a = _this.container) === null || _a === void 0 ? void 0 : _a.nativeElement);
-              };
-              queueMicrotask(function () {
-                  _this.item.afterRender();
-              });
-          }
-      };
-      return ToolboxToolComponent;
-  }(CreatorModelComponent));
-  ToolboxToolComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ToolboxToolComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></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: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-toolbox-tool",
-                      templateUrl: "./toolbox-tool.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { creator: [{
-                  type: i0.Input
-              }], item: [{
-                  type: i0.Input
-              }], parentModel: [{
-                  type: i0.Input
-              }], isCompact: [{
-                  type: i0.Input
-              }], container: [{
-                  type: i0.ViewChild,
-                  args: ["container"]
-              }] } });
-
-  var SearchComponent = /** @class */ (function (_super) {
-      __extends(SearchComponent, _super);
-      function SearchComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      SearchComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      return SearchComponent;
-  }(i1.BaseAngular));
-  SearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchComponent, selector: "svc-search", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"model.isVisible\" class=\"svc-search\">\n        <div class=\"svc-search__search-icon\">\n            <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n        <input type=\"text\" class=\"svc-search__input\" [(ngModel)]=\"model.filterString\"\n            [attr.aria-label]=\"model.filterStringPlaceholder\" [attr.placeholder]=\"model.filterStringPlaceholder\" />\n        <div class=\"svc-search__toolbar\">\n            <div class=\"svc-search__toolbar-counter\">{{model.matchCounterText}}</div>\n            <sv-action-bar [model]=\"model.searchActionBar\"></sv-action-bar>\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.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-search",
-                      templateUrl: "./search.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }] } });
-  i1.AngularComponentFactory.Instance.registerComponent("svc-search", SearchComponent);
-
-  var ToolboxCategoryComponent = /** @class */ (function (_super) {
-      __extends(ToolboxCategoryComponent, _super);
-      function ToolboxCategoryComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      ToolboxCategoryComponent.prototype.getModel = function () {
-          return this.category;
-      };
-      ToolboxCategoryComponent.prototype.trackItemBy = function (_, item) {
-          return item.renderedId;
-      };
-      return ToolboxCategoryComponent;
-  }(i1.BaseAngular));
-  ToolboxCategoryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxCategoryComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ToolboxCategoryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-toolbox__category\" [class.svc-toolbox__category--collapsed]=\"category.collapsed\"\n    [class.svc-toolbox__category--empty]=\"category.empty\">\n    <div class=\"svc-toolbox__category-header-wrapper\">\n      <div class=\"svc-toolbox__category-header\"\n        (click)=\"category.toggleState()\" [key2click] [class.svc-toolbox__category-header--collapsed]=\"toolbox.canCollapseCategories\" >\n        <span class=\"svc-toolbox__category-title\">{{category.title}}</span>\n        <div *ngIf=\"toolbox.canCollapseCategories\" class=\"svc-toolbox__category-header__controls\">\n          <svg [iconName]=\"category.iconName\" [class]=\"category.iconClassName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n      <ng-container *ngFor=\"let item of category.items; trackBy: trackItemBy\">\n        <svc-toolbox-tool [item]=\"item\" [creator]=\"toolbox.creator\" [parentModel]=\"toolbox\" [isCompact]=\"false\" ></svc-toolbox-tool>\n      </ng-container>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: ToolboxCategoryComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-toolbox-category ",
-                      templateUrl: "./toolbox-category.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { category: [{
-                  type: i0.Input
-              }], toolbox: [{
-                  type: i0.Input
-              }] } });
-
-  var AdaptiveToolboxComponent = /** @class */ (function (_super) {
-      __extends(AdaptiveToolboxComponent, _super);
-      function AdaptiveToolboxComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      Object.defineProperty(AdaptiveToolboxComponent.prototype, "toolbox", {
-          get: function () {
-              return this.model.toolbox;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(AdaptiveToolboxComponent.prototype, "creator", {
-          get: function () {
-              return this.model;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(AdaptiveToolboxComponent.prototype, "searchItem", {
-          get: function () {
-              return this.toolbox.searchItem;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      AdaptiveToolboxComponent.prototype.afterRender = function () {
-          var _a;
-          if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
-              this.toolbox.afterRender(this.container.nativeElement);
-          }
-      };
-      AdaptiveToolboxComponent.prototype.ngAfterViewInit = function () {
-          this.afterRender();
-      };
-      AdaptiveToolboxComponent.prototype.ngAfterViewChecked = function () {
-          _super.prototype.ngAfterViewChecked.call(this);
-          this.afterRender();
-      };
-      AdaptiveToolboxComponent.prototype.afterUpdate = function (isSync) {
-          _super.prototype.afterUpdate.call(this, isSync);
-          this.afterRender();
-      };
-      AdaptiveToolboxComponent.prototype.getModel = function () {
-          return this.toolbox;
-      };
-      AdaptiveToolboxComponent.prototype.ngOnDestroy = function () {
-          this.toolbox.beforeDestroy();
-          _super.prototype.ngOnDestroy.call(this);
-      };
-      AdaptiveToolboxComponent.prototype.trackItemBy = function (_, item) {
-          return item.renderedId;
-      };
-      return AdaptiveToolboxComponent;
-  }(i1.BaseAngular));
-  AdaptiveToolboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AdaptiveToolboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  AdaptiveToolboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AdaptiveToolboxComponent, selector: "svc-toolbox", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"toolbox.classNames\" #container [style]=\"toolbox.getRootStyle()\">\n    <div (focusout)=\"toolbox.focusOut($event)\" class=\"svc-toolbox__panel\">\n      <div *ngIf=\"toolbox.showSearch\" class=\"svc-toolbox__search-container\">\n        <ng-container *ngIf=\"toolbox.isCompactRendered\">\n          <svc-toolbox-tool [creator]=\"creator\" [item]=\"searchItem\" [parentModel]=\"toolbox\"\n            [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n        </ng-container>\n        <svc-search [model]=\"toolbox.searchManager\"></svc-search>\n        <div class=\"svc-toolbox__category-separator svc-toolbox__category-separator--search\"></div>\n      </div>\n      <div *ngIf=\"toolbox.showPlaceholder\" class=\"svc-toolbox__placeholder\">{{toolbox.toolboxNoResultsFound}}</div>\n      <sv-scroll>\n        <ng-container *ngIf=\"!toolbox.showInSingleCategory\">\n          <svc-toolbox-category *ngFor=\"let category of toolbox.categories\" [category]=\"category\"\n            [toolbox]=\"toolbox\"></svc-toolbox-category>\n        </ng-container>\n        <ng-container *ngIf=\"toolbox.showInSingleCategory\">\n          <div class=\"svc-toolbox__category\">\n            <ng-container *ngFor=\"let item of toolbox.renderedActions;  trackBy: trackItemBy\">\n              <svc-toolbox-tool [creator]=\"creator\" [item]=\"item\" [parentModel]=\"toolbox\"\n                [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n            </ng-container>\n          </div>\n        </ng-container>\n      </sv-scroll>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }, { type: SearchComponent, selector: "svc-search", inputs: ["model"] }, { type: i1__namespace.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }], 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: AdaptiveToolboxComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-toolbox",
-                      templateUrl: "./adaptive-toolbox.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }], container: [{
-                  type: i0.ViewChild,
-                  args: ["container"]
-              }] } });
-  i1.AngularComponentFactory.Instance.registerComponent("svc-toolbox", AdaptiveToolboxComponent);
-
-  var SurfacePlaceholderComponent = /** @class */ (function (_super) {
-      __extends(SurfacePlaceholderComponent, _super);
-      function SurfacePlaceholderComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      return SurfacePlaceholderComponent;
-  }(i1.EmbeddedViewContentComponent));
-  SurfacePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfacePlaceholderComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SurfacePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: { name: "name", placeholderTitleText: "placeholderTitleText", placeholderDescriptionText: "placeholderDescriptionText" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-surface-placeholder\">\n    <div class=\"svc-surface-placeholder__image\" [class]=\"'svc-surface-placeholder__image--' + name\"></div>\n    <div class=\"svc-surface-placeholder__text\">\n      <div class=\"svc-surface-placeholder__title\">{{placeholderTitleText}}</div>\n      <div class=\"svc-surface-placeholder__description\">{{placeholderDescriptionText}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfacePlaceholderComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-surface-placeholder",
-                      templateUrl: "./surface-placeholder.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { name: [{
-                  type: i0.Input
-              }], placeholderTitleText: [{
-                  type: i0.Input
-              }], placeholderDescriptionText: [{
-                  type: i0.Input
-              }] } });
-  i1.AngularComponentFactory.Instance.registerComponent("svc-surface-placeholder", SurfacePlaceholderComponent);
-
   var PageElementContentComponent = /** @class */ (function (_super) {
       __extends(PageElementContentComponent, _super);
       function PageElementContentComponent() {
@@ -1284,7 +1095,7 @@
       return DesignerTabComponent;
   }(i1.BaseAngular));
   DesignerTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  DesignerTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <svc-toolbox *ngIf=\"model.isToolboxVisible\" [model]=\"creator\"></svc-toolbox>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <sv-scroll>\n      <div class=\"svc-tab-designer_content\">\n        <ng-container *ngIf=\"model.showPlaceholder\">\n          <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n            <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header>\n            </div>\n          </div>\n          <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n            <svc-surface-placeholder [name]=\"'designer'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n              [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n            </svc-surface-placeholder>\n            <div class=\"svc-designer-placeholder-page\">\n              <svc-page [model]=\"model.newPage\" [survey]=\"survey\" [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!model.showPlaceholder\">\n          <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n        </ng-container>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: AdaptiveToolboxComponent, selector: "svc-toolbox", inputs: ["model"] }, { type: i1__namespace.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: i1__namespace.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  DesignerTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <ng-container *ngIf=\"model.isToolboxVisible\">\n      <ng-template [component]=\"{name: 'svc-toolbox', data: { model: creator }}\"></ng-template>\n    </ng-container>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <sv-scroll>\n      <div class=\"svc-tab-designer_content\">\n        <ng-container *ngIf=\"model.showPlaceholder\">\n          <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n            <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header>\n            </div>\n          </div>\n          <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n            <svc-surface-placeholder [name]=\"'designer'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n              [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n            </svc-surface-placeholder>\n            <div class=\"svc-designer-placeholder-page\">\n              <svc-page [model]=\"model.newPage\" [survey]=\"survey\" [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!model.showPlaceholder\">\n          <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n        </ng-container>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: i1__namespace.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerTabComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1511,6 +1322,30 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-object-selector", ObjectSelectorComponent);
 
+  var SearchComponent = /** @class */ (function (_super) {
+      __extends(SearchComponent, _super);
+      function SearchComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      SearchComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      return SearchComponent;
+  }(i1.BaseAngular));
+  SearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  SearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchComponent, selector: "svc-search", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"model.isVisible\" class=\"svc-search\">\n        <div class=\"svc-search__search-icon\">\n            <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n        <input type=\"text\" class=\"svc-search__input\" [(ngModel)]=\"model.filterString\"\n            [attr.aria-label]=\"model.filterStringPlaceholder\" [attr.placeholder]=\"model.filterStringPlaceholder\" />\n        <div class=\"svc-search__toolbar\">\n            <div class=\"svc-search__toolbar-counter\">{{model.matchCounterText}}</div>\n            <sv-action-bar [model]=\"model.searchActionBar\"></sv-action-bar>\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.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-search",
+                      templateUrl: "./search.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-search", SearchComponent);
+
   var PropertyGridComponent = /** @class */ (function (_super) {
       __extends(PropertyGridComponent, _super);
       function PropertyGridComponent() {
@@ -2576,6 +2411,143 @@
           }] });
   i1.AngularComponentFactory.Instance.registerComponent("svc-panel", PanelDesignerComponent);
 
+  var ToolboxToolComponent = /** @class */ (function (_super) {
+      __extends(ToolboxToolComponent, _super);
+      function ToolboxToolComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.isCompact = false;
+          return _this;
+      }
+      ToolboxToolComponent.prototype.createModel = function () {
+          this.model = new surveyCreatorCore.ToolboxToolViewModel(this.item, this.creator, this.parentModel);
+      };
+      ToolboxToolComponent.prototype.getPropertiesToTrack = function () {
+          return ["creator", "item"];
+      };
+      ToolboxToolComponent.prototype.getModel = function () {
+          return this.item;
+      };
+      Object.defineProperty(ToolboxToolComponent.prototype, "itemCssClasses", {
+          get: function () {
+              return this.item.css;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      ToolboxToolComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          this.model.dispose();
+          this.item.updateModeCallback = undefined;
+      };
+      ToolboxToolComponent.prototype.ngAfterViewInit = function () {
+          var _this = this;
+          if (this.item) {
+              this.item.updateModeCallback = function (mode, callback) {
+                  var _a;
+                  _this.item.mode = mode;
+                  callback(mode, (_a = _this.container) === null || _a === void 0 ? void 0 : _a.nativeElement);
+              };
+              queueMicrotask(function () {
+                  _this.item.afterRender();
+              });
+          }
+      };
+      return ToolboxToolComponent;
+  }(CreatorModelComponent));
+  ToolboxToolComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ToolboxToolComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></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: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-toolbox-tool",
+                      templateUrl: "./toolbox-tool.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { creator: [{
+                  type: i0.Input
+              }], item: [{
+                  type: i0.Input
+              }], parentModel: [{
+                  type: i0.Input
+              }], isCompact: [{
+                  type: i0.Input
+              }], container: [{
+                  type: i0.ViewChild,
+                  args: ["container"]
+              }] } });
+
+  var AdaptiveToolboxComponent = /** @class */ (function (_super) {
+      __extends(AdaptiveToolboxComponent, _super);
+      function AdaptiveToolboxComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      Object.defineProperty(AdaptiveToolboxComponent.prototype, "toolbox", {
+          get: function () {
+              return this.model.toolbox;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(AdaptiveToolboxComponent.prototype, "creator", {
+          get: function () {
+              return this.model;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(AdaptiveToolboxComponent.prototype, "searchItem", {
+          get: function () {
+              return this.toolbox.searchItem;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      AdaptiveToolboxComponent.prototype.afterRender = function () {
+          var _a;
+          if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+              this.toolbox.afterRender(this.container.nativeElement);
+          }
+      };
+      AdaptiveToolboxComponent.prototype.ngAfterViewInit = function () {
+          this.afterRender();
+      };
+      AdaptiveToolboxComponent.prototype.ngAfterViewChecked = function () {
+          _super.prototype.ngAfterViewChecked.call(this);
+          this.afterRender();
+      };
+      AdaptiveToolboxComponent.prototype.afterUpdate = function (isSync) {
+          _super.prototype.afterUpdate.call(this, isSync);
+          this.afterRender();
+      };
+      AdaptiveToolboxComponent.prototype.getModel = function () {
+          return this.toolbox;
+      };
+      AdaptiveToolboxComponent.prototype.ngOnDestroy = function () {
+          this.toolbox.beforeDestroy();
+          _super.prototype.ngOnDestroy.call(this);
+      };
+      AdaptiveToolboxComponent.prototype.trackItemBy = function (_, item) {
+          return item.renderedId;
+      };
+      return AdaptiveToolboxComponent;
+  }(i1.BaseAngular));
+  AdaptiveToolboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AdaptiveToolboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  AdaptiveToolboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AdaptiveToolboxComponent, selector: "svc-toolbox", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"toolbox.classNames\" #container [style]=\"toolbox.getRootStyle()\">\n    <div (focusout)=\"toolbox.focusOut($event)\" class=\"svc-toolbox__panel\">\n      <div *ngIf=\"toolbox.showSearch\" class=\"svc-toolbox__search-container\">\n        <ng-container *ngIf=\"toolbox.isCompactRendered\">\n          <svc-toolbox-tool [creator]=\"creator\" [item]=\"searchItem\" [parentModel]=\"toolbox\"\n            [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n        </ng-container>\n        <svc-search [model]=\"toolbox.searchManager\"></svc-search>\n        <div class=\"svc-toolbox__category-separator svc-toolbox__category-separator--search\"></div>\n      </div>\n      <div *ngIf=\"toolbox.showPlaceholder\" class=\"svc-toolbox__placeholder\">{{toolbox.toolboxNoResultsFound}}</div>\n      <sv-scroll>\n        <ng-container *ngIf=\"!toolbox.showInSingleCategory\">\n          <ng-container *ngFor=\"let category of toolbox.categories\">\n            <ng-template [component]=\"{name: 'svc-toolbox-category', data: { category: category, toolbox: toolbox }}\"></ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"toolbox.showInSingleCategory\">\n          <div class=\"svc-toolbox__category\">\n            <ng-container *ngFor=\"let item of toolbox.renderedActions;  trackBy: trackItemBy\">\n              <svc-toolbox-tool [creator]=\"creator\" [item]=\"item\" [parentModel]=\"toolbox\"\n                [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n            </ng-container>\n          </div>\n        </ng-container>\n      </sv-scroll>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }, { type: SearchComponent, selector: "svc-search", inputs: ["model"] }, { type: i1__namespace.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AdaptiveToolboxComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-toolbox",
+                      templateUrl: "./adaptive-toolbox.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }], container: [{
+                  type: i0.ViewChild,
+                  args: ["container"]
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-toolbox", AdaptiveToolboxComponent);
+
   var ToolboxItemComponent = /** @class */ (function (_super) {
       __extends(ToolboxItemComponent, _super);
       function ToolboxItemComponent() {
@@ -2680,6 +2652,35 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-toolbox-list", ToolboxListComponent);
 
+  var ToolboxCategoryComponent = /** @class */ (function (_super) {
+      __extends(ToolboxCategoryComponent, _super);
+      function ToolboxCategoryComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      ToolboxCategoryComponent.prototype.getModel = function () {
+          return this.category;
+      };
+      ToolboxCategoryComponent.prototype.trackItemBy = function (_, item) {
+          return item.renderedId;
+      };
+      return ToolboxCategoryComponent;
+  }(i1.BaseAngular));
+  ToolboxCategoryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxCategoryComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ToolboxCategoryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-toolbox__category\" [class.svc-toolbox__category--collapsed]=\"category.collapsed\"\n    [class.svc-toolbox__category--empty]=\"category.empty\">\n    <div class=\"svc-toolbox__category-header-wrapper\">\n      <div class=\"svc-toolbox__category-header\"\n        (click)=\"category.toggleState()\" [key2click] [class.svc-toolbox__category-header--collapsed]=\"toolbox.canCollapseCategories\" >\n        <span class=\"svc-toolbox__category-title\">{{category.title}}</span>\n        <div *ngIf=\"toolbox.canCollapseCategories\" class=\"svc-toolbox__category-header__controls\">\n          <svg [iconName]=\"category.iconName\" [class]=\"category.iconClassName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n      <ng-container *ngFor=\"let item of category.items; trackBy: trackItemBy\">\n        <svc-toolbox-tool [item]=\"item\" [creator]=\"toolbox.creator\" [parentModel]=\"toolbox\" [isCompact]=\"false\" ></svc-toolbox-tool>\n      </ng-container>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: ToolboxCategoryComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-toolbox-category ",
+                      templateUrl: "./toolbox-category.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { category: [{
+                  type: i0.Input
+              }], toolbox: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-toolbox-category", ToolboxCategoryComponent);
+
   var StringEditorComponent = /** @class */ (function (_super) {
       __extends(StringEditorComponent, _super);
       function StringEditorComponent(cdr, vcr, ngZone) {