@vectoriox/iox-builder 11.17.0 → 11.18.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -19,14 +19,15 @@ import { DialogModule } from 'primeng/dialog';
 import * as i2$1 from '@vectoriox/iox-ui';
 import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, PROGRESS_ATTRIBUTE, interactionMarkerAttributes, cascadeChain, attachScrollProgress, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, syncInteractionMarkers, entranceStartsHidden, isActionEnabled, restoreCountUp, SCROLL_PROGRESS_TRIGGER, armInteractionCounts, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, COUNT_UP_ACTION, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, showToast, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, attachTooltips, showToastDesign, TOOLTIP_ATTRIBUTE, hidingHeadersIn, HeaderRuntime, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, layerFrame, rectInLayer, placeFloating, FloatingAlign, popoverSide, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, MarqueeTrait, MarqueeSpeed, MarqueeDirection, DisclosureRole, isExclusiveTrigger, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, isMarqueeRoot, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, MarqueeRuntime, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, buildMarqueeRecipe, buildCounterRecipe, buildReadingBarRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts, SLIDE_CAPTION_TRAIT, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_PLACEMENT_TRAIT, SliderPlacement, SliderFlag } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, MarqueeTrait, MarqueeSpeed, MarqueeDirection, DisclosureRole, isExclusiveTrigger, onCompositeItemState, isCompositeItemOn, ShopActionType, runShopAction, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, isMarqueeRoot, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, MarqueeRuntime, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, buildMarqueeRecipe, buildCounterRecipe, buildReadingBarRecipe, SHOP_RECIPES, ShopRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, attachShop, ShopRole, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts, SLIDE_CAPTION_TRAIT, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_PLACEMENT_TRAIT, SliderPlacement, SliderFlag } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts, FORM_CHANNEL_ROLE, channelHref, channelOpensNewTab, FORM_ACTIONS_ROLE, SUBMIT_BUTTON_NODE_TYPE, FORM_AFTER_SEND_TRAIT, FormAfterSend } from '@vectoriox/iox-ui/forms-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { HeaderTrait, HeaderBehaviour, HeaderEdge, pageOpeningScheme } from '@vectoriox/iox-ui/design-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { POPOVER_ACTION_TYPE_SET, TOAST_ACTION_TYPES, itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem, openedDialogId, DIALOG_CLOSING_ATTRIBUTE, cancelExit, runExitMotion, popoverOpenersSelector, popoverDomId } from '@vectoriox/iox-ui/actions-core';
+import { SAMPLE_PRODUCT, productInScope, simulatedCartTransport, storefrontCatalog, SAMPLE_STUDIO, SAMPLE_CART_LINE, SAMPLE_SWATCHES } from '@vectoriox/iox-ui/commerce-core';
+import { POPOVER_ACTION_TYPE_SET, TOAST_ACTION_TYPES, itemActionOf, BEHAVIOUR_ACTION_TYPES, SHOP_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem, openedDialogId, DIALOG_CLOSING_ATTRIBUTE, cancelExit, runExitMotion, popoverOpenersSelector, popoverDomId } from '@vectoriox/iox-ui/actions-core';
 import { NavRole, navShapeBreakpoint, entranceInteraction, entranceAction, sectionEntrances, EntrancePart } from '@vectoriox/iox-ui/generation-core';
 import { ScrollDriver, syncSceneAttributes, buildSceneRecipe } from '@vectoriox/iox-ui/scene-core';
 import Lenis from 'lenis';
@@ -5071,6 +5072,12 @@ class InteractionEngineService {
                 this.executeBehaviourAction(node, action, selfEl);
                 continue;
             }
+            // Shop actions (commerce E1c). Add to cart SIMULATES: the canvas's shop runtime adds to an in-memory sample bag
+            // (never a cart) and opens the drawer; Buy now is inert. The toast says what the live site does.
+            if (SHOP_ACTION_TYPES.has(action.type)) {
+                this.executeShopAction(action, selfEl);
+                continue;
+            }
             // Tier-B server actions (A2). ALWAYS a simulation here: the canvas is the ADMIN's
             // browser and a server action is a public-site write (an email, a webhook, a content
             // row) — the toast says what the LIVE site would do.
@@ -5120,6 +5127,17 @@ class InteractionEngineService {
         });
         this.contextStore.set(effect.slot, value);
     }
