@vectoriox/iox-builder 5.0.1 → 5.1.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, InjectionToken, ViewChild, effect, Optional, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, InjectionToken, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, effect, Optional, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i16 from '@angular/forms';
@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, syncElementStyleMarker, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, IS_PREVIEW, emptyImageSrc, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, syncNodeDesignClasses, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -655,6 +655,15 @@ class ListGroupStyleConfig extends GroupStyleConfig {
  * Every call produces new TraitConfig instances so different component nodes
  * never share mutable state.
  */
+/**
+ * The section colour scheme (design-system §3c) — a CONTENT trait, stored in `props` and saved with
+ * the page, never a style prop: it becomes the class `iox-scheme-<id>` (the shared
+ * `nodeDesignClasses`) where the token sheet re-declares the section's tokens. Edited in the Style
+ * panel beside the element style; the Bindings panel does not list it.
+ */
+function buildColorSchemeTrait() {
+    return new TraitConfig(COLOR_SCHEME_TRAIT, 'Section colours', TraitInputType.Select, COLOR_SCHEMES.map(s => ({ label: s.label, value: s.id })), ColorScheme.Default);
+}
 function buildFullStyleTraits() {
     return [
         new PositionGroupStyleConfig(),
@@ -4495,6 +4504,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Canvas data preview used to come from host-provided content services (IOX_CONTENT_SERVICE /
+ * IOX_SHOP_SERVICE), whose `getContent(contentType, orgId)` hit the ADMIN resources endpoint and
+ * accepted no filters — so the Repeater/Slider ignored every data-source filter. Data now flows
+ * through BuilderDataSourceService + the shared planDataSource, configured with
+ * IOX_DATA_SOURCE_ENDPOINTS. Those tokens are gone; do not reintroduce a fetch that bypasses it.
+ */
+/** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
+const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
+/**
+ * Translates the builder library's OWN chrome.
+ *
+ * The library cannot depend on ngx-translate — that is the host app's choice — but its toolbar was
+ * hardcoded English, which shows through as untranslated controls in a Hebrew/RTL admin. This token
+ * lets the host route those strings through its own i18n while the library keeps working standalone:
+ * unprovided, `defaultBuilderLabels` returns the English text, so nothing ever renders a raw key.
+ *
+ * Keys are namespaced `builder.chrome.*` and listed in `BUILDER_CHROME_EN` below — that object is
+ * the contract. A host providing this token should add those keys to its own bundles.
+ */
+const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
+    providedIn: 'root',
+    factory: () => defaultBuilderLabels,
+});
+/** Standalone behaviour: the English text the library ships with. */
+const defaultBuilderLabels = (_key, fallback) => fallback;
+/**
+ * Every user-visible string in the builder's own chrome, so a host can copy this into its bundles
+ * in one go rather than discovering keys one missing label at a time.
+ */
+const BUILDER_CHROME_EN = Object.freeze({
+    'builder.chrome.select': 'Select',
+    'builder.chrome.pan': 'Pan',
+    'builder.chrome.style': 'Style',
+    'builder.chrome.publish': 'Publish',
+    'builder.chrome.unpublish': 'Unpublish',
+    'builder.chrome.breakpoint': 'Breakpoint',
+    'builder.chrome.screenWidth': 'Screen width',
+    'builder.chrome.zoom': 'Zoom',
+    'builder.chrome.audit': 'Responsive audit',
+    'builder.chrome.auditHint': 'Responsive audit — what is broken at this width',
+    'builder.chrome.undo': 'Undo',
+    'builder.chrome.redo': 'Redo',
+    'builder.chrome.save': 'Save',
+    'builder.chrome.preview': 'Preview',
+    'builder.chrome.addImage': 'Add image',
+});
+
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -4557,6 +4614,8 @@ class RenderDirective {
         this.onMouseEnter = new EventEmitter();
         this.onMouseLeave = new EventEmitter();
         this.childSubs = [];
+        this.isPreview = inject(IS_PREVIEW, { optional: true }) ?? false;
+        this.labels = inject(IOX_BUILDER_LABELS);
         /** Host element drag was registered on (collapsed path) — unregistered on destroy. */
         this.hostDragEl = null;
     }
@@ -4705,6 +4764,14 @@ class RenderDirective {
         // safeSetInput for every component that does not declare it.
         if (node.responsive)
             safeSetInput(componentRef, 'responsive', node.responsive);
+        // Empty images (DS3): a MARKED Image with no source shows the shared placeholder — the
+        // "Add image" label on the canvas, the bare blank in Preview (IS_PREVIEW), which is what the
+        // live site shows. An unmarked Image gets null and renders exactly as before.
+        if (node.type === 'Image') {
+            const src = node.traits?.find(t => t.name === 'src')?.default;
+            const label = this.isPreview ? null : this.labels('builder.chrome.addImage', 'Add image');
+            safeSetInput(componentRef, 'emptySrc', emptyImageSrc(node, src, label));
+        }
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -4824,10 +4891,12 @@ class RenderDirective {
         // For layout components the host element is <app-section>; for leaf components
         // it is e.g. <app-card>. Either way this is the correct inspectable element.
         const nativeEl = componentRef.location?.nativeElement ?? null;
-        // The element-style marker (design-system §3b-bis) — on the HOST, as both engine paths do:
-        // component CSS that carries the system look is scoped to it, so a node saved before DS2
-        // keeps its exact pre-DS2 look. Clones carry it too (they render the same look).
-        syncElementStyleMarker(nativeEl, node.elementStyle);
+        // The design-system classes — the element-style marker (§3b-bis) and the section colour scheme
+        // (§3c) — on the HOST, as both engine paths do, from the ONE shared helper. Component CSS that
+        // carries the system look is scoped to the marker, so a node saved before DS2 keeps its exact
+        // pre-DS2 look; the scheme class is where the token sheet re-declares the section's tokens.
+        // Clones carry both (they render the same look).
+        syncNodeDesignClasses(nativeEl, node);
         // Custom element host defaults to display:inline. Set it to block so it participates
         // properly in layout and CDK can capture its bounding rect. SKIP for directive-hosts: the
         // host is a real element with its own display, and an inline style here out-ranks both
@@ -5568,53 +5637,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
-/**
- * Canvas data preview used to come from host-provided content services (IOX_CONTENT_SERVICE /
- * IOX_SHOP_SERVICE), whose `getContent(contentType, orgId)` hit the ADMIN resources endpoint and
- * accepted no filters — so the Repeater/Slider ignored every data-source filter. Data now flows
- * through BuilderDataSourceService + the shared planDataSource, configured with
- * IOX_DATA_SOURCE_ENDPOINTS. Those tokens are gone; do not reintroduce a fetch that bypasses it.
- */
-/** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
-const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
-/**
- * Translates the builder library's OWN chrome.
- *
- * The library cannot depend on ngx-translate — that is the host app's choice — but its toolbar was
- * hardcoded English, which shows through as untranslated controls in a Hebrew/RTL admin. This token
- * lets the host route those strings through its own i18n while the library keeps working standalone:
- * unprovided, `defaultBuilderLabels` returns the English text, so nothing ever renders a raw key.
- *
- * Keys are namespaced `builder.chrome.*` and listed in `BUILDER_CHROME_EN` below — that object is
- * the contract. A host providing this token should add those keys to its own bundles.
- */
-const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
-    providedIn: 'root',
-    factory: () => defaultBuilderLabels,
-});
-/** Standalone behaviour: the English text the library ships with. */
-const defaultBuilderLabels = (_key, fallback) => fallback;
-/**
- * Every user-visible string in the builder's own chrome, so a host can copy this into its bundles
- * in one go rather than discovering keys one missing label at a time.
- */
-const BUILDER_CHROME_EN = Object.freeze({
-    'builder.chrome.select': 'Select',
-    'builder.chrome.pan': 'Pan',
-    'builder.chrome.style': 'Style',
-    'builder.chrome.publish': 'Publish',
-    'builder.chrome.unpublish': 'Unpublish',
-    'builder.chrome.breakpoint': 'Breakpoint',
-    'builder.chrome.screenWidth': 'Screen width',
-    'builder.chrome.zoom': 'Zoom',
-    'builder.chrome.audit': 'Responsive audit',
-    'builder.chrome.auditHint': 'Responsive audit — what is broken at this width',
-    'builder.chrome.undo': 'Undo',
-    'builder.chrome.redo': 'Redo',
-    'builder.chrome.save': 'Save',
-    'builder.chrome.preview': 'Preview',
-});
-
 class ToolbarComponent {
     get isPublished() {
         return this.pageStatus === 'published';
@@ -6543,7 +6565,7 @@ class BuilderComponent {
             this.initLenis();
             // Background / typography: until this existed the Page panel wrote a background
             // that only appeared once the site was published.
-            this.pageStyleCss = compilePageStyle(this.pageSettings?.style);
+            this.pageStyleCss = compilePageStyle(this.pageSettings?.style, { designSystem: this.pageSettings?.designSystem === true });
         }
         if (changes['globalElements']) {
             // The *ngIf on the global overlay renders after this hook — defer so
@@ -10638,6 +10660,7 @@ class BuilderContainerComponentConfig extends ComponentConfig {
         this.children = [];
         this.traits = [
             new TraitConfig('htmlTag', 'HTML Tag', TraitInputType.Select, ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'], 'div'),
+            buildColorSchemeTrait(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -11063,6 +11086,7 @@ class BuilderLinkedContainerConfig extends ComponentConfig {
                 { label: 'Parent frame', value: '_parent' },
                 { label: 'Full window', value: '_top' },
             ], '_self'),
+            buildColorSchemeTrait(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -11189,7 +11213,7 @@ class SectionComponentConfig extends ComponentConfig {
     constructor() {
         super('Section', 'app-section', 'ph-thin ph-rows', 'Layout');
         this.children = [];
-        this.traits = [];
+        this.traits = [buildColorSchemeTrait()];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
             width: 'auto',