@vectoriox/iox-ui 4.4.3 → 4.5.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1940,14 +1940,19 @@ function styleKeyToKebab(key) {
  *   - border-* — the initial `medium` width + interaction with border-style makes it non-trivial.
  */
 const NOOP_INITIAL_VALUES = {
-    'width': 'auto', 'height': 'auto',
-    'min-width': 'auto', 'min-height': 'auto',
-    'max-width': 'none', 'max-height': 'none',
-    'position': 'static',
-    'top': 'auto', 'right': 'auto', 'bottom': 'auto', 'left': 'auto',
-    'opacity': '1', 'z-index': 'auto',
-    'flex-grow': '0', 'flex-shrink': '1', 'flex-basis': 'auto',
-    'transform': 'none', 'box-shadow': 'none',
+    'width': ['auto'], 'height': ['auto'],
+    'min-width': ['auto'], 'min-height': ['auto'],
+    'max-width': ['none', 'auto'], 'max-height': ['none', 'auto'], // `auto` is invalid for max-* → inert
+    'position': ['static'],
+    'top': ['auto'], 'right': ['auto'], 'bottom': ['auto'], 'left': ['auto'],
+    'opacity': ['1'], 'z-index': ['auto'],
+    'flex-grow': ['0'], 'flex-shrink': ['1'], 'flex-basis': ['auto'],
+    'flex-direction': ['row'], 'flex-wrap': ['nowrap'],
+    'gap': ['0', '0px', 'normal'],
+    'border-radius': ['0', '0px'],
+    'aspect-ratio': ['auto'],
+    'mix-blend-mode': ['normal'],
+    'transform': ['none'], 'box-shadow': ['none'],
 };
 /**
  * Compile a flat, camelCase style map into an array of `"prop: value"` CSS
@@ -1968,7 +1973,7 @@ function compileDeclarations(props, importantProps) {
         const prop = styleKeyToKebab(k);
         const val = rewriteViewportUnits(String(v));
         const isImportant = importantProps?.has(k) ?? false;
-        if (!isImportant && NOOP_INITIAL_VALUES[prop] === val.trim().toLowerCase())
+        if (!isImportant && NOOP_INITIAL_VALUES[prop]?.includes(val.trim().toLowerCase()))
             continue;
         out.push(`${prop}: ${val}${isImportant ? ' !important' : ''}`);
     }
@@ -2062,6 +2067,123 @@ function renderDefaultDeclarations(type, styleProps, hasHoverState) {
     return out;
 }
 
+// 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).
+//
+// SHARED (iox-ui): consumed by BOTH the builder (render.directive + style panel)
+// and the SSR engine (LayoutRendererService). It MUST live here, not in iox-builder,
+// because the engine does not depend on iox-builder — without it the engine emitted
+// the raw virtual keys (`translate-x`, `filter-blur`, `scale-x`…) as invalid CSS.
+// Run this BEFORE compileDeclarations so the CSS output is identical on both sides.
+// ─── 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'],
+];
+// ─── ::marker pseudo-element ─────────────────────────────────────────────────
+const MARKER_FUNS = [
+    ['markerColor', 'color'],
+    ['markerFontSize', 'fontSize'],
+];
+// ─── 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',
+    ...MARKER_FUNS.map(([t]) => t),
+]);
+// ─── 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}`;
+    }
+    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
+    // can emit a separate `.iox-node-{id}::marker { … }` rule.
+    const markerStyles = {};
+    for (const [trait, cssProp] of MARKER_FUNS) {
+        const val = raw[trait] ?? base[trait];
+        if (val != null && val !== '')
+            markerStyles[cssProp] = val;
+    }
+    if (Object.keys(markerStyles).length) {
+        result['__markerStyles'] = markerStyles;
+    }
+    return result;
+}
+
 /**
  * Shared data-source resolving pattern — the SINGLE source of truth for how an IoxDataSource
  * becomes a backend fetch, consumed by BOTH the page builder (iox-cms-client bindings panel) and
@@ -2204,6 +2326,239 @@ function dataSourcePlanToRequest(plan, endpoints) {
     }
 }
 
+/**
+ * Cinematic page-transition presets — the SINGLE SOURCE OF TRUTH shared by the page builder
+ * (preview) and the SSR client engine (production). Pure, transport-agnostic: this module only
+ * describes WAAPI keyframe pairs + timing/ordering. It never touches the DOM.
+ *
+ * A page transition plays TWO synchronized WAAPI animations at once — an `out` animation on a
+ * snapshot of the outgoing page and an `in` animation on the incoming page — inside a shared
+ * `perspective` container, gated on BOTH finishing (the "cinematic" feel, à la Codrops
+ * PageTransitions). The consumer supplies the DOM (snapshot layer + live page) and calls
+ * `element.animate(frames, options)`; it does NOT redefine the frames.
+ *
+ * @see architecture/builder/page-transitions.md
+ */
+/** Perspective (px) applied to the transition container unless a preset overrides it. */
+const DEFAULT_PAGE_TRANSITION_PERSPECTIVE = 1200;
+/** Default transition duration (ms) when the page does not specify one. */
+const DEFAULT_PAGE_TRANSITION_DURATION = 600;
+// ── Keyframe helpers ────────────────────────────────────────────────────────
+const FADE_OUT = [{ opacity: 1 }, { opacity: 0 }];
+const FADE_IN = [{ opacity: 0 }, { opacity: 1 }];
+const move = (from, to) => [{ transform: from }, { transform: to }];
+// ── The preset catalog ──────────────────────────────────────────────────────
+// Keyed by a stable preset id persisted in pageSettings.routeAnimation.transition.
+const PAGE_TRANSITION_PRESETS = {
+    // ── Move (both pages slide; no fade — the classic Codrops "move") ──────────
+    'move-left': {
+        category: 'move', label: 'Move left / from right',
+        outKeyframes: move('translateX(0)', 'translateX(-100%)'),
+        inKeyframes: move('translateX(100%)', 'translateX(0)'),
+    },
+    'move-right': {
+        category: 'move', label: 'Move right / from left',
+        outKeyframes: move('translateX(0)', 'translateX(100%)'),
+        inKeyframes: move('translateX(-100%)', 'translateX(0)'),
+    },
+    'move-up': {
+        category: 'move', label: 'Move up / from bottom',
+        outKeyframes: move('translateY(0)', 'translateY(-100%)'),
+        inKeyframes: move('translateY(100%)', 'translateY(0)'),
+    },
+    'move-down': {
+        category: 'move', label: 'Move down / from top',
+        outKeyframes: move('translateY(0)', 'translateY(100%)'),
+        inKeyframes: move('translateY(-100%)', 'translateY(0)'),
+    },
+    // ── Fade (incoming sits on top; outgoing dissolves or holds) ───────────────
+    'fade': {
+        category: 'fade', label: 'Fade',
+        outKeyframes: FADE_OUT, inKeyframes: FADE_IN, ontop: 'in',
+    },
+    'fade-from-right': {
+        category: 'fade', label: 'Fade / from right',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateX(100%)', opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fade-from-left': {
+        category: 'fade', label: 'Fade / from left',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateX(-100%)', opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fade-from-bottom': {
+        category: 'fade', label: 'Fade / from bottom',
+        outKeyframes: FADE_OUT,
+        inKeyframes: [{ transform: 'translateY(100%)', opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }],
+        ontop: 'in',
+    },
+    // ── Scale ──────────────────────────────────────────────────────────────────
+    'scale-down-up': {
+        category: 'scale', label: 'Scale down / scale up',
+        outKeyframes: [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }],
+        inKeyframes: [{ transform: 'scale(1.2)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'scale-down': {
+        category: 'scale', label: 'Scale down / from right',
+        outKeyframes: [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }],
+        inKeyframes: move('translateX(100%)', 'translateX(0)'),
+        ontop: 'in',
+    },
+    'scale-up': {
+        category: 'scale', label: 'Move to left / scale up',
+        outKeyframes: move('translateX(0)', 'translateX(-100%)'),
+        inKeyframes: [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }],
+        ontop: 'out',
+    },
+    // ── Rotate / 3D (the cinematic "wow" family) ───────────────────────────────
+    'flip': {
+        category: 'rotate', label: 'Flip',
+        outKeyframes: [{ transform: 'rotateY(0deg)', opacity: 1 }, { transform: 'rotateY(-180deg)', opacity: 0 }],
+        inKeyframes: [{ transform: 'rotateY(180deg)', opacity: 0 }, { transform: 'rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'cube-left': {
+        category: 'rotate', label: 'Cube / to left',
+        outKeyframes: [{ transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateZ(-800px) rotateY(-90deg)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0.3 }, { transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'cube-right': {
+        category: 'rotate', label: 'Cube / to right',
+        outKeyframes: [{ transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateZ(-800px) rotateY(-90deg)', opacity: 0.3 }, { transform: 'translateZ(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '50% 50%', inTransformOrigin: '50% 50%',
+    },
+    'carousel-left': {
+        category: 'rotate', label: 'Carousel / to left',
+        outKeyframes: [{ transform: 'translateX(0) scale(1)', opacity: 1 }, { transform: 'translateX(-150%) scale(0.4)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateX(200%) scale(0.4)', opacity: 0.3 }, { transform: 'translateX(0) scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'carousel-right': {
+        category: 'rotate', label: 'Carousel / to right',
+        outKeyframes: [{ transform: 'translateX(0) scale(1)', opacity: 1 }, { transform: 'translateX(150%) scale(0.4)', opacity: 0.3 }],
+        inKeyframes: [{ transform: 'translateX(-200%) scale(0.4)', opacity: 0.3 }, { transform: 'translateX(0) scale(1)', opacity: 1 }],
+        ontop: 'in',
+    },
+    'fall': {
+        category: 'rotate', label: 'Fall',
+        outKeyframes: [{ transform: 'translateZ(0) rotateX(0deg)', opacity: 1 }, { transform: 'translateZ(-500px) rotateX(90deg)', opacity: 0 }],
+        inKeyframes: FADE_IN,
+        outTransformOrigin: '50% 50%', ontop: 'out', inDelayRatio: 0.3,
+    },
+    'newspaper': {
+        category: 'rotate', label: 'Newspaper',
+        outKeyframes: [{ transform: 'scale(1) rotate(0deg)', opacity: 1 }, { transform: 'scale(0) rotate(720deg)', opacity: 0 }],
+        inKeyframes: [{ transform: 'scale(0) rotate(-720deg)', opacity: 0 }, { transform: 'scale(1) rotate(0deg)', opacity: 1 }],
+        ontop: 'in', inDelayRatio: 0.5,
+    },
+    'fold-left': {
+        category: 'rotate', label: 'Fold / unfold',
+        outKeyframes: [{ transform: 'translateX(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateX(-100%) rotateY(-90deg)', opacity: 0.6 }],
+        inKeyframes: [{ transform: 'translateX(100%) rotateY(90deg)', opacity: 0.6 }, { transform: 'translateX(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '0% 50%', inTransformOrigin: '100% 50%', ontop: 'in',
+    },
+    'room-left': {
+        category: 'rotate', label: 'Room / to left',
+        outKeyframes: [{ transform: 'translateX(0) rotateY(0deg)', opacity: 1 }, { transform: 'translateX(-100%) rotateY(90deg)', opacity: 0.4 }],
+        inKeyframes: [{ transform: 'translateX(100%) rotateY(-90deg)', opacity: 0.4 }, { transform: 'translateX(0) rotateY(0deg)', opacity: 1 }],
+        outTransformOrigin: '100% 50%', inTransformOrigin: '0% 50%',
+    },
+};
+/** Built from PAGE_TRANSITION_PRESETS so the two lists can never drift apart. */
+const PAGE_TRANSITION_CATEGORIES = (() => {
+    const order = [
+        { value: 'move', label: 'Move' },
+        { value: 'fade', label: 'Fade' },
+        { value: 'scale', label: 'Scale' },
+        { value: 'rotate', label: 'Rotate / 3D' },
+    ];
+    return order.map(cat => ({
+        ...cat,
+        presets: Object.entries(PAGE_TRANSITION_PRESETS)
+            .filter(([, p]) => p.category === cat.value)
+            .map(([value, p]) => ({ value, label: p.label })),
+    }));
+})();
+/**
+ * Resolve a persisted preset id + timing into the two WAAPI animations the consumer runs.
+ * Returns `null` for unknown / 'none' presets (caller should skip the transition).
+ */
+function resolvePageTransition(name, opts = {}) {
+    if (!name || name === 'none')
+        return null;
+    const preset = PAGE_TRANSITION_PRESETS[name];
+    if (!preset)
+        return null;
+    const duration = opts.duration ?? DEFAULT_PAGE_TRANSITION_DURATION;
+    const easing = opts.easing ?? 'ease';
+    const perspective = preset.perspective ?? opts.perspective ?? DEFAULT_PAGE_TRANSITION_PERSPECTIVE;
+    const clampRatio = (r) => Math.max(0, Math.min(1, r ?? 0));
+    const outDelay = clampRatio(preset.outDelayRatio) * duration;
+    const inDelay = clampRatio(preset.inDelayRatio) * duration;
+    return {
+        outFrames: preset.outKeyframes,
+        inFrames: preset.inKeyframes,
+        // fill:'both' holds keyframe[0] during the delay and keyframe[last] after — no flash.
+        outOptions: { duration, easing, delay: outDelay, fill: 'both' },
+        inOptions: { duration, easing, delay: inDelay, fill: 'both' },
+        ontop: preset.ontop ?? 'in',
+        perspective,
+        outTransformOrigin: preset.outTransformOrigin,
+        inTransformOrigin: preset.inTransformOrigin,
+    };
+}
+/**
+ * The ordered phases a navigation runs, given what is present. The order is INVARIANT:
+ * every element `leave` animation finishes before the page `transition` starts, and the page
+ * `transition` finishes before any element `enter` animation begins. Phases with nothing to
+ * play are omitted. The engine iterates this list and `await`s each phase's completion.
+ */
+function buildTransitionTimeline(input) {
+    const phases = [];
+    if (input.hasLeave)
+        phases.push('leave');
+    if (input.hasTransition)
+        phases.push('transition');
+    if (input.hasEnter)
+        phases.push('enter');
+    return phases;
+}
+// ── Back-compat migration from the legacy single-page route-animation presets ─
+/**
+ * Map a legacy `enter` preset (none/fade/slideUp/slideDown/zoomIn/zoomOut/blurIn/flip) to the
+ * nearest cinematic paired `transition` id, so pages saved before this system keep animating.
+ * Returns 'fade' for anything unmapped, and 'none' for 'none'.
+ */
+function legacyEnterToTransition(enter) {
+    switch (enter) {
+        case 'none': return 'none';
+        case 'slideUp': return 'fade-from-bottom';
+        case 'slideDown': return 'fade';
+        case 'zoomIn': return 'scale-down-up';
+        case 'zoomOut': return 'scale-down-up';
+        case 'blurIn': return 'fade';
+        case 'flip': return 'flip';
+        case 'fade': return 'fade';
+        default: return 'fade';
+    }
+}
+/**
+ * Resolve the effective transition id for a page's route-animation settings: the explicit
+ * `transition` when present, otherwise migrated from the legacy `enter` preset.
+ */
+function effectiveTransitionId(anim) {
+    if (!anim)
+        return 'fade';
+    if (anim.transition)
+        return anim.transition;
+    return legacyEnterToTransition(anim.enter);
+}
+
 /*
  * Public API Surface of iox-ui
  */
@@ -2212,5 +2567,5 @@ function dataSourcePlanToRequest(plan, endpoints) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, ViewPositionDirective, ViewPositionModule, WebSettingsService, buildDataSourceFilter, compileDeclarations, dataSourcePlanToRequest, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, resolveSingleItemId, rewriteViewportUnits, styleKeyToKebab };
+export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CardComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, buildDataSourceFilter, buildTransitionTimeline, compileDeclarations, composeVirtualTraits, dataSourcePlanToRequest, effectiveTransitionId, legacyEnterToTransition, matchRouteParams, normalizeCollectionResult, planDataSource, renderDefaultDeclarations, resolvePageTransition, resolveSingleItemId, rewriteViewportUnits, styleKeyToKebab };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map