+    executeShopAction(action, selfEl) {
+        if (action.type === ShopActionType.AddToCart && selfEl)
+            void runShopAction(selfEl, action.type);
+        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+    }
+    /** The product a shop part on the canvas belongs to: its row's, else the route item's, else the page's first —
+     *  else the sample (board 10's vase), so an unbound part is still designable. */
+    productFor(el) {
+        return productInScope(this.rowItemFor(el), this.contextData) ?? SAMPLE_PRODUCT;
+    }
     /** The repeater item this element belongs to — the nearest marked row ancestor. */
     rowItemFor(el) {
         const row = el?.closest?.('[data-iox-row-idx]');
@@ -6717,6 +6735,13 @@ var CompositePresetId;
     CompositePresetId["Marquee"] = "marquee";
     CompositePresetId["Counter"] = "counter";
     CompositePresetId["ReadingBar"] = "reading-bar";
+    CompositePresetId["Price"] = "shop-price";
+    CompositePresetId["Variants"] = "shop-variants";
+    CompositePresetId["Quantity"] = "shop-quantity";
+    CompositePresetId["AddToCart"] = "shop-add";
+    CompositePresetId["BuyNow"] = "shop-buy-now";
+    CompositePresetId["CartButton"] = "shop-cart-button";
+    CompositePresetId["CartDrawer"] = "shop-cart-drawer";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
  *  composites (the Accordion — CC2, the Disclosure — CC2.1, Tabs — CC4a, the Segmented control — CC4b; the floating
@@ -6725,6 +6750,8 @@ var CompositePaletteGroup;
 (function (CompositePaletteGroup) {
     CompositePaletteGroup["ContentBlocks"] = "content-blocks";
     CompositePaletteGroup["Interactive"] = "interactive";
+    /** Commerce E1c (C-D16, commerce board 10): the parts a product page and the bag are built from. */
+    CompositePaletteGroup["Shop"] = "shop";
 })(CompositePaletteGroup || (CompositePaletteGroup = {}));
 const COMPOSITE_PRESETS = Object.freeze([
     {
@@ -6788,6 +6815,42 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'A thin bar that fills as the page is read — or its section: change it in Interactions.',
         build: create => buildReadingBarRecipe(create),
     },
+    // Commerce E1c — the shop parts (commerce board 10). Each fills from the product in scope and the bag at runtime.
+    {
+        id: CompositePresetId.Price, group: CompositePaletteGroup.Shop, name: 'Price', icon: 'ph-thin ph-coins',
+        description: 'The chosen option\'s price in your studio\'s currency, and its earlier price struck through when there is one.',
+        build: create => SHOP_RECIPES[ShopRecipe.Price](create),
+    },
+    {
+        id: CompositePresetId.Variants, group: CompositePaletteGroup.Shop, name: 'Options', icon: 'ph-thin ph-swatches',
+        description: 'One row per option — colours as swatches, a few words as chips, a long list as a menu. A sold-out option stays visible and says so.',
+        build: create => SHOP_RECIPES[ShopRecipe.Variants](create),
+    },
+    {
+        id: CompositePresetId.Quantity, group: CompositePaletteGroup.Shop, name: 'Quantity', icon: 'ph-thin ph-plus-minus',
+        description: 'How many to add — never below one, never above what is in stock.',
+        build: create => SHOP_RECIPES[ShopRecipe.Quantity](create),
+    },
+    {
+        id: CompositePresetId.AddToCart, group: CompositePaletteGroup.Shop, name: 'Add to cart', icon: 'ph-thin ph-shopping-cart-simple',
+        description: 'Adds the chosen option and quantity to the bag, reads "Added ✓" for a moment and opens the bag. On the canvas it adds a sample.',
+        build: create => SHOP_RECIPES[ShopRecipe.Add](create),
+    },
+    {
+        id: CompositePresetId.BuyNow, group: CompositePaletteGroup.Shop, name: 'Buy now', icon: 'ph-thin ph-lightning',
+        description: 'Straight to checkout with the chosen option. Does nothing on the canvas.',
+        build: create => SHOP_RECIPES[ShopRecipe.BuyNow](create),
+    },
+    {
+        id: CompositePresetId.CartButton, group: CompositePaletteGroup.Shop, name: 'Cart button', icon: 'ph-thin ph-handbag',
+        description: 'The bag with its live count — put it in your header. It opens the cart drawer.',
+        build: create => SHOP_RECIPES[ShopRecipe.CartButton](create),
+    },
+    {
+        id: CompositePresetId.CartDrawer, group: CompositePaletteGroup.Shop, name: 'Cart drawer', icon: 'ph-thin ph-tote',
+        description: 'The bag: its lines, the subtotal with VAT included, Check out and Keep shopping. Slides in from the edge; a sheet on a phone.',
+        build: create => SHOP_RECIPES[ShopRecipe.CartDrawer](create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -9912,11 +9975,17 @@ class BuilderComponent {
             const slotValues = this.contextStore.values();
             if (!Object.keys(slotValues).length)
                 return;
-            const slotKeys = collectContextSlotKeys(this.layout);
+            // The globals too: a header's cart button reads `$cart.count` (commerce E1c).
+            const nodes = [...(this.layout ?? []), ...(this.globalElements ?? [])];
+            const slotKeys = collectContextSlotKeys(nodes);
             if (!slotKeys.size)
                 return;
-            this.applyContextBindings(this.layout, withContextSlots({}, slotValues), slotKeys);
+            this.applyContextBindings(nodes, withContextSlots({}, slotValues), slotKeys);
         }, ...(ngDevMode ? [{ debugName: "contextEffect" }] : []));
+        /** Commerce E1c: the shop parts run on the canvas — the live site's runtime over an in-memory SAMPLE bag that starts
+         *  with one line (so the drawer has a line to design) and is never written anywhere. */
+        this.canvasShop = null;
+        this.instanceRegistry = inject(ComponentInstanceRegistryService);
         this.layout = [];
         this.dataSources = [];
         this.orgId = 'default';
@@ -10113,6 +10182,7 @@ class BuilderComponent {
             this.autoFitViewport();
         this.overlayService.setContainer(this.previewCanvas?.nativeElement || null);
         this.attachCanvasFloating();
+        this.attachCanvasShop();
         // Builder dispatches synthetic 'scroll' events on .preview-lenis-content from
         // the Lenis callback — point the overlay scroll listener at that element.
         // (Not previewScrollRef which is the Lenis eventsTarget — dispatching there
@@ -10237,6 +10307,44 @@ class BuilderComponent {
         this.canvasTooltips = attachTooltips(root, { topLayer: false, container: canvasFloatingContainer });
         this.floatingSub = this.canvasDesignState.state$.subscribe(state => this.applyFloatingDesign(state.tooltips, state.toast));
     }
+    attachCanvasShop() {
+        const root = this.previewCanvas?.nativeElement;
+        if (!root || this.canvasShop)
+            return;
+        const transport = simulatedCartTransport(storefrontCatalog(SAMPLE_PRODUCT), SAMPLE_STUDIO, { lines: [SAMPLE_CART_LINE] });
+        this.canvasShop = attachShop(root, {
+            transport,
+            observe: true,
+            productFor: el => {
+                const product = this.interactionEngine.productFor(el);
+                transport.addEntries(storefrontCatalog(product));
+                return product;
+            },
+            publish: (slot, value) => this.contextStore.set(slot, value),
+            swatches: product => (product === SAMPLE_PRODUCT ? SAMPLE_SWATCHES : null),
+            openDrawer: () => {
+                const drawer = this.findByRole([...(this.layout ?? []), ...(this.globalElements ?? [])], ShopRole.CartDrawer);
+                if (drawer?.id)
+                    this.instanceRegistry.get(drawer.id)?.open?.();
+            },
+            goToCheckout: () => window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail: { type: 'startCheckout', params: {}, target: '' } })),
+            onCloneClick: part => {
+                const entry = this.overlayService.findNodeByElement(part);
+                if (entry)
+                    this.handleClick({ element: entry.ref.element, node: entry.node, componentRef: entry.ref.componentRef });
+            },
+        });
+    }
+    findByRole(nodes, role) {
+        for (const node of nodes ?? []) {
+            if (node.role === role)
+                return node;
+            const below = this.findByRole(node.children ?? [], role);
+            if (below)
+                return below;
+        }
+        return null;
+    }
     applyFloatingDesign(tooltips, toast) {
         const root = this.previewCanvas?.nativeElement;
         const runtime = this.canvasTooltips;
@@ -10281,6 +10389,8 @@ class BuilderComponent {
         return null;
     }
     ngOnDestroy() {
+        this.canvasShop?.destroy();
+        this.canvasShop = null;
         this.floatingSub?.unsubscribe();
         this.canvasTooltips?.destroy();
         this.canvasTooltips = null;
@@ -14449,12 +14559,13 @@ function button(styleId, label, createConfig, styles = {}) {
     return withChildren(btn, [text(label, createConfig, BUTTON_LABEL_STYLE)]);
 }
 /** A Container sized by its content: the palette Container's 200px drop-zone min-height is canvas
- *  furniture, and a specimen has no drop zone. */
+ *  furniture, and a specimen has no drop zone. A style that owns its min-height (the quantity stepper) keeps it. */
 function box(createConfig, styleId) {
     const node = createConfig('Container');
     if (styleId)
         wearing(node, styleId);
-    return styled(node, { minHeight: '0' });
+    const ownsMinHeight = !!styleId && elementStyleById(styleId)?.base['minHeight'] !== undefined;
+    return ownsMinHeight ? node ?? null : styled(node, { minHeight: '0' });
 }
 function boxed(styleId, createConfig, children, styles) {
     return withChildren(styled(box(createConfig, styleId), styles), children);