Move tabbed menu inside paneldynamic content

packages/survey-angular-ui/src/questions/paneldynamic.component.html

@@ -1,4 +1,7 @@
 <div [class]="model.cssClasses.root" #contentElement>
+  <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
+    <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
+  </div>
   <div *ngIf="model.getShowNoEntriesPlaceholder()" [class]="model.cssClasses.noEntriesPlaceholder">
     <span [model]="model.locNoEntriesText" sv-ng-string></span>
     <sv-ng-paneldynamic-add-btn *ngIf="model.canAddPanel" [data]="{ question: model }"></sv-ng-paneldynamic-add-btn>
@@ -14,8 +17,7 @@
       <div [class]="model.getPanelWrapperCss(panel)">
         <ng-template
           [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
-        <ng-container
-          *ngIf="model.canRenderRemovePanelOnRight(panel)">
+        <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
           <ng-template
             [component]="{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}"></ng-template>
         </ng-container>

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

@@ -174,11 +174,28 @@
         margin-bottom: calcSize(-1);
     }
 }
-
+.sd-paneldynamic__tabs-container {
+    padding-top: var(--sd-base-padding);
+    .sd-tabs-toolbar {
+        margin: 0 0 -1px calcSize(-2);
+        width: calc(100% + 4 * #{$base-unit});
+    }
+    &:after {
+        content: " ";
+        display: block;
+        height: 1px;
+        position: relative;
+        background: $border-light;
+        bottom: 0;
+        inset-inline-start: calc(-1 * var(--sd-base-padding));
+        width: calc(100% + 2 * var(--sd-base-padding));
+    }
+}
+.sd-paneldynamic__tabs-container--with-header {
+    padding-top: calcSize(3);
+}
 .sd-tabs-toolbar.sv-action-bar {
     align-items: flex-start;
-    margin: calcSize(1) 0 -1px calcSize(-2);
-    width: calc(100% + 4 * #{$base-unit});
     z-index: 1;
 }
 
@@ -277,13 +294,16 @@
 .sd-question__title ~ .sd-tabs-toolbar {
     margin-top: calcSize(3);
 }
-
 .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab {
     padding-bottom: 0;
 }
 
+.sd-element--collapsed .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab {
+    padding-bottom: calcSize(2);
+}
+
 .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab::after {
-    bottom: 0;
+    content: none;
 }
 
 .sd-question--paneldynamic.sd-element--with-frame {

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

@@ -127,6 +127,8 @@ export var defaultCss = {
     progressBtnIcon: "icon-progressbuttonv2",
     noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
     compact: "sd-element--with-frame sd-element--compact",
+    tabsContainer: "sd-paneldynamic__tabs-container",
+    tabsContainerWithHeader: "sd-paneldynamic__tabs-container--with-header",
     tabsRoot: "sd-tabs-toolbar",
     tabsLeft: "sd-tabs-toolbar--left",
     tabsRight: "sd-tabs-toolbar--right",

packages/survey-core/src/question_paneldynamic.ts

@@ -123,6 +123,16 @@ class QuestionPanelDynamicItemTextProcessor extends QuestionTextProcessor {
   }
 }
 
+interface IPanelDynamicTabbedMenuItem extends IAction {
+  panelId: string;
+}
+class PanelDynamicTabbedMenuItem extends Action {
+  public panelId: string;
+  constructor(innerItem: IPanelDynamicTabbedMenuItem) {
+    super(innerItem);
+  }
+}
+
 export class QuestionPanelDynamicItem implements ISurveyData, ISurveyImpl {
   public static ItemVariableName = "panel";
   public static ParentItemVariableName = "parentpanel";
@@ -1292,7 +1302,7 @@ export class QuestionPanelDynamicModel extends Question
   public set tabAlign(val: "center" | "left" | "right") {
     this.setPropertyValue("tabAlign", val);
     if (this.isRenderModeTab) {
-      this.additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss();
+      this.tabbedMenu.containerCss = this.getTabbedMenuCss();
     }
   }
   public get isRenderModeList(): boolean {
@@ -1301,12 +1311,6 @@ export class QuestionPanelDynamicModel extends Question
   public get isRenderModeTab(): boolean {
     return this.displayMode === "tab";
   }
-  get hasTitleOnLeftTop(): boolean {
-    if (this.isRenderModeTab && this.visiblePanelCount > 0) return true;
-    if (!this.hasTitle) return false;
-    const location = this.getTitleLocation();
-    return location === "left" || location === "top";
-  }
   public setVisibleIndex(value: number): number {
     if (!this.isVisible) return 0;
     const onSurveyNumbering = this.showQuestionNumbers === "onSurvey";
@@ -1677,8 +1681,8 @@ export class QuestionPanelDynamicModel extends Question
     for (var i = 0; i < panels.length; i++) {
       panels[i].locStrsChanged();
     }
-    if (this.additionalTitleToolbar) {
-      this.additionalTitleToolbar.locStrsChanged();
+    if (this.tabbedMenu) {
+      this.tabbedMenu.locStrsChanged();
     }
   }
   public clearIncorrectValues() {
@@ -2397,11 +2401,13 @@ export class QuestionPanelDynamicModel extends Question
   public get cssHeader(): string {
     const showTab = this.isRenderModeTab && !!this.visiblePanelCount;
     return new CssClassBuilder()
-      .append(this.cssClasses.header)
-      .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
-      .append(this.cssClasses.headerTab, showTab)
+      .append(super.getCssHeader(this.cssClasses))
+      .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab)
       .toString();
   }
+  public getTabsContainerCss(): string {
+    return new CssClassBuilder().append(this.cssClasses.tabsContainer).append(this.cssClasses.tabsContainerWithHeader, this.hasTitleOnTop).toString();
+  }
   public getPanelWrapperCss(panel: PanelModel): string {
     return new CssClassBuilder()
       .append(this.cssClasses.panelWrapper, !panel || panel.visible)
@@ -2455,20 +2461,20 @@ export class QuestionPanelDynamicModel extends Question
     if (!!panel && panel.needResponsiveWidth()) return true;
     return false;
   }
-  private additionalTitleToolbarValue: AdaptiveActionContainer;
-  public get hasAdditionalTitleToolbar(): boolean {
+  private tabbedMenuValue: AdaptiveActionContainer<PanelDynamicTabbedMenuItem>;
+  public get hasTabbedMenu(): boolean {
     return this.isRenderModeTab && this.visiblePanels.length > 0;
   }
-  protected getAdditionalTitleToolbar(): AdaptiveActionContainer | null {
+  public get tabbedMenu(): AdaptiveActionContainer<PanelDynamicTabbedMenuItem> | null {
     if (!this.isRenderModeTab) return null;
-    if (!this.additionalTitleToolbarValue) {
-      this.additionalTitleToolbarValue = new AdaptiveActionContainer();
-      this.additionalTitleToolbarValue.dotsItem.popupModel.showPointer = false;
-      this.additionalTitleToolbarValue.dotsItem.popupModel.verticalPosition = "bottom";
-      this.additionalTitleToolbarValue.dotsItem.popupModel.horizontalPosition = "center";
+    if (!this.tabbedMenuValue) {
+      this.tabbedMenuValue = new AdaptiveActionContainer<PanelDynamicTabbedMenuItem>();
+      this.tabbedMenuValue.dotsItem.popupModel.showPointer = false;
+      this.tabbedMenuValue.dotsItem.popupModel.verticalPosition = "bottom";
+      this.tabbedMenuValue.dotsItem.popupModel.horizontalPosition = "center";
       this.updateElementCss(false);
     }
-    return this.additionalTitleToolbarValue;
+    return this.tabbedMenuValue;
   }
 
   private footerToolbarValue: ActionContainer;
@@ -2563,19 +2569,21 @@ export class QuestionPanelDynamicModel extends Question
       return options.title;
     };
     locTitle.sharedData = this.locTemplateTabTitle;
-    const isActive = this.getPanelVisibleIndexById(panel.id) === this.currentIndex;
-    const newItem = new Action({
-      id: panel.id,
+    const panelId = panel.id;
+    const isActive = this.getPanelVisibleIndexById(panelId) === this.currentIndex;
+    const newItem = new PanelDynamicTabbedMenuItem({
+      id: `${this.id}_tab_${panelId}`,
+      panelId: panelId,
       pressed: isActive,
       locTitle: locTitle,
       disableHide: isActive,
       action: () => {
-        this.currentIndex = this.getPanelVisibleIndexById(newItem.id);
+        this.currentIndex = this.getPanelVisibleIndexById(panelId);
       }
     });
     return newItem;
   }
-  private getAdditionalTitleToolbarCss(cssClasses?: any): string {
+  private getTabbedMenuCss(cssClasses?: any): string {
     const css = cssClasses ?? this.cssClasses;
     return new CssClassBuilder()
       .append(css.tabsRoot)
@@ -2588,8 +2596,8 @@ export class QuestionPanelDynamicModel extends Question
     if (!this.isRenderModeTab) return;
     if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount) return;
     const panel = this.visiblePanelsCore[this.currentIndex];
-    this.additionalTitleToolbar.renderedActions.forEach(action => {
-      const isActive = action.id === panel.id;
+    this.tabbedMenu.renderedActions.forEach(action => {
+      const isActive = action.panelId === panel.id;
       action.pressed = isActive;
       action.disableHide = isActive;
       //should raise update if dimensions are not changed but action is active now
@@ -2606,20 +2614,20 @@ export class QuestionPanelDynamicModel extends Question
     for (let i = 0; i < visPanels.length; i++) {
       this.visiblePanelsCore.forEach(panel => items.push(this.createTabByPanel(visPanels[i], i)));
     }
-    this.additionalTitleToolbar.setItems(items);
+    this.tabbedMenu.setItems(items);
   }
   private addTabFromToolbar(panel: PanelModel, index: number) {
     if (!this.isRenderModeTab) return;
 
     const newItem = this.createTabByPanel(panel, index);
-    this.additionalTitleToolbar.actions.splice(index, 0, newItem);
+    this.tabbedMenu.actions.splice(index, 0, newItem);
     this.updateTabToolbarItemsPressedState();
   }
   private removeTabFromToolbar(panel: PanelModel) {
     if (!this.isRenderModeTab) return;
-    const removedItem = this.additionalTitleToolbar.getActionById(panel.id);
+    const removedItem = this.tabbedMenu.actions.find(a => a.panelId == panel.id);
     if (!removedItem) return;
-    this.additionalTitleToolbar.actions.splice(this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
+    this.tabbedMenu.actions.splice(this.tabbedMenu.actions.indexOf(removedItem), 1);
     this.updateTabToolbarItemsPressedState();
   }
   get showLegacyNavigation(): boolean {
@@ -2636,12 +2644,12 @@ export class QuestionPanelDynamicModel extends Question
 
   protected calcCssClasses(css: any): any {
     const classes = super.calcCssClasses(css);
-    const additionalTitleToolbar = <AdaptiveActionContainer>this.additionalTitleToolbar;
-    if (!!additionalTitleToolbar) {
-      additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(classes);
-      additionalTitleToolbar.cssClasses = classes.tabs;
-      additionalTitleToolbar.dotsItem.cssClasses = classes.tabs;
-      additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
+    const tabbedMenu = <AdaptiveActionContainer>this.tabbedMenu;
+    if (!!tabbedMenu) {
+      tabbedMenu.containerCss = this.getTabbedMenuCss(classes);
+      tabbedMenu.cssClasses = classes.tabs;
+      tabbedMenu.dotsItem.cssClasses = classes.tabs;
+      tabbedMenu.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
     }
     return classes;
   }