@vectoriox/iox-ui 5.38.0 → 5.39.0

package/fesm2022/vectoriox-iox-ui-generation-core.mjs

@@ -1,6 +1,6 @@
 import { NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, elementStyleById, ownedTraitsOf, applyElementStyle, flavorPackById, parseHexColor, SPEC_AXES, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
 import { formPresetById } from '@vectoriox/iox-ui/forms-core';
-import { CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, buildCardRecipe, findByRole, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } from '@vectoriox/iox-ui/composite-core';
+import { CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, buildCardRecipe, findByRole, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, pickTabsAutoBinds, tabsListOf, tabsPanelsOf, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } from '@vectoriox/iox-ui/composite-core';
 
 // GENERATED from iox-ai-guidance flavor-spec.v1.json — do not edit; re-run scripts/gen-flavor-spec.mjs
 // (npm run gen:flavor-spec). The JSON is itself generated by iox-ai-guidance
@@ -981,6 +981,52 @@ const SPEC_SITE_PATTERNS = {
             ]
         }
     },
+    "feature.tabbed": {
+        "family": "feature",
+        "label": "Features — tabs that switch",
+        "node": {
+            "t": "Section",
+            "es": "section",
+            "c": [
+                {
+                    "t": "Container",
+                    "es": "box",
+                    "lay": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "14px",
+                        "maxWidth": "1100px",
+                        "width": "100%",
+                        "margin": "0px auto 0px auto"
+                    },
+                    "c": [
+                        {
+                            "t": "Text",
+                            "es": "eyebrow",
+                            "slot": "eyebrow",
+                            "ph": "copy",
+                            "text": "What we offer"
+                        },
+                        {
+                            "t": "Heading",
+                            "es": "h2",
+                            "level": "h2",
+                            "slot": "title",
+                            "ph": "copy",
+                            "text": "What we design"
+                        },
+                        {
+                            "t": "Container",
+                            "recipe": "tabs",
+                            "src": "$binding?",
+                            "ph": "copy",
+                            "name": "What we design"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
     "hero.full-bleed-media": {
         "family": "hero",
         "label": "Hero — words over a background video",
@@ -2029,7 +2075,10 @@ const NODE_BASELINES = {
             "htmlTag",
             "colorScheme",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -4262,7 +4311,10 @@ const NODE_BASELINES = {
             "source",
             "limit",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -6559,6 +6611,9 @@ var PatternRecipe;
     /** CC2: the Accordion — Manual (three placeholder items), or From content when the section names a list
      *  `binding` (`src: '$binding?'`): one template item bound to the type's question / answer fields. */
     PatternRecipe["Accordion"] = "accordion";
+    /** CC4a: Tabs — Manual (three placeholder tabs), or From content when the section names a list `binding`: the tab
+     *  list and the panels are both Repeaters over it, one row giving its tab AND its panel. */
+    PatternRecipe["Tabs"] = "tabs";
     /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
     PatternRecipe["Carousel"] = "carousel";
     /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
@@ -8266,6 +8321,8 @@ const CARD_BINDS = {
 function composeRecipe(pn, id, repeater, ctx) {
     if (pn.recipe === PatternRecipe.Accordion)
         return composeAccordion(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Tabs)
+        return composeTabs(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Carousel)
         return composeCarousel(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Lightbox)
@@ -8355,6 +8412,71 @@ function composeAccordion(pn, id, ctx) {
     addBinding(accordionAnswerOf(template), { prop: ACCORDION_BIND_PROP, source: binding, path: picks.answer });
     return root;
 }
+/** The content type a section binding lists, through its data source. */
+function boundContentType(binding, ctx) {
+    const source = ctx.plan.dataSources.find(d => d.alias === binding);
+    return source && 'contentType' in source ? ctx.plan.contentTypes.find(t => t.name === source.contentType) : undefined;
+}
+const TABS_ROOT_KEY = 'tabs';
+const TABS_HOLDER_KEYS = new Set(['list', 'panels']);
+/**
+ * Tabs (CC4a) — the composite-core recipe stamped with this composer's factory. Manual (no section binding): three
+ * tabs whose words are placeholders the studio rewrites (`ph: 'copy'`) and whose pictures it supplies — never invented.
+ * From content (the section names a list `binding`, R3's AI path): the tab list and the panels holder are BOTH
+ * Repeaters over that list, each holding its one template (one row → its tab AND its panel, paired by the row's id at
+ * render), the tab's words, the panel's words and its picture bound to the type's first short-text, long-text and image
+ * fields (`pickTabsAutoBinds`, the builder switch's rule), limit 6. The tab list is named by the pattern's `name`.
+ */
+function composeTabs(pn, id, ctx) {
+    const binding = pn.src === PatternDirective.OptionalBinding || pn.src === PatternDirective.Binding ? ctx.section?.binding ?? null : null;
+    if (pn.src === PatternDirective.Binding && !binding)
+        throw new ComposeError(`${id}: "$binding" with no section binding`);
+    const factory = (spec) => {
+        const type = binding && TABS_HOLDER_KEYS.has(spec.key) ? REPEATER : spec.type;
+        return create(spec.key === TABS_ROOT_KEY ? id : `${id}-${spec.key}`, type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);
+    };
+    const root = buildTabsRecipe(factory, { tabs: binding ? TABS_WORDS.slice(0, 1) : undefined, label: pn.name });
+    const tree = root;
+    if (!binding) {
+        if (pn.ph === PatternPlaceholder.Copy) {
+            for (const tab of tabsTriggers(tree)) {
+                const words = tabLabelNodeOf(tab);
+                if (words)
+                    ctx.placeholders.push({ nodeId: words.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.[TABS_LABEL_BIND_PROP] ?? '') });
+            }
+            for (const panel of tabsPanels(tree)) {
+                const text = tabPanelTextOf(panel);
+                if (text)
+                    ctx.placeholders.push({ nodeId: text.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(text.props?.[TABS_TEXT_BIND_PROP] ?? '') });
+                const image = tabPanelImageOf(panel);
+                if (image)
+                    ctx.placeholders.push({ nodeId: image.id, owner: ctx.owner, kind: PlaceholderKind.Image, text: '' });
+            }
+        }
+        return root;
+    }
+    const type = boundContentType(binding, ctx);
+    const picks = pickTabsAutoBinds((type?.fields ?? []).map(f => ({ name: f.name, type: f.type, controller: f.controller })));
+    if (!picks.label || !picks.text) {
+        throw new ComposeError(`${id}: "${binding}" has no short-text field for the tab and long-text field for its panel`);
+    }
+    for (const holder of [tabsListOf(tree), tabsPanelsOf(tree)]) {
+        addBinding(holder, { prop: 'source', source: binding, path: '' });
+        setProp(holder, 'limit', TABS_CONTENT_LIMIT);
+    }
+    const [tab] = tabsTriggers(tree);
+    const [panel] = tabsPanels(tree);
+    delete tab.itemKey;
+    delete panel.itemKey;
+    addBinding(tabLabelNodeOf(tab), { prop: TABS_LABEL_BIND_PROP, source: binding, path: picks.label });
+    addBinding(tabPanelTextOf(panel), { prop: TABS_TEXT_BIND_PROP, source: binding, path: picks.text });
+    const image = tabPanelImageOf(panel);
+    if (image && picks.image) {
+        addBinding(image, { prop: TABS_IMAGE_BIND_PROP, source: binding, path: picks.image });
+        addBinding(image, { prop: 'alt', source: binding, path: picks.label });
+    }
+    return root;
+}
 /** A recipe's node factory for this composer: ids derive from the recipe's keys (`<id>-<key>`, the root `<id>`). */
 function recipeFactory(id, rootKey) {
     return spec => create(spec.key === rootKey ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);