One inputPerPage feature (infinite loop)

packages/survey-core/entries/chunks/model.ts

@@ -194,6 +194,7 @@ export { PageModel } from "../../src/page";
 export * from "../../src/template-renderer";
 export { DefaultTitleModel } from "../../src/defaultTitle";
 export { Question } from "../../src/question";
+export { QuestionSingleInputSummary, QuestionSingleInputSummaryItem } from "../../src/questionSingleInputSummary";
 export { QuestionNonValue } from "../../src/questionnonvalue";
 export { QuestionEmptyModel } from "../../src/question_empty";
 export {

packages/survey-core/src/base-interfaces.ts

@@ -109,6 +109,9 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   isDisplayMode: boolean;
   isDesignMode: boolean;
   areInvisibleElementsShowing: boolean;
+  currentSingleQuestion: IQuestion;
+  isSingleVisibleInput: boolean;
+  updateNavigationElements(): void;
   currentSingleElement: IElement;
   areEmptyElementsHidden: boolean;
   isLoadingFromJson: boolean;
@@ -378,6 +381,7 @@ export interface ITitleOwner {
   isRequireTextBeforeTitle: boolean;
   isRequireTextAfterTitle: boolean;
   locTitle: LocalizableString;
+  locRenderedTitle: LocalizableString;
 }
 export interface IProgressInfo {
   questionCount: number;

packages/survey-core/src/default-theme/blocks/sd-breadcrumbs.scss

@@ -0,0 +1,45 @@
+@use "../variables.scss" as *;
+@use "../mixins.scss" as mixins;
+
+.sd-breadcrumbs {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: var(--lbr-breadcrumbs-gap, calcSize(1));
+  align-self: stretch;
+  flex-wrap: wrap;
+  padding-bottom: var(--lbr-page-header-breadcrumbs-margin-bottom, 20px);
+}
+
+.sd-breadcrumbs-item {
+  color: var(--lbr-breadcrumbs-item-text-color, $foreground-dim-light);
+  @include mixins.defaultFont;
+}
+
+.sd-breadcrumbs-item__button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  padding: 0;
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: unset;
+  font-size: unset;
+  font-family: unset;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.sd-breadcrumbs-separator {
+  display: flex;
+  width: var(--lbr-breadcrumbs-item-separator-icon-width, calcSize(1.5));
+  height: var(--lbr-breadcrumbs-item-separator-icon-height, calcSize(1.5));
+  justify-content: center;
+  align-items: center;
+  use {
+    fill: var(--lbr-breadcrumbs-item-separator-color, $foreground-dim-light);
+  }
+}

packages/survey-core/src/default-theme/blocks/sd-element.scss

@@ -70,6 +70,13 @@
   }
 }
 
+.sd-element__title.sd-element__title--singleinput {
+  span {
+    @include mixins.page_title();
+  }
+}
+
+
 .sd-element__num {
   float: left;
   padding-top: calcSize(0.625);

packages/survey-core/src/default-theme/blocks/sd-question.scss

@@ -26,39 +26,39 @@
   container-type: inline-size;
 }
 
