@vectoriox/iox-builder 1.4.14 → 1.4.16

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1312,6 +1312,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: OverlayService }] });
 
+// Virtual trait → composed CSS property helpers.
+//
+// Several style traits are "virtual" — they don't map 1:1 to a CSS property but
+// are components of a multi-function CSS value.  composeVirtualTraits() strips
+// these virtual keys from the style map and replaces them with the correctly
+// composed CSS properties (filter, backdrop-filter, transform, transition).
+//
+// The same function is used by the render directive (initial mount + state
+// restore) and by the style panel's onUpdate / setStateOverride paths, so
+// the CSS output is always consistent regardless of how styles are applied.
+// ─── Filter ──────────────────────────────────────────────────────────────────
+const FILTER_FUNS = [
+    ['filterBlur', 'blur', '0px'],
+    ['filterBrightness', 'brightness', '1'],
+    ['filterContrast', 'contrast', '1'],
+    ['filterGrayscale', 'grayscale', '0'],
+    ['filterSaturate', 'saturate', '1'],
+    ['filterHueRotate', 'hue-rotate', '0deg'],
+    ['filterSepia', 'sepia', '0'],
+    ['filterInvert', 'invert', '0'],
+];
+// ─── Backdrop-filter ─────────────────────────────────────────────────────────
+const BACKDROP_FUNS = [
+    ['backdropBlur', 'blur', '0px'],
+    ['backdropBrightness', 'brightness', '1'],
+    ['backdropContrast', 'contrast', '1'],
+    ['backdropSaturate', 'saturate', '1'],
+];
+// ─── Transform ───────────────────────────────────────────────────────────────
+const TRANSFORM_FUNS = [
+    ['translateX', 'translateX', '0px'],
+    ['translateY', 'translateY', '0px'],
+    ['scaleX', 'scaleX', '1'],
+    ['scaleY', 'scaleY', '1'],
+    ['rotate', 'rotate', '0deg'],
+    ['skewX', 'skewX', '0deg'],
+    ['skewY', 'skewY', '0deg'],
+];
+// ─── All virtual trait names ──────────────────────────────────────────────────
+const VIRTUAL_TRAIT_KEYS = new Set([
+    ...FILTER_FUNS.map(([t]) => t),
+    ...BACKDROP_FUNS.map(([t]) => t),
+    ...TRANSFORM_FUNS.map(([t]) => t),
+    'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+]);
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function buildFns(funs, src) {
+    return funs
+        .filter(([t, , d]) => src[t] != null && src[t] !== '' && src[t] !== d)
+        .map(([t, fn]) => `${fn}(${src[t]})`)
+        .join(' ');
+}
+// ─── Public API ───────────────────────────────────────────────────────────────
+/**
+ * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
+ *
+ * When composing a partial state-override map (hover, active…), pass the full
+ * base style map as `base` so non-overridden components (e.g. filterBrightness
+ * when only filterBlur is overridden) are preserved in the composed output.
+ * When operating on a complete style map, omit `base` — it defaults to `raw`.
+ */
+function composeVirtualTraits(raw, base = raw) {
+    // Copy all non-virtual properties as-is
+    const result = {};
+    for (const [k, v] of Object.entries(raw)) {
+        if (!VIRTUAL_TRAIT_KEYS.has(k))
+            result[k] = v;
+    }
+    // Merge base values for any virtual key absent from the partial override map
+    const merged = (funs) => {
+        const m = {};
+        for (const [t] of funs)
+            m[t] = raw[t] ?? base[t];
+        return m;
+    };
+    // filter
+    const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
+    if (filterStr)
+        result['filter'] = filterStr;
+    // backdrop-filter
+    const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
+    if (backdropStr)
+        result['backdropFilter'] = backdropStr;
+    // transform
+    const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
+    if (transformStr)
+        result['transform'] = transformStr;
+    // transition — only emit when duration is non-zero
+    const dur = raw['transitionDuration'] ?? base['transitionDuration'];
+    const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
+    const del = raw['transitionDelay'] ?? base['transitionDelay'];
+    if (dur && ease && dur !== '0ms' && dur !== '0s') {
+        const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
+        result['transition'] = `all ${dur} ${ease}${delPart}`;
+    }
+    return result;
+}
+
 var StyleCategory;
 (function (StyleCategory) {
     StyleCategory["Layout"] = "Layout";
@@ -1646,6 +1744,7 @@ class TypographyGroupStyleConfig extends GroupStyleConfig {
 class EffectsGroupStyleConfig extends GroupStyleConfig {
     constructor() {
         super(StyleCategory.Effects, [
+            // ── Visibility ────────────────────────────────────────
             new TraitConfig('opacity', 'Opacity', TraitInputType.Scrub, { min: 0, max: 1, step: 0.01, units: [''] }, '1'),
             new TraitConfig('mixBlendMode', 'Blend Mode', TraitInputType.Select, [
                 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
@@ -1656,6 +1755,37 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
                 'auto', 'default', 'pointer', 'text', 'move', 'not-allowed',
                 'grab', 'grabbing', 'crosshair', 'zoom-in', 'zoom-out', 'none',
             ], 'auto'),
+            // ── Shadow ────────────────────────────────────────────
+            new TraitConfig('boxShadow', 'Box Shadow', TraitInputType.Text, undefined, ''),
+            new TraitConfig('textShadow', 'Text Shadow', TraitInputType.Text, undefined, ''),
+            // ── Transform (virtual — composed to CSS transform: …) ─
+            new TraitConfig('translateX', 'TX', TraitInputType.Scrub, { min: -2000, max: 2000, step: 1, units: UNITS_ALL }, '0px', true),
+            new TraitConfig('translateY', 'TY', TraitInputType.Scrub, { min: -2000, max: 2000, step: 1, units: UNITS_ALL }, '0px', true),
+            new TraitConfig('scaleX', 'SX', TraitInputType.Scrub, { min: 0, max: 5, step: 0.01, units: [''] }, '1', true),
+            new TraitConfig('scaleY', 'SY', TraitInputType.Scrub, { min: 0, max: 5, step: 0.01, units: [''] }, '1', true),
+            new TraitConfig('rotate', 'Rot', TraitInputType.Scrub, { min: -360, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('skewX', 'SkX', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('skewY', 'SkY', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            // ── Filter (virtual — composed to CSS filter: …) ──────
+            new TraitConfig('filterBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
+            new TraitConfig('filterBrightness', 'Bright', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('filterContrast', 'Contr', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('filterGrayscale', 'Gray', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
+            new TraitConfig('filterSaturate', 'Sat', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('filterHueRotate', 'Hue', TraitInputType.Scrub, { min: 0, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('filterSepia', 'Sepia', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
+            new TraitConfig('filterInvert', 'Invert', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
+            // ── Backdrop filter (virtual — composed to CSS backdrop-filter: …)
+            new TraitConfig('backdropBlur', 'B.Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
+            new TraitConfig('backdropBrightness', 'B.Bri', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('backdropContrast', 'B.Con', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('backdropSaturate', 'B.Sat', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            // ── Transition (virtual — composed to CSS transition: all …) ──
+            new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms'),
+            new TraitConfig('transitionTimingFunction', 'Easing', TraitInputType.Select, [
+                'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out',
+            ], 'ease'),
+            new TraitConfig('transitionDelay', 'Delay', TraitInputType.Scrub, { min: 0, max: 2000, step: 50, units: ['ms'] }, '0ms'),
         ]);
     }
 }
@@ -1973,13 +2103,14 @@ class RenderDirective {
         const cssId = node.styleId ?? node.id;
         // Register CSS rules in the central stylesheet (inner + outer split).
         if (cssId) {
-            this.styleRegistry.upsert(cssId, initialStyle);
+            const composedBase = composeVirtualTraits(initialStyle);
+            this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
             if (node.stateStyles) {
                 for (const state of Object.keys(node.stateStyles)) {
                     const stateMap = node.stateStyles[state];
                     if (stateMap && Object.keys(stateMap).length) {
-                        this.styleRegistry.upsert(cssId, stateMap, state);
+                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
                     }
                 }
             }
@@ -4913,5 +5044,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map