Popup submenu

packages/survey-angular-ui/src/angular-ui.module.ts

@@ -46,6 +46,8 @@ import { SurveyHeaderComponent } from "./components/survey-header/survey-header.
 import { DynamicHeadComponent } from "./components/element-title/dynamic-head.component";
 import { ListComponent } from "./components/list/list.component";
 import { ListItemComponent } from "./components/list/list-item.component";
+import { ListItemContentComponent } from "./components/list/list-item-content.component";
+import { ListItemGroupComponent } from "./components/list/list-item-group.component";
 import { RatingItemComponent } from "./components/rating/rating-item.component";
 import { RatingItemStarComponent } from "./components/rating/rating-item-star.component";
 import { RatingItemSmileyComponent } from "./components/rating/rating-item-smiley.component";
@@ -129,7 +131,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
@@ -151,7 +153,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     CharacterCounterComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,

packages/survey-angular-ui/src/angular-ui.ts

@@ -50,6 +50,8 @@ export * from "./components/notifier/notifier.component";
 export * from "./components/element-title/dynamic-head.component";
 export * from "./components/list/list.component";
 export * from "./components/list/list-item.component";
+export * from "./components/list/list-item-content.component";
+export * from "./components/list/list-item-group.component";
 export * from "./components/rating/rating-item.component";
 export * from "./components/rating/rating-item-star.component";
 export * from "./components/rating/rating-item-smiley.component";

packages/survey-angular-ui/src/components/list/list-item-content.component.html

@@ -0,0 +1,7 @@
+<ng-template #template>
+<svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
+  sv-ng-svg-icon></svg>
+<sv-ng-string [model]="model.locTitle"></sv-ng-string>
+<svg *ngIf="model.markerIconName" [class]="model.cssClasses.itemMarkerIcon" [iconName]="model.markerIconName" [size]="model.markerIconSize"
+  sv-ng-svg-icon></svg>
+</ng-template>

packages/survey-angular-ui/src/components/list/list-item-content.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { ListModel, Action } from "survey-core";
+import { BaseAngular } from "../../base-angular";
+import { AngularComponentFactory } from "../../component-factory";
+
+@Component({
+  selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'",
+  templateUrl: "./list-item-content.component.html",
+  styleUrls: ["../../hide-host.scss"],
+})
+
+export class ListItemContentComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: Action;
+  @Input() listModel!: ListModel;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-list-item-content", ListItemContentComponent);

packages/survey-angular-ui/src/components/list/list-item-group.component.html

@@ -0,0 +1,4 @@
+<ng-template #template>
+  <sv-ng-list-item-content [model]="model" [listModel]="listModel"></sv-ng-list-item-content>
+  <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
+</ng-template>

packages/survey-angular-ui/src/components/list/list-item-group.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { ListModel, Action } from "survey-core";
+import { BaseAngular } from "../../base-angular";
+import { AngularComponentFactory } from "../../component-factory";
+
+@Component({
+  selector: "sv-ng-list-item-group, '[sv-ng-list-item-group]'",
+  templateUrl: "./list-item-group.component.html",
+  styleUrls: ["../../hide-host.scss"],
+})
+
+export class ListItemGroupComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: Action;
+  @Input() listModel!: ListModel;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-list-item-group", ListItemGroupComponent);

packages/survey-angular-ui/src/components/list/list-item.component.html

@@ -3,15 +3,10 @@
     <ng-container *ngIf="model.needSeparator">
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
-    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText">
-    <ng-container *ngIf="!model.component">
-      <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
-        sv-ng-svg-icon></svg>
-      <sv-ng-string [model]="model.locTitle"></sv-ng-string>
-    </ng-container>
-    <ng-container *ngIf="model.component">
-      <ng-template [component]="{ name: model.component, data: { model: model } }"></ng-template>
-    </ng-container>
+    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText"
+    (mouseover)="listModel.onItemHover(model)"
+    (mouseleave)="listModel.onItemLeave(model)">
+    <ng-template [component]="{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }"></ng-template>
     </div>
   </li>
 </ng-template>

packages/survey-angular-ui/src/components/popup/popup.component.ts

