@vectoriox/iox-ui 5.85.0 → 5.86.1

package/src/actions-core/element-actions.ts

@@ -1,6 +1,7 @@
 import { AccordionRole, CompositeItemAction, DisclosureRole, SegmentedRole, SLIDE_TO_ROW, TabsRole } from '@vectoriox/iox-ui/composite-core';
 
 import { ActionDescriptor } from './action.model';
+import { POPOVER_NODE_TYPE } from './popover-opener';
 
 /** The items an item action may target: an accordion's item, or a disclosure (its own one item). */
 const ITEM_TARGET_ROLES = [AccordionRole.Item, DisclosureRole.Disclosure];
@@ -72,6 +73,26 @@ export const ELEMENT_ACTION_DESCRIPTORS: readonly ActionDescriptor[] = Object.fr
     { type: 'toggleDialog', labelKey: 'builder.actions.toggleDialog', kind: 'instant', group: 'dialog', builderBehaviour: 'run',
       target: { required: true, types: ['Dialog'] } },
 
+    // ── Popover (premium M5, N4): an anchored, NON-modal panel beside the element that opens it. The canvas RUNS them,
+    // like the dialog actions — a popover you cannot open from its button is a popover you cannot design.
+    { type: 'openPopover',   labelKey: 'builder.actions.openPopover',   kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+    { type: 'closePopover',  labelKey: 'builder.actions.closePopover',  kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+    { type: 'togglePopover', labelKey: 'builder.actions.togglePopover', kind: 'instant', group: 'popover', builderBehaviour: 'run',
+      target: { required: true, types: [POPOVER_NODE_TYPE] } },
+
+    // ── Notice (premium M5, N3): a toast at an edge of the screen — the author's words, never the visitor's. The canvas
+    // RUNS it inside the page's frame.
+    { type: 'showToast', labelKey: 'builder.actions.showToast', kind: 'instant', group: 'notice', builderBehaviour: 'run',
+      params: [
+          { name: 'text', type: 'string', label: 'builder.actions.params.toastText' },
+          { name: 'edge', type: 'string', label: 'builder.actions.params.toastEdge', options: [
+              { value: 'bottom', labelKey: 'builder.actions.params.toastBottom' },
+              { value: 'top', labelKey: 'builder.actions.params.toastTop' },
+          ] },
+      ] },
+
     // ── Item (CC2.1 — composite T14): drive an accordion item or a disclosure from anywhere ("See shipping"
     // opens FAQ item 3). The canvas RUNS them, like the dialog actions: it is the same runtime, and an item you
     // cannot open from the button is a button you cannot design.
@@ -147,6 +168,9 @@ export const SERVER_ELEMENT_ACTION_TYPES: ReadonlySet<string> =
 export const BEHAVIOUR_ACTION_TYPES: ReadonlySet<string> =
     new Set(['navigate', 'scrollTo', 'submitForm', 'copyToClipboard']);
 
+/** The toast action's dispatch set (premium M5) — the engines branch on it beside DIALOG / POPOVER. */
+export const TOAST_ACTION_TYPES: ReadonlySet<string> = new Set(['showToast']);
+
 /** The item actions' dispatch set (T14) and what each does to its item — the engines branch on it beside
  *  DIALOG/BEHAVIOUR, and composite-core `runCompositeItemAction` runs it on the target item's own runtime. */
 export const ITEM_ACTION_TYPES: Readonly<Record<string, CompositeItemAction>> = Object.freeze({
@@ -172,7 +196,7 @@ export const CONSENT_ACTION_TYPES: ReadonlySet<string> =
 
 /** Picker order — most-used groups first, services last (they are the shop window, not the shop). */
 export const ELEMENT_ACTION_GROUP_ORDER: readonly string[] =
-    Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'item', 'form', 'data', 'consent', 'service']);
+    Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'popover', 'notice', 'item', 'form', 'data', 'consent', 'service']);
 
 /** The catalog, grouped and ordered for the picker — one derivation, no hand-kept second list. */
 export function groupedElementActions(): ReadonlyArray<{ group: string; actions: ActionDescriptor[] }> {

package/src/actions-core/popover-opener.ts

@@ -0,0 +1,50 @@
+import { OpenerAttribute, OpenerNodeLike, openedTargetId } from './dialog-opener';
+
+/**
+ * What an element that OPENS a popover says about itself (premium components M5, N4 — the APG disclosure pattern over a
+ * non-modal dialog): `aria-haspopup="dialog"`, `aria-controls` = the popover's DOM id, and `aria-expanded` — `false` in
+ * the server render, kept in step by the runtime. ONE decision for every renderer, read the way a dialog opener is
+ * (`openedTargetId`); the popover's DOM id comes from `popoverDomId`, the one place that names it.
+ */
+
+/** The Popover node type. */
+export const POPOVER_NODE_TYPE = 'Popover';
+
+/** The actions that open a popover (close-only actions do not make an opener). */
+export const POPOVER_OPENER_ACTION_TYPES: ReadonlySet<string> = new Set(['openPopover', 'togglePopover']);
+
+/** Every action that opens, closes or toggles a popover — what the engines dispatch. */
+export const POPOVER_ACTION_TYPE_SET: ReadonlySet<string> = new Set(['openPopover', 'closePopover', 'togglePopover']);
+
+const POPOVER_ID_PREFIX = 'iox-popover-';
+
+/** The DOM id of a Popover node's panel — what an opener's `aria-controls` names. */
+export function popoverDomId(nodeId: string): string {
+    return `${POPOVER_ID_PREFIX}${nodeId}`;
+}
+
+/** The node id a popover DOM id names, or null. */
+export function nodeIdOfPopoverDomId(domId: string | null | undefined): string | null {
+    return domId && domId.startsWith(POPOVER_ID_PREFIX) ? domId.slice(POPOVER_ID_PREFIX.length) : null;
+}
+
+/** The Popover node id the element's click opens, or null. */
+export function openedPopoverId(node: OpenerNodeLike | null | undefined): string | null {
+    return openedTargetId(node, POPOVER_OPENER_ACTION_TYPES);
+}
+
+/** The opener attributes for a node: `{}` when its click opens no popover. */
+export function popoverOpenerAttributes(node: OpenerNodeLike | null | undefined, open = false): Record<string, string> {
+    const popoverId = openedPopoverId(node);
+    if (!popoverId) return {};
+    return {
+        [OpenerAttribute.HasPopup]: 'dialog',
+        [OpenerAttribute.Controls]: popoverDomId(popoverId),
+        [OpenerAttribute.Expanded]: open ? 'true' : 'false',
+    };
+}
+
+/** The selector of every opener of one popover (by its DOM id). */
+export function popoverOpenersSelector(popoverDomIdValue: string): string {
+    return `[${OpenerAttribute.Controls}="${popoverDomIdValue}"]`;
+}

package/src/actions-core/public-api.ts

@@ -12,4 +12,5 @@ export * from './action.model';
 export * from './availability';
 export * from './element-actions';
 export * from './dialog-opener';
+export * from './popover-opener';
 export * from './dialog-motion';