survey-creator-angular 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,7 +6,7 @@ import * as i3 from '@angular/forms';
6
6
  import { FormsModule } from '@angular/forms';
7
7
  import * as i1 from 'survey-angular-ui';
8
8
  import { BaseAngular, AngularComponentFactory, SurveyContentComponent, EmbeddedViewContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
9
- import { PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
9
+ import { cssVariablesToString, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
10
10
  import { getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
11
11
 
12
12
  class TabbedMenuItemWrapperComponent extends BaseAngular {
@@ -175,9 +175,12 @@ class CreatorComponent extends BaseAngular {
175
175
  trackTabBy(_, tab) {
176
176
  return tab.id;
177
177
  }
178
+ get themeVariablesString() {
179
+ return cssVariablesToString(this.creator.themeVariables);
180
+ }
178
181
  }
179
182
  CreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
180
- CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorComponent, selector: "survey-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n <sv-ng-modal-container></sv-ng-modal-container>\n <div [class]=\"creator.getRootCss()\" [style]=\"creator.themeVariables\" #container>\n <div>\n <sv-svg-bundle></sv-svg-bundle>\n </div>\n <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n <div class=\"svc-flex-row svc-full-container\"\n [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n <div class=\"svc-top-bar\">\n <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n </div>\n <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n </div>\n </div>\n <div class=\"svc-creator__content-wrapper svc-flex-row\"\n [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n <div class=\"svc-creator__content-holder svc-flex-column\">\n <ng-container *ngFor=\"let tab of visibleTabs; trackBy: trackTabBy\">\n <div role=\"tabpanel\" class=\"svc-creator-tab\" [attr.id]=\"'scrollableDiv-' + tab.id\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n <ng-template\n [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n </div>\n </div>\n </div>\n <svc-side-bar [model]=\"creator.sidebar\" *ngIf=\"creator.isSidebarVisible\"></svc-side-bar>\n </div>\n <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n <span class=\"svc-creator__non-commercial-text\" [innerHTML]=\"creator.licenseText | safeHtml\"></span>\n </div>\n <sv-notifier [notifier]=\"creator.notifier\"></sv-notifier>\n </div>\n </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
183
+ CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorComponent, selector: "survey-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n <sv-ng-modal-container></sv-ng-modal-container>\n <div [class]=\"creator.getRootCss()\" [attr.style]=\"themeVariablesString\" #container>\n <div>\n <sv-svg-bundle></sv-svg-bundle>\n </div>\n <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n <div class=\"svc-flex-row svc-full-container\"\n [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n <div class=\"svc-top-bar\">\n <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n </div>\n <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n </div>\n </div>\n <div class=\"svc-creator__content-wrapper svc-flex-row\"\n [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n <div class=\"svc-creator__content-holder svc-flex-column\">\n <ng-container *ngFor=\"let tab of visibleTabs; trackBy: trackTabBy\">\n <div role=\"tabpanel\" class=\"svc-creator-tab\" [attr.id]=\"'scrollableDiv-' + tab.id\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n <ng-template\n [component]=\"{ name: tab.componentContent, data: { data: creator, model: tab.data.model } }\"></ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n </div>\n </div>\n </div>\n <svc-side-bar [model]=\"creator.sidebar\" *ngIf=\"creator.isSidebarVisible\"></svc-side-bar>\n </div>\n <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n <span class=\"svc-creator__non-commercial-text\" [innerHTML]=\"creator.licenseText | safeHtml\"></span>\n </div>\n <sv-notifier [notifier]=\"creator.notifier\"></sv-notifier>\n </div>\n </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
181
184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, decorators: [{
182
185
  type: Component,
183
186
  args: [{
@@ -401,9 +404,13 @@ class DesignerSurveyComponent extends BaseAngular {
401
404
  trackPageBy(index, page) {
402
405
  return page.id;
403
406
  }
407
+ get surfaceCssVariablesString() {
408
+ const styles = Object.assign(Object.assign({}, this.model.surfaceCssVariables), { ["max-width"]: this.survey.renderedWidth || "" });
409
+ return cssVariablesToString(styles);
410
+ }
404
411
  }
405
412
  DesignerSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
406
- DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.designerCss\" [style.maxWidth]=\"survey.renderedWidth\" [style]=\"model.surfaceCssVariables\">\n <div *ngIf=\"creator.showSurveyHeader\" class=\"svc-designer-header\">\n <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n </div>\n\n <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n <ng-container *ngFor=\"let page of model.pages; trackBy: trackPageBy \">\n <svc-page-wrapper [page]=\"page\" [creator]=\"creator\" [isGhost]=\"model.newPage == page\" [className]=\"'svc-page'\"></svc-page-wrapper>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"model.showSurfaceTools\" class=\"svc-tab-designer__tools\">\n <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n </svc-page-navigator>\n </div>\n <div *ngIf=\"model.showSurfaceToolbar\" class=\"svc-tab-designer__toolbar\">\n <sv-action-bar [model]=\"model.surfaceToolbar\"></sv-action-bar>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: ["page", "isGhost", "creator", "className"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
413
+ DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.designerCss\" [attr.style]=\"surfaceCssVariablesString\">\n <div *ngIf=\"creator.showSurveyHeader\" class=\"svc-designer-header\">\n <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n </div>\n\n <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n <ng-container *ngFor=\"let page of model.pages; trackBy: trackPageBy \">\n <svc-page-wrapper [page]=\"page\" [creator]=\"creator\" [isGhost]=\"model.newPage == page\" [className]=\"'svc-page'\"></svc-page-wrapper>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"model.showSurfaceTools\" class=\"svc-tab-designer__tools\">\n <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n </svc-page-navigator>\n </div>\n <div *ngIf=\"model.showSurfaceToolbar\" class=\"svc-tab-designer__toolbar\">\n <sv-action-bar [model]=\"model.surfaceToolbar\"></sv-action-bar>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: ["page", "isGhost", "creator", "className"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
407
414
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, decorators: [{
408
415
  type: Component,
409
416
  args: [{
@@ -521,7 +528,7 @@ class TabControlComponent extends BaseAngular {
521
528
  }
522
529
  }
523
530
  TabControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
524
- TabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabControlComponent, selector: "svc-tab-control", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.sideBarClassName\">\n <div class=\"svc-sidebar-tabs__top-container\">\n <div class=\"svc-sidebar-tabs__collapse-button\">\n <svc-tab-button [model]=\"model.expandCollapseAction\"></svc-tab-button>\n </div>\n <div class=\"svc-sidebar-tabs__separator\">\n <div></div>\n </div>\n <sv-scroll>\n <div class=\"svc-sidebar-tabs__items\">\n <svc-tabs [model]=\"model.topToolbar\"></svc-tabs>\n </div>\n </sv-scroll>\n </div>\n <div class=\"svc-sidebar-tabs__bottom-container\">\n <div class=\"svc-sidebar-tabs__items\">\n <svc-tabs [model]=\"model.bottomToolbar\"></svc-tabs>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", inputs: ["model"] }, { type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: TabsComponent, selector: "svc-tabs", inputs: ["model"] }] });
531
+ TabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabControlComponent, selector: "svc-tab-control", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.sideBarClassName\">\n <div class=\"svc-sidebar-tabs__top-container\">\n <div class=\"svc-sidebar-tabs__collapse-button\">\n <svc-tab-button [model]=\"model.expandCollapseAction\"></svc-tab-button>\n </div>\n <div class=\"svc-sidebar-tabs__separator\">\n <div></div>\n </div>\n <sv-scroll>\n <div class=\"svc-sidebar-tabs__items\">\n <svc-tabs [model]=\"model.topToolbar\"></svc-tabs>\n </div>\n </sv-scroll>\n </div>\n <div class=\"svc-sidebar-tabs__bottom-container\">\n <div class=\"svc-sidebar-tabs__items\">\n <sv-action-bar [model]=\"model.bottomToolbar\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", inputs: ["model"] }, { type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: TabsComponent, selector: "svc-tabs", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }] });
525
532
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, decorators: [{
526
533
  type: Component,
527
534
  args: [{
@@ -1782,7 +1789,7 @@ class ToolboxCategoryComponent extends BaseAngular {
1782
1789
  }
1783
1790
  }
1784
1791
  ToolboxCategoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1785
- ToolboxCategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0, 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.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.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1792
+ ToolboxCategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0, 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\" [model]=\"category.locTitle\" sv-ng-string></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.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.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.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1786
1793
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxCategoryComponent, decorators: [{
1787
1794
  type: Component,
1788
1795
  args: [{