Merge branch 'master' into bug/library-8680-ranking-wrap-item-text

# Conflicts: # packages/survey-creator-core/src/components/item-value.scss
surveyjs · Sep 16, 2024 · 0f3a846 · 0f3a846
2 parents 0938728 + 3f0c749
commit 0f3a846
Show file tree

Hide file tree

Showing 406 changed files with 5,582 additions and 1,257 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -163,6 +163,7 @@
 		"linebreak-style": [
 			"off",
 			"windows"
-		]
+		],
+ 		"react/no-is-mounted": "off"
 	}
-}
+}
diff --git a/docs/customize-question-types.md b/docs/customize-question-types.md
@@ -9,7 +9,6 @@ To customize question types, you need to make changes to Form Library as well as
 
 - [Create Specialized Question Types](https://surveyjs.io/form-library/documentation/customize-question-types/create-specialized-question-types)
 - [Create Composite Question Types](https://surveyjs.io/form-library/documentation/customize-question-types/create-composite-question-types)
-- [Create Custom Widgets](https://surveyjs.io/form-library/documentation/customize-question-types/create-custom-widgets)
 - [Integrate Third-Party Angular Components](https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-angular)
 - [Integrate Third-Party React Components](https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-react)
 - [Integrate Third-Party Vue 3 Components](/form-library/documentation/customize-question-types/third-party-component-integration-vue)
diff --git a/docs/get-started-html-css-javascript.md b/docs/get-started-html-css-javascript.md
@@ -15,7 +15,7 @@ This step-by-step tutorial will help you get started with the [Survey Creator](h
 
 ## Link Resources
 
-Survey Creator consists of two parts: `survey-creator-core` (platform-independent code) and `survey-creator-js` (view models). Each part includes style sheets and scripts. Insert links to these resources within the `<head>` tag on your HTML page as shown below. Survey Creator also requires [SurveyJS Form Library resources](http://localhost:62946/form-library/documentation/get-started-html-css-javascript#link-surveyjs-resources). Link them _before_ the Survey Creator resources:
+Survey Creator consists of two parts: `survey-creator-core` (platform-independent code) and `survey-creator-js` (view models). Each part includes style sheets and scripts. Insert links to these resources within the `<head>` tag on your HTML page as shown below. Survey Creator also requires [SurveyJS Form Library resources](/form-library/documentation/get-started-html-css-javascript#link-surveyjs-resources) and a script with predefined theme configurations (if you are going to use [Theme Editor](https://surveyjs.io/survey-creator/documentation/theme-editor)). Link them _before_ the Survey Creator resources:
 
 ```html
 <head>
@@ -24,6 +24,9 @@ Survey Creator consists of two parts: `survey-creator-core` (platform-independen
     <link  href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
     <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
     <script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
+
+    <!-- (Optional) Predefined theme configurations -->
+    <script src="https://unpkg.com/survey-core/themes/index.min.js"></script>
 
     <!-- Survey Creator resources -->
     <link  href="https://unpkg.com/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet">

diff --git a/docs/toolbox-customization.md b/docs/toolbox-customization.md
@@ -13,6 +13,7 @@ The Toolbox contains available question and panel types. Users can click questio
 - [Limit Available Question and Panel Types](#limit-available-question-and-panel-types)
 - [Group Toolbox Items by Categories](#group-toolbox-items-by-categories)
 - [Customize Predefined Toolbox Items](#customize-predefined-toolbox-items)
+- [Manage Toolbox Subitems](#manage-toolbox-subitems)
 - [Add a Custom Toolbox Item](#add-a-custom-toolbox-item)
 
 ## Full and Compact Modes
@@ -144,7 +145,7 @@ Toolbox items can have nested items, or "subitems". They appear when users hover
 
 <img src="./images/toolbox-subitems.png" alt="Survey Creator: Toolbox subitems" width="953" height="690">
 
-To create a custom subitem, pass its [configuration object](/survey-creator/documentation/api-reference/iquestiontoolboxitem) to the [`addSubitem(subitem, index)`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#addSubitem) method. Call this method on a toolbox item instance to which you want to add it the subitem. For instance, the following code adds a "Limited to 280 characters" subitem to the Long Text toolbox item:
+To create a custom subitem, pass its [configuration object](/survey-creator/documentation/api-reference/iquestiontoolboxitem) to the [`addSubitem(subitem, index)`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#addSubitem) method. Call this method on a toolbox item instance to which you want to add the subitem. For instance, the following code adds a "Limited to 280 characters" subitem to the Long Text toolbox item:
 
 ```js
 import { SurveyCreatorModel } from "survey-creator-core";
@@ -162,7 +163,7 @@ longTextItem.addSubitem({
 });
 ```
 
-<!-- TODO: Add demo -->
+[View Demo](/survey-creator/examples/manage-toolbox-subitems/ (linkStyle))
 
 If you want to remove a specific subitem, call the [`removeSubitem(subitem)`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#removeSubitem) method on a toolbox item instance. You can also remove all subitems of a toolbox item by calling the [`clearSubitems()`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#clearSubitems) method:
 

diff --git a/packages/creator-presets-react/index.html b/packages/creator-presets-react/index.html
@@ -28,9 +28,7 @@
     <div id="root" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script type="text/babel">
-    Survey.slk("YjA3ZGFkZTMtNjU5NS00YTYxLTkzZmEtYWJiOThjMWVhNjk3OzE9MjAzNC0xMC0xNiwyPTIwMzQtMTAtMTYsND0yMDM0LTEwLTE2");
     function PresetComponent() {
-        debugger;
         const editor = new SurveyCreatorPresets.CreatorPresetEditor();
         return (<SurveyCreatorPresets.CreatorPresetEditorComponent editor={editor} />);
     }

diff --git a/packages/creator-presets-react/src/CreatorPresetEditor.tsx b/packages/creator-presets-react/src/CreatorPresetEditor.tsx
@@ -7,15 +7,15 @@ import { CreatorPresetEditorModel } from "creator-presets-core";
 import { PresetsHeaderComponent } from "./Header";
 
 const presetApplyText = "Use the following code to apply the preset:";
-const presetApplyCode = `import { SurveyCreatorModel, SurveyCreatorPreset } from "survey-creator-core";
+const presetApplyCode = `import { SurveyCreatorModel, CreatorPreset } from "survey-creator-core";
 const creator = new SurveyCreatorModel({ ... });
 
 const presetJson = {
   // Copy the JSON object from below
 }
 
-const preset = new SurveyCreatorPreset(presetJson);
-preset.applyTo(creator);
+const preset = new CreatorPreset(presetJson);
+preset.apply(creator);
 `;
 
 export class CreatorPresetEditor extends CreatorPresetEditorModel {

diff --git a/packages/survey-creator-angular/CHANGELOG.md b/packages/survey-creator-angular/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.12.1](https://github.com/surveyjs/survey-creator/compare/v1.11.14...v1.12.1) (2024-09-10)
+
+### [1.11.14](https://github.com/surveyjs/survey-creator/compare/v1.11.13...v1.11.14) (2024-09-04)
+
 ### [1.11.13](https://github.com/surveyjs/survey-creator/compare/v1.11.12...v1.11.13) (2024-08-27)
 
 ### [1.11.12](https://github.com/surveyjs/survey-creator/compare/v1.11.11...v1.11.12) (2024-08-20)

diff --git a/packages/survey-creator-angular/package.json b/packages/survey-creator-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-angular",
-  "version": "1.11.13",
+  "version": "1.12.1",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "homepage": "https://surveyjs.io/Overview/Survey-Creator",
   "license": "https://surveyjs.io/Licenses#SurveyCreator",

diff --git a/packages/survey-creator-angular/src/adorners/item-value.component.html b/packages/survey-creator-angular/src/adorners/item-value.component.html
@@ -1,7 +1,8 @@
 <ng-template #template>
   <div class="svc-item-value-wrapper" (pointerdown)="adorner.onPointerDown($event)"
     [attr.data-sv-drop-target-item-value]="adorner.isDraggable ? item.value : null"
-    [ngClass]="{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}">
+    [ngClass]="{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}"
+    #container>
     <div class="svc-item-value__ghost"></div>
     <div class="svc-item-value-controls">
       <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">

diff --git a/packages/survey-creator-angular/src/adorners/item-value.component.ts b/packages/survey-creator-angular/src/adorners/item-value.component.ts
@@ -1,5 +1,5 @@
 
-import { ChangeDetectorRef, Component, Input, ViewContainerRef } from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild, ViewContainerRef } from "@angular/core";
 import { AngularComponentFactory, BaseAngular, EmbeddedViewContentComponent } from "survey-angular-ui";
 import { ItemValue, PageModel, PanelModel, Question, QuestionSelectBase, SurveyModel } from "survey-core";
 import { SurveyCreatorModel, ItemValueWrapperViewModel, QuestionAdornerViewModel } from "survey-creator-core";
@@ -10,10 +10,12 @@ import { CreatorModelComponent } from "../creator-model.component";
   templateUrl: "./item-value.component.html",
   styles: [":host { display: none; }"]
 })
-export class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueWrapperViewModel> {
+export class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueWrapperViewModel> implements AfterViewInit {
   @Input() componentName!: string;
   @Input() componentData!: any;
+  @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>
   public adorner!: ItemValueWrapperViewModel;
+  private prevItem!: ItemValue;
   private get creator(): SurveyCreatorModel {
     return this.componentData.data.creator;
   }
@@ -26,9 +28,26 @@ export class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueW
   public onBlur(event: any) {
     this.adorner.onFocusOut(event);
   }
+
+  private setupContainer() {
+    if (this.item && this.container?.nativeElement) {
+      this.item.setRootElement(this.container.nativeElement);
+    }
+  }
+  private cleanContainer(item: ItemValue) {
+    if(!!item) {
+      item.setRootElement(undefined as any);
+    }
+  }
+
   protected createModel(): void {
     if (this.componentData) {
       this.adorner = new ItemValueWrapperViewModel(this.creator, this.question, this.item);
+      if(this.prevItem !== this.item) {
+        this.setupContainer();
+        this.cleanContainer(this.prevItem);
+        this.prevItem = this.item;
+      }
     }
   }
   protected getPropertiesToTrack(): string[] {
@@ -40,6 +59,10 @@ export class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueW
   override ngOnDestroy(): void {
     super.ngOnDestroy();
     this.adorner.dispose();
+    this.cleanContainer(this.item);
+  }
+  ngAfterViewInit() {
+    this.setupContainer();
   }
 }
 

diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts
@@ -9,7 +9,15 @@ import { TabbedMenuItemComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu-i
 import { TabbledMenuComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu.component";
 import { TabbedMenuItemWrapperComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu-item-wrapper.component";
 import { SidebarComponent } from "./side-bar/side-bar.component";
-import { SidebarTabComponent } from "./side-bar/side-bar-tab.component";
+import { SidebarPageComponent } from "./side-bar/side-bar-page.component";
+
+import { TabButtonComponent } from "./tab-control/tab-button.component";
+import { TabsComponent } from "./tab-control/tabs.component";
+import { TabControlComponent } from "./tab-control/tab-control.component";
+import { SidebarPropertyGridHeaderComponent } from "./tab-control/side-bar-property-grid-header.component"
+import { PropertyGridPlaceholderComponent } from "./tab-control/property-grid-placeholder.component";
+import { SidebarPropertyGridPlaceholderHeaderComponent } from "./tab-control/property-grid-placeholder-header.component";
+
 import { ObjectSelectorComponent } from "./property-panel/object-selector.component";
 import { PropertyGridComponent } from "./property-panel/property-grid.component";
 import { SearchComponent } from "./property-panel/search.component";
@@ -69,7 +77,7 @@ import { JsonErrorItemComponent } from "./tabs/json/json-error-item.component";
 import { TranslateFromAction } from "./tabs/translation/translate-from-action.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -79,7 +87,7 @@ import { TranslateFromAction } from "./tabs/translation/translate-from-action.co
     CommonModule, FormsModule, SurveyModule
   ],
   exports: [
-    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,

diff --git a/packages/survey-creator-angular/src/angular-ui.ts b/packages/survey-creator-angular/src/angular-ui.ts
@@ -6,7 +6,15 @@ export * from "./tabbed-menu/tabbed-menu/tabbed-menu-item.component";
 export * from "./tabbed-menu/tabbed-menu/tabbed-menu.component";
 export * from "./tabbed-menu/tabbed-menu/tabbed-menu-item-wrapper.component";
 export * from "./side-bar/side-bar.component";
-export * from "./side-bar/side-bar-tab.component";
+export * from "./side-bar/side-bar-page.component";
+
+export * from "./tab-control/tab-button.component";
+export * from "./tab-control/tabs.component";
+export * from "./tab-control/tab-control.component";
+export * from "./tab-control/side-bar-property-grid-header.component";
+export * from "./tab-control/property-grid-placeholder.component";
+export * from "./tab-control/property-grid-placeholder-header.component";
+
 export * from "./property-panel/object-selector.component";
 export * from "./property-panel/property-grid.component";
 export * from "./property-panel/search.component";

diff --git a/packages/survey-creator-angular/src/creator.component.html b/packages/survey-creator-angular/src/creator.component.html
@@ -1,7 +1,6 @@
 <ng-container *ngIf="!creator.isCreatorDisposed">
   <sv-ng-modal-container></sv-ng-modal-container>
-  <div class="svc-creator" [class.svc-creator--mobile]="creator.isMobileView"
-    [class.svc-creator--touch]="creator.isTouch" #container>
+  <div [class]="creator.getRootCss()" #container>
     <div>
       <sv-svg-bundle></sv-svg-bundle>
     </div>

diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
@@ -6,6 +6,10 @@
 
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }"
       (click)="adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null">
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging && adorner.element.isInteractiveDesignElement" class="svc-question__drag-area"
         (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"

diff --git a/packages/survey-creator-angular/src/property-panel/object-selector.component.ts b/packages/survey-creator-angular/src/property-panel/object-selector.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from "@angular/core";
 import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
-import { ObjectSelectorModel, SidebarTabModel } from "survey-creator-core";
+import { ObjectSelectorModel } from "survey-creator-core";
 
 @Component({
   selector: "svc-object-selector",

diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
@@ -5,6 +5,10 @@
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }" (click)="adorner.select(adorner, $event)">
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
           sv-ng-svg-icon></svg>