@@ -10,6 +10,7 @@ import { PopupBaseViewModel, PopupModel, createPopupViewModel } from "survey-cor
 export class PopupComponent extends BaseAngular<PopupModel> {
   @Input() popupModel!: PopupModel;
   @Input() getTarget?: (container: HTMLElement) => HTMLElement;
+  @Input() getArea?: (container: HTMLElement) => HTMLElement;
   @ViewChild("containerRef") containerRef!: ElementRef<HTMLDivElement>;
 
   public model!: PopupBaseViewModel;
@@ -31,7 +32,9 @@ export class PopupComponent extends BaseAngular<PopupModel> {
   ngAfterViewInit(): void {
     if (!!this.containerRef?.nativeElement) {
       const container = this.containerRef.nativeElement as HTMLElement;
-      this.model.setComponentElement(container, this.getTarget ? this.getTarget(container.parentElement as HTMLElement) : container?.parentElement?.parentElement);
+      this.model.setComponentElement(container,
+        this.getTarget ? this.getTarget(container.parentElement as HTMLElement) : container?.parentElement?.parentElement,
+        this.getArea ? this.getArea(container.parentElement as HTMLElement) : undefined);
     }
   }
   override ngOnInit() {

packages/survey-vue3-ui/src/components/list/ListItem.vue

@@ -20,15 +20,10 @@
       :style="{ paddingInlineStart: model.getItemIndent(item) }"
       v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
+      @mouseover="(e) => model.onItemHover(item)"
+      @mouseleave="(e) => model.onItemLeave(item)"
     >
-      <sv-svg-icon
-        v-if="item.iconName && !item.component"
-        v-bind:class="model.cssClasses.itemIcon"
-        :iconName="item.iconName"
-        :size="item.iconSize"
-      ></sv-svg-icon>
-      <survey-string v-if="!item.component" :locString="item.locTitle" />
-      <component v-if="item.component" :is="item.component" :item="item">
+      <component :is="item.component || 'sv-list-item-content'" :item="item" :model="model">
       </component>
     </div>
   </li>

packages/survey-vue3-ui/src/components/list/ListItemContent.vue

@@ -0,0 +1,24 @@
+<template>
+  <sv-svg-icon
+    v-if="item.iconName"
+    v-bind:class="model.cssClasses.itemIcon"
+    :iconName="item.iconName"
+    :size="item.iconSize"
+  ></sv-svg-icon>
+  <survey-string :locString="item.locTitle" />
+  <sv-svg-icon
+    v-if="item.markerIconName"
+    v-bind:class="item.cssClasses.itemMarkerIcon"
+    :iconName="item.markerIconName"
+    :size="item.markerIconSize"
+  ></sv-svg-icon>
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+import type { ListModel, Action, IAction } from "survey-core";
+
+const props = defineProps<{ model: ListModel; item: Action }>();
+
+useBase(() => props.item);
+</script>

packages/survey-vue3-ui/src/components/list/ListItemGroup.vue

@@ -0,0 +1,13 @@
+<template>
+  <sv-list-item-content :item="item" :model="model"></sv-list-item-content>
+  <sv-popup :model="item.popupModel"></sv-popup>
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+import type { ListModel, Action } from "survey-core";
+
+const props = defineProps<{ model: ListModel; item: Action }>();
+
+useBase(() => props.item);
+</script>

packages/survey-vue3-ui/src/components/popup/Popup.vue

@@ -9,6 +9,7 @@ import { PopupModel, createPopupViewModel } from "survey-core";
 import { shallowRef, ref, onMounted, watch, onUnmounted } from "vue";
 const props = defineProps<{
   getTarget?: (el: HTMLElement) => HTMLElement;
+  getArea?: (el: HTMLElement) => HTMLElement;
   model: PopupModel;
 }>();
 const popupViewModel = shallowRef();
@@ -30,7 +31,8 @@ onMounted(() => {
   const container = root.value;
   popupViewModel.value.setComponentElement(
     container,
-    props.getTarget ? props.getTarget(container) : undefined
+    props.getTarget ? props.getTarget(container) : undefined,
+    props.getArea ? props.getArea(container) : undefined
   );
 });
 onUnmounted(() => {

packages/survey-vue3-ui/src/index.ts

@@ -83,6 +83,8 @@ import ActionBarSeparator from "./components/action-bar/ActionBarSeparator.vue";
 
 import List from "./components/list/List.vue";
 import ListItem from "./components/list/ListItem.vue";
+import ListItemContent from "./components/list/ListItemContent.vue";
+import ListItemGroup from "./components/list/ListItemGroup.vue";
 
 import Popup from "./components/popup/Popup.vue";
 import PopupContainer from "./components/popup/PopupContainer.vue";
@@ -240,6 +242,8 @@ function registerComponents(app: App) {
   app.component("sv-action-bar-separator", ActionBarSeparator);
 
   app.component("sv-list", List);
+  app.component("sv-list-item-content", ListItemContent);
+  app.component("sv-list-item-group", ListItemGroup);
   app.component("sv-list-item", ListItem);
 
   app.component("sv-popup", Popup);

src/actions/action.ts

@@ -153,6 +153,11 @@ export interface IAction {
   ariaExpanded?: boolean;
   ariaRole?: string;
   elementId?: string;
+  items?: Array<IAction>;
+  markerIconName?: string;
+  markerIconSize?: number;
+  showPopup?: () => void;
+  hidePopup?: () => void;
 }
 
 export interface IActionDropdownPopupOptions extends IListModel, IPopupOptionsBase {
@@ -208,6 +213,7 @@ export function getActionDropdownButtonTarget(container: HTMLElement): HTMLEleme
 }
 
 export abstract class BaseAction extends Base implements IAction {
+  items?: IAction[];
   private static renderedId = 1;
   private static getNextRendredId(): number { return BaseAction.renderedId++; }
   private cssClassesValue: any;
@@ -235,6 +241,8 @@ export abstract class BaseAction extends Base implements IAction {
   public removePriority: number;
   @property() iconName: string;
   @property({ defaultValue: 24 }) iconSize: number;
+  @property() markerIconName: string;
+  @property() markerIconSize: number = 16;
   @property() css?: string
   minDimension: number;
   maxDimension: number;
@@ -333,6 +341,54 @@ export abstract class BaseAction extends Base implements IAction {
     }
     return args.isTrusted;
   }
+  public showPopup(): void {
+    if (!!this.popupModel) {
+      this.popupModel.show();
+    }
+  }
+  public hidePopup(): void {
+    if (!!this.popupModel) {
+      this.popupModel.hide();
+    }
+  }
+
+  @property({ defaultValue: false }) isPressed: boolean;
+  @property({ defaultValue: false }) isHovered: boolean;
+
+  private showPopupTimeout: NodeJS.Timeout;
+  private hidePopupTimeout: NodeJS.Timeout;
+  private clearPopupTimeouts() {
+    if (this.showPopupTimeout) clearTimeout(this.showPopupTimeout);
+    if (this.hidePopupTimeout) clearTimeout(this.hidePopupTimeout);
+  }
+  public showPopupDelayed(delay: number) {
+
+    this.clearPopupTimeouts();
+    this.showPopupTimeout = setTimeout(() => {
+      this.clearPopupTimeouts();
+
+      this.showPopup();
+
+    }, delay);
+  }
+
+  public hidePopupDelayed(delay: number) {
+    if (this.popupModel?.isVisible) {
+
+      this.clearPopupTimeouts();
+      this.hidePopupTimeout = setTimeout(() => {
+        this.clearPopupTimeouts();
+
+        this.hidePopup();
+        this.isHovered = false;
+
+      }, delay);
+    } else {
+      this.clearPopupTimeouts();
+      this.isHovered = false;
+    }
+  }
+
   protected abstract getEnabled(): boolean;
   protected abstract setEnabled(val: boolean): void;
   protected abstract getVisible(): boolean;
@@ -372,6 +428,18 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   private createLocTitle(): LocalizableString {
     return this.createLocalizableString("title", this, true);
   }
+  public setItems(items: Array<IAction>, onSelectionChanged: (item: Action, ...params: any[]) => void): void {
+    this.markerIconName = "icon-next_16x16";
+    this.component = "sv-list-item-group";
+    this.items = [...items];
+    const popupModel = createPopupModelWithListModel(
+      { items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false },
+      { horizontalPosition: "right", showPointer: false, canShrink: false }
+    );
+    popupModel.cssClass = "sv-popup-inner";
+    this.popupModel = popupModel;
+  }
+
   location?: string;
   @property() id: string;
   @property({

src/actions/container.ts

@@ -147,6 +147,25 @@ export class ActionContainer<T extends BaseAction = Action> extends Base impleme
       this.sortItems();
     }
   }
+  @property({ defaultValue: 300 }) subItemsShowDelay: number;
+  @property({ defaultValue: 300 }) subItemsHideDelay: number;
+  protected popupAfterShowCallback(itemValue: T): void {
+
+  }
+
+  public mouseOverHandler(itemValue: T): void {
+    itemValue.isHovered = true;
+    this.actions.forEach(action => {
+      if (action === itemValue && !!itemValue.popupModel) {
+        itemValue.showPopupDelayed(this.subItemsShowDelay);
+        this.popupAfterShowCallback(itemValue);
+
+      } else if (!!action.popupModel && action.popupModel.isVisible) {
+        action.hidePopupDelayed(this.subItemsHideDelay);
+      }
+    });
+  }
+
   public initResponsivityManager(container: HTMLDivElement, delayedUpdateFunction?: (callback: () => void) => void): void {
     return;
   }