-.sd-question--title-top > .sd-question__erbox--above-question {
+.sd-question--title-top>.sd-question__erbox--above-question {
   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
-.sd-question--description-under-input > .sd-question__erbox--below-question,
-.sd-question--title-bottom > .sd-question__erbox--below-question {
+.sd-question--description-under-input>.sd-question__erbox--below-question,
+.sd-question--title-bottom>.sd-question__erbox--below-question {
   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + 0.5 * #{$base-unit});
 }
 
-.sd-element--with-frame > .sd-element__erbox--above-element {
+.sd-element--with-frame>.sd-element__erbox--above-element {
   margin-bottom: var(--sd-base-padding);
   border-radius: calcCornerRadius(1) calcCornerRadius(1) 0 0;
 }
 
-.sd-question--left > .sd-element__erbox--above-element {
+.sd-question--left>.sd-element__erbox--above-element {
   margin-bottom: 0;
 }
 
-.sd-element--with-frame.sd-question--left > .sd-element__erbox--above-element {
+.sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
   margin-bottom: calc(1 * var(--sd-base-vertical-padding));
 }
 
-.sd-element--with-frame > .sd-question__erbox--below-question {
+.sd-element--with-frame>.sd-question__erbox--below-question {
   margin-top: auto;
   border-radius: 0 0 calcCornerRadius(1) calcCornerRadius(1);
 }
 
-.sd-element--with-frame.sd-question--title-top > .sd-question__erbox--above-question {
+.sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + #{$base-unit});
 }
 
-.sd-element--with-frame.sd-question--description-under-input > .sd-question__erbox--below-question,
-.sd-element--with-frame.sd-question--title-bottom > .sd-question__erbox--below-question {
+.sd-element--with-frame.sd-question--description-under-input>.sd-question__erbox--below-question,
+.sd-element--with-frame.sd-question--title-bottom>.sd-question__erbox--below-question {
   margin-top: calc(0.5 * var(--sd-base-vertical-padding) + #{$base-unit});
 }
 
@@ -88,12 +88,12 @@
     display: flex;
     flex-direction: column;
 
-    & > .sd-question__content {
+    &>.sd-question__content {
       margin-bottom: var(--sd-base-padding);
     }
   }
 
-  & > .sd-element__erbox {
+  &>.sd-element__erbox {
     margin-left: calc(-1 * var(--sd-base-padding));
     margin-right: calc(-1 * var(--sd-base-padding));
     width: calc(100% + 2 * var(--sd-base-padding));
@@ -127,7 +127,7 @@
   max-width: 100%;
 }
 
-.sd-element--with-frame > .sd-question__content--left {
+.sd-element--with-frame>.sd-question__content--left {
   margin: 0;
 }
 
@@ -159,8 +159,8 @@
   line-height: multiply(1.5, $font-editorfont-size);
   color: $font-questionplaceholder-color;
 
-  & > div,
-  & > span {
+  &>div,
+  &>span {
     .sv-string-viewer {
       white-space: pre-line;
     }
@@ -179,6 +179,17 @@
     height: multiply(1.5, $font-questiontitle-size);
   }
 }
+
 .sd-question__content {
   box-sizing: border-box;
 }
+
+.sd-singleinput__title {
+  font-family: $font-pagetitle-family;
+  font-weight: $font-pagetitle-weight;
+  font-size: var(--page-title-font-size);
+  color: $font-pagetitle-color;
+  position: static;
+  line-height: multiply(1.33, var(--page-title-font-size));
+  margin: 0 0 calcSize(0.5) 0px;
+}

packages/survey-core/src/default-theme/blocks/sd-summary.scss

@@ -0,0 +1,118 @@
+@use "../variables.scss" as *;
+@use "../mixins.scss" as mixins;
+
+.sd-summary {
+  border-radius: var(--lbr-data-table-corner-radius, calcSize(0.5));
+  background: var(--lbr-data-table-background-color, $background);
+  box-shadow: var(--lbr-data-table-shadow-offset-x, 0px) var(--lbr-data-table-shadow-offset-y, 1px)
+    var(--lbr-data-table-shadow-blur, 2px) var(--lbr-data-table-shadow-spread, 0px)
+    var(--lbr-data-table-shadow-color, rgba(0, 0, 0, 0.15));
+  overflow: hidden;
+}
+
+.sd-summary-row {
+  display: flex;
+  padding: var(--lbr-data-table-row-padding-top, calcSize(1)) var(--lbr-data-table-row-padding-right, calcSize(2))
+    var(--lbr-data-table-row-padding-bottom, calcSize(1)) var(--lbr-data-table-row-padding-left, calcSize(2));
+  align-items: flex-start;
+  gap: var(--lbr-data-table-row-gap, calcSize(4));
+  flex: 1 0 0;
+  align-self: stretch;
+
+  border-bottom: var(--lbr-data-table-row-border-width-bottom, 1px) solid
+    var(--lbr-data-table-row-border-color, $border-light);
+  background: var(--lbr-data-table-row-background-color, $background);
+}
+
+.sd-summary-row__content {
+  display: flex;
+  padding: var(--lbr-data-table-row-text-margin-top, calcSize(0.5)) 0px
+    var(--lbr-data-table-row-text-margin-bottom, calcSize(0.5)) 0px;
+  align-items: flex-start;
+  gap: var(--lbr-data-table-row-gap, calcSize(4));
+  flex: 1 0 0;
+
+  color: var(--lbr-data-table-row-text-color-title, $foreground);
+  @include mixins.defaultFont;
+}
+
+.sd-summary-row__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lbr-data-table-actions-gap, calcSize(1));
+  opacity: 0;
+  transition: opacity $transition-duration;
+}
+
+.sd-summary-row:hover,
+.sd-question--mobile {
+  .sd-summary-row__actions {
+    opacity: 1;
+  }
+}
+
+.sd-summary-row-action {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  padding: 0;
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: unset;
+
+  font-family: $font-family;
+  overflow-x: hidden;
+  white-space: nowrap;
+
+  display: flex;
+  padding: var(--lbr-action-button-padding-top, calcSize(1))
+    var(--lbr-action-button-padding-right-icon-only, calcSize(1)) var(--lbr-action-button-padding-bottom, calcSize(1))
+    var(--lbr-action-button-padding-left-icon-only, calcSize(1));
+  justify-content: center;
+  align-items: center;
+  gap: var(--lbr-action-button-gap, calcSize(1));
+
+  border-radius: var(--lbr-action-button-corner-radius, 1024px);
+  transition: background-color $transition-duration;
+  &:hover,
+  &:focus {
+    outline: none;
+    background-color: var(--lbr-action-button-background-color-hovered-positive, $primary-light);
+  }
+
+  //pressed state
+  &:active,
+  &.svc-toolbar__item--pressed {
+    opacity: 0.5;
+  }
+
+  //checked state
+  &.svc-toolbar__item--active {
+    outline: none;
+  }
+
+  //disabled state
+  &:disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+}
+
+.sd-summary-row-action--edit {
+  use {
+    fill: var(--lbr-action-button-icon-color-positive, $primary);
+  }
+}
+.sd-summary-row-action--delete {
+  &:hover,
+  &:focus {
+    outline: none;
+    background-color: var(--lbr-action-button-background-color-hovered-negative, $red-light);
+  }
+  use {
+    fill: var(--lbr-action-button-icon-color-negative, $red);
+  }
+}

packages/survey-core/src/default-theme/default.fontless.scss

@@ -66,6 +66,8 @@
 @use "blocks/header.scss";
 @use "blocks/sd-loading-indicator.scss";
 @use "blocks/sd-components-container.scss";
+@use "blocks/sd-breadcrumbs.scss";
+@use "blocks/sd-summary.scss";
 @use "./default.m600.scss";
 
 body {

packages/survey-core/src/defaultCss/defaultCss.ts

@@ -251,7 +251,20 @@ export var defaultCss = {
     errorsContainer: "sd-element__erbox sd-question__erbox",
     errorsContainerTop: "sd-element__erbox--above-element sd-question__erbox--above-question",
     errorsContainerBottom: "sd-question__erbox--below-question",
-    confirmDialog: "sd-popup--confirm sv-popup--confirm"
+    confirmDialog: "sd-popup--confirm sv-popup--confirm",
+    singleInputTitle: "sd-element__title--singleinput",
+    singleInputWrapper: "sd-question__singleinput-wrapper",
+    breadcrumbsRoot: "sd-breadcrumbs",
+    breadcrumbsItem: "sd-breadcrumbs-item",
+    breadcrumbsItemButton: "sd-breadcrumbs-item__button",
+    breadcrumbsSeparator: "sd-breadcrumbs-separator",
+    summary: "sd-summary",
+    summaryRow: "sd-summary-row",
+    summaryRowContent: "sd-summary-row__content",
+    summaryRowActions: "sd-summary-row__actions",
+    summaryRowAction: "sd-summary-row-action",
+    summaryRowActionEdit: "sd-summary-row-action sd-summary-row-action--edit",
+    summaryRowActionDelete: "sd-summary-row-action sd-summary-row-action--delete",
   },
   image: {
     mainRoot: "sd-element sd-question sd-question--image",

packages/survey-core/src/localization/english.ts

@@ -61,6 +61,8 @@ export var englishStrings = {
   addRow: "Add Row",
   removeRow: "Remove",
   noRowsText: "There are no rows.",
+  rowIndexTemplateTitle: "Row {rowIndex}",
+  rowNameTemplateTitle: "{rowText}",
   addPanel: "Add new",
   removePanel: "Remove",
   showDetails: "Show Details",