Merge branch 'master' into bug/6441-ranking-selecttorank-change-area-…

…placeholders

packages/survey-angular-ui/src/components/progress/toc/progress.component.html

@@ -1,5 +1,9 @@
 <ng-template #template>
-  <div [class]="containerCss">
-    <sv-ng-list [model]="listModel"></sv-ng-list>
-  </div>
+  <div [class]="tocModel.containerCss">
+    <sv-ng-list *ngIf="!tocModel.isMobile" [model]="tocModel.listModel"></sv-ng-list>
+    <div *ngIf="tocModel.isMobile" (click)="tocModel.togglePopup()" data-bind="key2click">
+        <svg [iconName]="tocModel.icon" [size]="24" sv-ng-svg-icon></svg>
+        <sv-ng-popup [popupModel]="tocModel.popupModel"></sv-ng-popup>
+    </div>
+  </div>  
 </ng-template>

packages/survey-angular-ui/src/components/progress/toc/progress.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges, ChangeDetectorRef } from "@angular/core";
 import { EmbeddedViewContentComponent } from "../../../embedded-view-content.component";
-import { createTOCListModel, getTocRootCss, ListModel, SurveyModel } from "survey-core";
+import { createTOCListModel, getTocRootCss, ListModel, SurveyModel, TOCModel } from "survey-core";
 import { AngularComponentFactory } from "../../../component-factory";
 
 @Component({
@@ -9,12 +9,10 @@ import { AngularComponentFactory } from "../../../component-factory";
   styles: [":host { display: none; }"]
 })
 export class ProgressTocComponent extends EmbeddedViewContentComponent implements OnChanges, OnInit {
-  public listModel!: ListModel;
-  public containerCss = "sv_progress-toc";
+  public tocModel!: TOCModel;
   @Input() model!: SurveyModel;
   private createProgressTOCModel() {
-    this.containerCss = getTocRootCss(this.model);
-    this.listModel = createTOCListModel(this.model);
+    this.tocModel = new TOCModel(this.model);
   }
   override ngOnInit(): void {
     super.ngOnInit();

src/common-styles/sv-progress-toc.scss

@@ -1,12 +1,12 @@
 @import "../defaultV2-theme/variables.scss";
 
 .sv_progress-toc {
-  padding: 8px;
+  padding: calcSize(1);
   max-width: 336px;
   height: 100%;
   background: #FFFFFF;
   box-sizing: border-box;
-  min-width: 256px;
+  min-width: calcSize(32);
 
   .sv-list__item.sv-list__item--selected .sv-list__item-body {
     background: rgba(25, 179, 148, 0.1);
@@ -19,11 +19,11 @@
   }
 
   .sv-list__item-body {
-    padding-inline-start: 16px;
-    padding-inline-end: 16px;
+    padding-inline-start: calcSize(2);
+    padding-inline-end: calcSize(2);
     border-radius: calcCornerRadius(1);
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: calcSize(1.5);
+    padding-bottom: calcSize(1.5);
   }
 }
 
@@ -33,4 +33,25 @@
 
 .sv_progress-toc--right {
   border-left: 1px solid #D6D6D6;
+}
+
+.sv_progress-toc--mobile {
+  position: fixed;
+  top: calcSize(4);
+  right: calcSize(4);
+  width: auto;
+  min-width: auto;
+  height: auto;
+  background-color: transparent;
+  z-index: 15;
+  border-radius: calcSize(3);
+
+  &>div {
+    width: calcSize(3);
+    height: calcSize(3);
+  }
+
+  &:hover {
+    background-color: $background-dim;
+  }
 }

src/defaultV2-theme/blocks/sd-multipletext.scss

@@ -61,3 +61,6 @@
 .sd-multipletext tr:not(:last-child) .sd-multipletext__cell {
   padding-bottom: calcSize(2);
 }
+.sd-multipletext .sd-input .sd-input {
+  background: transparent;
+}

src/defaultV2-theme/blocks/sd-progress-toc.scss

@@ -33,4 +33,25 @@ $font-family: var(--font-family);
 
 .sv_progress-toc--right {
   border-left: 1px solid $border;
+}
+
+.sv_progress-toc--mobile {
+  position: fixed;
+  top: calcSize(4);
+  right: calcSize(4);
+  width: auto;
+  min-width: auto;
+  height: auto;
+  background-color: transparent;
+  z-index: 15;
+  border-radius: calcSize(3);
+
+  &>div {
+    width: calcSize(3);
+    height: calcSize(3);
+  }
+
+  &:hover {
+    background-color: $background-dim;
+  }
 }

src/defaultV2-theme/blocks/sd-rating.scss

@@ -116,7 +116,6 @@ legend+sv-ng-rating-item+.sd-rating__item {
 
 .sd-rating__item-smiley {
   position: relative;
-  background: $background;
   border-radius: calcSize(12.5);
   white-space: nowrap;
   padding: calcSize(1.25);
@@ -213,7 +212,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
 .sd-rating__item-star {
   position: relative;
-  background: $background;
   width: calcSize(6);
   height: calcSize(6);
 

src/knockout/components/progress/toc.html

@@ -1,3 +1,11 @@
 <div data-bind="css: containerCss">
+    <!-- ko ifnot: isMobile -->
     <sv-list params="model: listModel"></sv-list>
+    <!-- /ko -->
+    <!-- ko if: isMobile -->
+    <div class="" data-bind="click: togglePopup, key2click">
+        <sv-svg-icon class="" params="iconName: icon, size: 24"></sv-svg-icon>
+        <sv-popup params="model: popupModel"></sv-popup>
+    </div>
+    <!-- /ko -->
 </div>

src/knockout/components/progress/toc.ts

@@ -1,15 +1,11 @@
 import * as ko from "knockout";
-import { createTOCListModel, getTocRootCss, SurveyModel } from "survey-core";
+import { TOCModel } from "survey-core";
 const template: any = require("html-loader?interpolate!val-loader!./toc.html");
 
 ko.components.register("sv-progress-toc", {
   viewModel: {
     createViewModel: (params: any, componentInfo: any) => {
-      return {
-        containerCss: getTocRootCss(params.model),
-        survey: params.model,
-        listModel: createTOCListModel(params.model)
-      };
+      return new TOCModel(params.model);
     },
   },
   template: template

src/knockout/kosurvey.ts

@@ -66,7 +66,7 @@ export class SurveyImplementor extends ImplementorBase {
     if (typeof ko === "undefined")
       throw new Error("knockoutjs library is not loaded.");
     const page = this.survey.activePage;
-    if(!!page) {
+    if (!!page) {
       page.updateCustomWidgets();
     }
     this.survey.updateElementCss(false);
@@ -85,12 +85,12 @@ export class SurveyImplementor extends ImplementorBase {
     ko.renderTemplate(
       "survey-content",
       this.survey,
-      { },
+      {},
       this.renderedElement
     );
   }
   public koEventAfterRender(element: any, survey: any) {
-    if(survey["needRenderIcons"]) {
+    if (survey["needRenderIcons"]) {
       SvgRegistry.renderIcons();
     }
     survey.afterRenderSurvey(element);
@@ -155,7 +155,7 @@ LocalizableString.prototype["onCreating"] = function () {
   var self = this;
   this.koHasHtml = ko.observable(this.hasHtml);
   this.koRenderedHtml = ko.observable(this.renderedHtml);
-  this.onStringChanged.add(function() {
+  this.onStringChanged.add(function () {
     const hasHtml = self.hasHtml;
     self.koHasHtml(hasHtml);
     self.koRenderedHtml(hasHtml ? self.getHtmlValue() : self.calculatedText);
@@ -259,6 +259,27 @@ export var registerTemplateEngine = (ko: any, platform: string) => {
   ko.setTemplateEngine(surveyTemplateEngineInstance);
 };
 
+ko.bindingHandlers["elementStyle"] = {
+  update: function (element, valueAccessor, allBindings) {
+    if (element && element.style.length) {
+      for (let index = element.style.length - 1; index >= 0; index--) {
+        const style = element.style[index] as string;
+        if (style && style.indexOf("--sjs-") === 0) {
+          element.style.removeProperty(style);
+        }
+      }
+    }
+    var value = ko.utils.unwrapObservable(valueAccessor()) || {};
+    Object.keys(value).forEach(key => {
+      if(key.indexOf("--") === 0) {
+        element.style.setProperty(key, value[key]);
+      } else {
+        element.style[key] = value[key];
+      }
+    });
+  }
+};
+
 ko.bindingHandlers["key2click"] = {
   init: function (element: HTMLElement, valueAccessor, allBindingsAccessor, viewModel: any) {
     const options: IAttachKey2clickOptions = { ...valueAccessor() } || {

src/knockout/templates/index.html

@@ -4,7 +4,7 @@
 </script>
 
 <script type="text/html" id="survey-content-template">
-  <div data-bind="css: rootCss, style: themeVariables">
+  <div data-bind="css: rootCss, elementStyle: themeVariables">
       <form onsubmit="return false;" data-bind="style: { backgroundColor: renderBackgroundOpacity }">
           <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>
           <div data-bind="css: containerCss">

src/question_file.ts

@@ -623,19 +623,22 @@ export class FileLoader {
   }
   loaded: any[] = [];
   load(files: Array<any>): void {
-    files.forEach((value) => {
+    let downloadedCount = 0;
+    this.loaded = new Array(files.length);
+    files.forEach((value, index) => {
       if (this.fileQuestion.survey) {
         this.fileQuestion.survey.downloadFile(this.fileQuestion, this.fileQuestion.name, value, (status, data) => {
           if (!this.fileQuestion || !this.callback) {
             return;
           }
           if (status === "success") {
-            this.loaded.push({
+            this.loaded[index] = {
               content: data,
               name: value.name,
               type: value.type,
-            });
-            if (this.loaded.length === files.length) {
+            };
+            downloadedCount ++;
+            if (downloadedCount === files.length) {
               this.callback("loaded", this.loaded);
             }
           } else {

src/react/reactSurveyProgressToc.tsx

@@ -1,16 +1,26 @@
 import * as React from "react";
-import { createTOCListModel, getTocRootCss } from "survey-core";
+import { createTOCListModel, getTocRootCss, TOCModel } from "survey-core";
 import { SurveyNavigationBase } from "./reactSurveyNavigationBase";
 import { ReactElementFactory } from "./element-factory";
 import { List } from "./components/list/list";
+import { Popup } from "./components/popup/popup";
+import { SvgIcon } from "./components/svg-icon/svg-icon";
 
 export class SurveyProgressToc extends SurveyNavigationBase {
   render(): JSX.Element {
-    const listModel = createTOCListModel(this.props.model);
-    const rootCss = getTocRootCss(this.props.model);
+    const tocModel = new TOCModel(this.props.model);
+    let content: JSX.Element;
+    if(tocModel.isMobile) {
+      content = <div onClick={tocModel.togglePopup}>
+        <SvgIcon iconName={tocModel.icon} size={24}/>
+        <Popup model={tocModel.popupModel}/>
+      </div>;
+    } else {
+      content = <List model={tocModel.listModel} />;
+    }
     return (
-      <div className={rootCss}>
-        <List model={listModel} />
+      <div className={tocModel.containerCss}>
+        {content}
       </div>
     );
   }

src/surveyToc.ts

@@ -2,10 +2,12 @@ import { Action } from "./actions/action";
 import { ComputedUpdater } from "./base";
 import { ListModel } from "./list";
 import { PageModel } from "./page";
+import { PopupModel } from "./popup";
 import { SurveyModel } from "./survey";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
+import { IsTouch } from "./utils/devices";
 
-export function tryNavigateToPage (survey: SurveyModel, page: PageModel) {
+export function tryNavigateToPage(survey: SurveyModel, page: PageModel) {
   if (survey.isDesignMode) return;
   const index = survey.visiblePages.indexOf(page);
   if (index < survey.currentPageNo) {
@@ -19,15 +21,16 @@ export function tryNavigateToPage (survey: SurveyModel, page: PageModel) {
   return true;
 }
 
-export function createTOCListModel(survey: SurveyModel) {
+export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   var items = survey.pages.map(page => {
     return new Action({
       id: page.name,
       title: page.navigationTitle || page.title || page.name,
       action: () => {
-        if(typeof document !== undefined && !!document.activeElement) {
+        if (typeof document !== undefined && !!document.activeElement) {
           !!(<any>document.activeElement).blur && (<any>document.activeElement).blur();
         }
+        !!onAction && onAction();
         return tryNavigateToPage(survey, page);
       },
       visible: <any>new ComputedUpdater(() => page.isVisible && !page.isStartPage)
@@ -51,6 +54,27 @@ export function createTOCListModel(survey: SurveyModel) {
   return listModel;
 }
 
-export function getTocRootCss(survey: SurveyModel): string {
+export function getTocRootCss(survey: SurveyModel, isMobile = false): string {
+  if (isMobile) {
+    return "sv_progress-toc sv_progress-toc--mobile";
+  }
   return "sv_progress-toc" + (" sv_progress-toc--" + (survey.tocLocation || "").toLowerCase());
-}
+}
+
+export class TOCModel {
+  constructor(public survey: SurveyModel) {
+    this.listModel = createTOCListModel(survey, () => { this.popupModel.isVisible = false; });
+    this.popupModel = new PopupModel("sv-list", { model: this.listModel });
+  }
+
+  isMobile = IsTouch;
+  get containerCss(): string {
+    return getTocRootCss(this.survey, this.isMobile);
+  }
+  listModel: ListModel<Action>;
+  popupModel: PopupModel;
+  icon = "icon-navmenu_24x24";
+  togglePopup = () => {
+    this.popupModel.toggleVisibility();
+  }
+}