survey-creator-angular 3.0.0-beta.9 → 3.0.1

package/fesm2015/survey-creator-angular.js

@@ -5,10 +5,26 @@ import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from 'survey-angular-ui';
-import { BaseAngular, AngularComponentFactory, SurveyContentComponent, EmbeddedViewContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
-import { cssVariablesToString, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, PanelAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
+import { EmbeddedViewContentComponent, AngularComponentFactory, BaseAngular, SurveyContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
+import { cssVariablesToString, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, PanelAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, TranslationDropdownViewModel, LogoImageViewModel, getTranslationLocaleProgress, translationLocaleItemComponentName } from 'survey-creator-core';
 import { getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
 
+class ComponentContainerComponent extends EmbeddedViewContentComponent {
+}
+ComponentContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ComponentContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-template #elementsTemplate>\n    <ng-template *ngFor=\"let element of model.elements\"\n      [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </ng-template>\n\n  <ng-container *ngIf=\"model.wrapped; else unwrappedTemplate\">\n    <div [class]=\"model.cssClass\">\n      <sv-scroll *ngIf=\"model.scrollable; else wrappedPlainTemplate\">\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </sv-scroll>\n      <ng-template #wrappedPlainTemplate>\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-template #unwrappedTemplate>\n    <sv-scroll *ngIf=\"model.scrollable; else unwrappedPlainTemplate\">\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </sv-scroll>\n    <ng-template #unwrappedPlainTemplate>\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </ng-template>\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-component-container",
+                    templateUrl: "./component-container.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-component-container", ComponentContainerComponent);
+
 class TabbedMenuItemWrapperComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -149,6 +165,13 @@ class CreatorComponent extends BaseAngular {
     get creator() {
         return this.model;
     }
+    // The collaboration strip is a ComponentContainerModel contributed by the
+    // plugin. `collabBar` is typed as Base in creator-core to keep the creator
+    // free of a dependency on the plugin, hence the cast.
+    get collabBarContainer() {
+        const bar = this.model.collabBar;
+        return !!bar ? bar.container : undefined;
+    }
     getShouldReattachChangeDetector() {
         return false;
     }
@@ -180,7 +203,7 @@ class CreatorComponent extends BaseAngular {
     }
 }
 CreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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 *ngIf=\"!!activeTab\">\n                <div role=\"tabpanel\" class=\"svc-creator-tab\" [attr.id]=\"'scrollableDiv-' + activeTab.id\"\n                  [attr.aria-labelledby]=\"'tab-' + activeTab.id\"\n                  [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template\n                    [component]=\"{ name: activeTab.componentContent, data: { data: creator, model: activeTab.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: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
+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      <svc-component-container *ngIf=\"collabBarContainer\" [model]=\"collabBarContainer\"></svc-component-container>\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 *ngIf=\"!!activeTab\">\n                <div role=\"tabpanel\" class=\"svc-creator-tab\" [attr.id]=\"'scrollableDiv-' + activeTab.id\"\n                  [attr.aria-labelledby]=\"'tab-' + activeTab.id\"\n                  [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template\n                    [component]=\"{ name: activeTab.componentContent, data: { data: creator, model: activeTab.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: ComponentContainerComponent, selector: "svc-component-container", inputs: ["model"] }, { 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: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -599,22 +622,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-side-bar-header", SidebarHeaderComponent);
 
-class ComponentContainerComponent extends EmbeddedViewContentComponent {
-}
-ComponentContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ComponentContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-template #elementsTemplate>\n    <ng-template *ngFor=\"let element of model.elements\"\n      [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </ng-template>\n\n  <ng-container *ngIf=\"model.wrapped; else unwrappedTemplate\">\n    <div [class]=\"model.cssClass\">\n      <sv-scroll *ngIf=\"model.scrollable; else wrappedPlainTemplate\">\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </sv-scroll>\n      <ng-template #wrappedPlainTemplate>\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-template #unwrappedTemplate>\n    <sv-scroll *ngIf=\"model.scrollable; else unwrappedPlainTemplate\">\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </sv-scroll>\n    <ng-template #unwrappedPlainTemplate>\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </ng-template>\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "svc-component-container",
-                    templateUrl: "./component-container.component.html",
-                    styles: [":host { display: none; }"]
-                }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
-AngularComponentFactory.Instance.registerComponent("svc-component-container", ComponentContainerComponent);
-
 class IconItemComponent extends EmbeddedViewContentComponent {
 }
 IconItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IconItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -866,6 +873,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-switcher", SwitcherComponent);
 
+// See the React CollabRow for what this renders. Presentation only, no events.
+class CollabRowComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+CollabRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollabRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CollabRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CollabRowComponent, selector: "svc-collab-row", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.visible\" [class]=\"model.rowCss\" [attr.role]=\"model.rowRole || null\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <span *ngIf=\"model.hasMarkerText\" [class]=\"model.markerCss\">{{ model.markerText }}</span>\n    <span *ngIf=\"!model.hasMarkerText && model.hasMarkerIcon\" class=\"svc-collab-row__icon\">\n      <svg [iconName]=\"model.markerIconName\" [size]=\"model.markerIconSize\" sv-ng-svg-icon></svg>\n    </span>\n    <span class=\"svc-collab-row__title\">{{ model.title }}</span>\n    <span *ngIf=\"model.hasSubtitle\" class=\"svc-collab-row__subtitle\">{{ model.subtitle }}</span>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollabRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-collab-row",
+                    templateUrl: "./collab-row.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-collab-row", CollabRowComponent);
+
+// See the React FloatingPanel for what this renders. Markup only: the root node
+// is handed to the model and the header's raw pointerdown is forwarded from the
+// template; geometry, listeners, focus and hiding all live in the model.
+class FloatingPanelComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (!!((_a = this.root) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.model.setComponentElement(this.root.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this.model.resetComponentElement();
+        super.ngOnDestroy();
+    }
+}
+FloatingPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloatingPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FloatingPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FloatingPanelComponent, selector: "svc-floating-panel", inputs: { model: "model" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #root [class]=\"model.rootCss\" [ngStyle]=\"model.style\" role=\"dialog\" [attr.aria-modal]=\"false\"\n    [attr.aria-labelledby]=\"model.titleId\" tabindex=\"-1\" (pointerdown)=\"model.bringToFront()\">\n    <div [class]=\"model.headerCss\" (pointerdown)=\"model.onPointerDown($event)\">\n      <span [id]=\"model.titleId\" class=\"svc-floating-panel__title\">{{ model.titleText }}</span>\n      <span class=\"svc-floating-panel__drag\" aria-hidden=\"true\">\n        <svg [iconName]=\"'icon-draghorizontal-24x16'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n      </span>\n      <sv-action-bar [model]=\"model.headerToolbar\"></sv-action-bar>\n    </div>\n    <div [class]=\"model.bodyCss\">\n      <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n    </div>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloatingPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-floating-panel",
+                    templateUrl: "./floating-panel.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], root: [{
+                type: ViewChild,
+                args: ["root"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-floating-panel", FloatingPanelComponent);
+
 class LinkValueQuestionComponent extends QuestionAngular {
     get clearCaption() {
         return editorLocalization.getString("pe.clear");
@@ -919,6 +981,22 @@ class TranslationTabComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
+    get sideBySideModel() {
+        return this.model.isSideBySideForms ? this.model : undefined;
+    }
+    // The setters also fire with undefined when *ngIf removes the panes, which detaches the listeners.
+    set sourceScrollContainer(ref) {
+        var _a;
+        (_a = this.sideBySideModel) === null || _a === void 0 ? void 0 : _a.setSourceScrollElement(ref ? ref.nativeElement : undefined);
+    }
+    set targetScrollContainer(ref) {
+        var _a;
+        (_a = this.sideBySideModel) === null || _a === void 0 ? void 0 : _a.setTargetScrollElement(ref ? ref.nativeElement : undefined);
+    }
+    // The strings-grid model: the tab model itself in the default mode and in the side-by-side grid view.
+    get stringsModel() {
+        return this.sideBySideModel ? undefined : this.model;
+    }
     // The strings survey is fully recreated on reset(). Its elements keep deterministic ids across
     // instances, so *ngFor's element trackBy would reuse the disposed survey's (lazy-skeleton) rows.
     // Keying the survey-content by the per-instance elementIdPrefix forces Angular to recreate it.
@@ -927,7 +1005,7 @@ class TranslationTabComponent extends BaseAngular {
     }
 }
 TranslationTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TranslationTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationTabComponent, selector: "svc-tab-translation", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-translation-tab\" [class]=\"model.isEmpty ? 'svc-translation-tab--empty' : ''\">\n    <svc-surface-placeholder *ngIf=\"model.isEmpty\" [name]=\"'translation'\"\n      [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.isEmpty\" class=\"st-content\">\n      <div class=\"svc-flex-column st-strings-wrapper\">\n        <div class=\"svc-flex-row st-strings-header\">\n          <ng-container *ngFor=\"let s of [model.stringsHeaderSurvey]; trackBy: trackStringsSurveyBy\">\n            <survey-content [model]=\"s\"></survey-content>\n          </ng-container>\n        </div>\n        <div class=\"svc-flex-row svc-plugin-tab__content st-strings\">\n          <ng-container *ngFor=\"let s of [model.stringsSurvey]; trackBy: trackStringsSurveyBy\">\n            <survey-content [model]=\"s\"></survey-content>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+TranslationTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationTabComponent, selector: "svc-tab-translation", inputs: { model: "model" }, viewQueries: [{ propertyName: "sourceScrollContainer", first: true, predicate: ["sourceScrollContainer"], descendants: true }, { propertyName: "targetScrollContainer", first: true, predicate: ["targetScrollContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-translation-tab\" [class]=\"model.isEmpty ? 'svc-translation-tab--empty' : ''\">\n    <svc-surface-placeholder *ngIf=\"model.isEmpty\" [name]=\"'translation'\"\n      [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <ng-container *ngIf=\"!model.isEmpty\">\n      <div *ngIf=\"stringsModel\" class=\"st-content\">\n        <div class=\"svc-flex-column st-strings-wrapper\">\n          <div class=\"svc-flex-row st-strings-header\">\n            <ng-container *ngFor=\"let s of [stringsModel.stringsHeaderSurvey]; trackBy: trackStringsSurveyBy\">\n              <survey-content [model]=\"s\"></survey-content>\n            </ng-container>\n          </div>\n          <div class=\"svc-flex-row svc-plugin-tab__content st-strings\">\n            <ng-container *ngFor=\"let s of [stringsModel.stringsSurvey]; trackBy: trackStringsSurveyBy\">\n              <survey-content [model]=\"s\"></survey-content>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"sideBySideModel\" class=\"st-side-by-side\"\n        [class]=\"sideBySideModel.targetSurvey ? '' : 'st-side-by-side--no-target'\">\n        <div class=\"st-side-by-side__source\" #sourceScrollContainer>\n          <ng-container *ngFor=\"let s of [sideBySideModel.sourceSurvey]; trackBy: trackStringsSurveyBy\">\n            <survey-content [model]=\"s\"></survey-content>\n          </ng-container>\n        </div>\n        <div *ngIf=\"sideBySideModel.targetSurvey\" class=\"st-side-by-side__target\" #targetScrollContainer>\n          <ng-container *ngFor=\"let s of [sideBySideModel.targetSurvey]; trackBy: trackStringsSurveyBy\">\n            <survey-content [model]=\"s\"></survey-content>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -937,6 +1015,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], propDecorators: { model: [{
                 type: Input
+            }], sourceScrollContainer: [{
+                type: ViewChild,
+                args: ["sourceScrollContainer"]
+            }], targetScrollContainer: [{
+                type: ViewChild,
+                args: ["targetScrollContainer"]
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-translation", TranslationTabComponent);
 
@@ -1498,7 +1582,7 @@ class QuestionDropdownAdornerDesignerComponent extends EmbeddedViewContentCompon
             componentData: {
                 question: this.question,
                 model: item,
-                inputType: "radio",
+                inputType: this.adorner.itemInputType,
                 data: this.question.getItemValueWrapperComponentData(item)
             }
         };
@@ -2222,6 +2306,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-rating-question-content", QuestionRatingAdornerDesignerComponent);
 
+// The flattened choice list of a dropdown/tagbox question in the translation side-by-side
+// panes. Chrome-free: no designer adorner and no itemvalue wrappers - the choice texts render
+// through the survey's string renderer (editable in the target pane, plain in the source one).
+class TranslationDropdownQuestionComponent extends CreatorModelComponent {
+    get question() {
+        return this.componentData.model;
+    }
+    createModel() {
+        if (this.componentData) {
+            if (!!this.adorner) {
+                this.adorner.dispose();
+            }
+            this.adorner = new TranslationDropdownViewModel(this.componentData.model, this.componentData.data ? this.componentData.data.translation : undefined);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["componentData"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (!!this.adorner) {
+            this.adorner.dispose();
+        }
+    }
+}
+TranslationDropdownQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationDropdownQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TranslationDropdownQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationDropdownQuestionComponent, selector: "svc-translation-dropdown-question", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  <div class=\"st-dropdown-choices--wrapper\">\n    <div class=\"svc-question__dropdown-choices\">\n      <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\">\n        <ng-template\n          [component]=\"{ name: 'sv-ng-selectbase-item', data: { question: question, model: item, inputType: adorner.itemInputType } }\">\n        </ng-template>\n      </div>\n    </div>\n    <ng-container *ngIf=\"adorner.needToCollapse\">\n      <ng-template [component]=\"{ name: 'sv-action-bar-item', data: { model: adorner.collapseAction } }\"></ng-template>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationDropdownQuestionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-translation-dropdown-question",
+                    templateUrl: "./translation-dropdown-question.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }], contentTempl: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-translation-dropdown-question", TranslationDropdownQuestionComponent);
+
 class CreatorLogoImageComponent extends CreatorModelComponent {
     createModel() {
         this.model = new LogoImageViewModel(this.creator, null);
@@ -2409,7 +2539,7 @@ class FileEditorButtonComponent extends BaseAngular {
     }
 }
 FileEditorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileEditorButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileEditorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileEditorButtonComponent, selector: "sv-ng-file-editor-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div>\n    <label [class]=\"model.getActionBarItemCss()\" [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonCaption\"\n      (click)=\"question.chooseFiles($event)\" [key2click]>\n      <svg [iconName]=\"model.iconName\" size=\"'auto'\" [title]=\"model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    </label>\n    <input type=\"file\" [disabled]=\"model.disabled\" [class]=\"question.cssClasses.fileInput\" [attr.id]=\"question.inputId\"\n        [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\"\n        [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [attr.multiple]=\"false\"\n        [title]=\"question.inputTitle\" [accept]=\"question.acceptedTypes\" (change)=\"question.onFileInputChange($event)\" tabindex=\"-1\">\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"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+FileEditorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileEditorButtonComponent, selector: "sv-ng-file-editor-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div>\n    <label [class]=\"model.getActionBarItemCss()\" [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonCaption\"\n      (click)=\"question.chooseFiles($event)\" [key2click]>\n      <svg [iconName]=\"model.iconName\" size=\"'auto'\" [title]=\"model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n      <span class=\"sv-visuallyhidden\">{{ question.chooseButtonCaption }}</span>\n    </label>\n    <input type=\"file\" [disabled]=\"model.disabled\" [class]=\"question.cssClasses.fileInput\" [attr.id]=\"question.inputId\"\n        [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\"\n        [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [attr.multiple]=\"false\"\n        [title]=\"question.inputTitle\" [accept]=\"question.acceptedTypes\" (change)=\"question.onFileInputChange($event)\" tabindex=\"-1\">\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"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileEditorButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2464,6 +2594,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-translate-from-action", TranslateFromAction);
 
+// An item of the target language dropdown: the language name and, at the right edge, how much of
+// the survey is already translated into it. The counts are precomputed on the choices themselves
+// (see updateTargetLocaleChoices) - a language with no translations carries none. The angular list
+// item passes the item itself as "model" (react and vue pass it as "item").
+class TranslationLocaleItemComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    get progress() {
+        return getTranslationLocaleProgress(this.model);
+    }
+}
+TranslationLocaleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationLocaleItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TranslationLocaleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationLocaleItemComponent, selector: "svc-translation-locale-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-translation-locale-item\">\n    <span class=\"svc-translation-locale-item__name\">\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </span>\n    <span *ngIf=\"!!progress\" class=\"svc-translation-locale-item__progress\">{{ progress }}</span>\n  </div>\n</ng-template>\n", styles: [":host { display: none }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationLocaleItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-translation-locale-item",
+                    templateUrl: "./translation-locale-item.component.html",
+                    styles: [":host { display: none }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent(translationLocaleItemComponentName, TranslationLocaleItemComponent);
+
 class ContainerTabComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -2505,17 +2661,17 @@ AngularComponentFactory.Instance.registerComponent("svc-image-item-drag-action",
 class SurveyCreatorModule {
 }
 SurveyCreatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, CollabRowComponent, FloatingPanelComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
-        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent, TranslationDropdownQuestionComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-        TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
-        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+        TranslateFromAction, TranslationLocaleItemComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, CollabRowComponent, FloatingPanelComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
-        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent, TranslationDropdownQuestionComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, TranslateFromAction, TranslationLocaleItemComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
         IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent] });
 SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, providers: [], imports: [[
             CommonModule, FormsModule, SurveyModule
@@ -2523,22 +2679,22 @@ SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, CollabRowComponent, FloatingPanelComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
-                        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+                        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent, TranslationDropdownQuestionComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
                         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-                        TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+                        TranslateFromAction, TranslationLocaleItemComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
                         IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent],
                     imports: [
                         CommonModule, FormsModule, SurveyModule
                     ],
                     exports: [
-                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, CollabRowComponent, FloatingPanelComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
-                        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+                        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent, TranslationDropdownQuestionComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, SwatchComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, TranslateFromAction, TranslationLocaleItemComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
                         IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent
                     ],
                     providers: [],
@@ -2549,5 +2705,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, ComponentContainerComponent, ContainerTabComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, FileEditorButtonComponent, IconItemComponent, ImageItemDragActionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageElementContentComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionElementContentComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SearchComponent, SideBarLaunchCardComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, SpinEditorButtonComponent, StringEditorComponent, SurfacePlaceholderComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwatchComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
+export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, CellQuestionComponent, CellQuestionDropdownComponent, CollabRowComponent, ColorItemComponent, ComponentContainerComponent, ContainerTabComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, FileEditorButtonComponent, FloatingPanelComponent, IconItemComponent, ImageItemDragActionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageElementContentComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionElementContentComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SearchComponent, SideBarLaunchCardComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, SpinEditorButtonComponent, StringEditorComponent, SurfacePlaceholderComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwatchComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationDropdownQuestionComponent, TranslationLocaleItemComponent, TranslationSkeletonComponent, TranslationTabComponent };
 //# sourceMappingURL=survey-creator-angular.js.map