@vectoriox/iox-ui 5.23.0 → 5.25.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -5260,13 +5260,76 @@ function partClassName(type, partKey) {
  */
 /** Background fallback when a gradient/image type is selected but its value is empty. */
 const EMPTY_BACKGROUND = '#fff';
-/** The token fallbacks of a design-system page (spec tokens only). */
-const PAGE_TOKEN_FALLBACKS = {
-    'background': 'var(--iox-page-bg)',
-    'color': 'var(--iox-text)',
-    'font-family': 'var(--iox-font-body)',
+/** The three page-style fields a design-system page can inherit from the look. */
+var PageStyleField;
+(function (PageStyleField) {
+    PageStyleField["Background"] = "background";
+    PageStyleField["TextColor"] = "textColor";
+    PageStyleField["FontFamily"] = "fontFamily";
+})(PageStyleField || (PageStyleField = {}));
+/** Where a page-style field's value comes from. */
+var PageStyleSource;
+(function (PageStyleSource) {
+    /** The page sets it itself. */
+    PageStyleSource["Own"] = "own";
+    /** A design-system page that sets nothing wears the look's token. */
+    PageStyleSource["Look"] = "look";
+    /** A page without the flag that sets nothing: the consumer's own default shows through. */
+    PageStyleSource["Unset"] = "unset";
+})(PageStyleSource || (PageStyleSource = {}));
+/** The token a design-system page falls back to, per field (spec tokens only). */
+const PAGE_STYLE_TOKENS = {
+    [PageStyleField.Background]: 'page-bg',
+    [PageStyleField.TextColor]: 'text',
+    [PageStyleField.FontFamily]: 'font-body',
+};
+/** The CSS property each field compiles to when it falls back (`page-bg` is a PAINT, so the shorthand). */
+const FIELD_CSS_KEY = {
+    [PageStyleField.Background]: 'background',
+    [PageStyleField.TextColor]: 'color',
+    [PageStyleField.FontFamily]: 'font-family',
+};
+const tokenVar = (name) => `var(--iox-${name})`;
+/** The token fallbacks of a design-system page, as CSS declarations. */
+const PAGE_TOKEN_FALLBACKS = Object.fromEntries(Object.values(PageStyleField).map(f => [FIELD_CSS_KEY[f], tokenVar(PAGE_STYLE_TOKENS[f])]));
+/** What each field clears to when it goes back to the look — '' (never a copied literal), so it keeps
+ *  following every future look. Background clears its image and gradient with it: they are one ground. */
+const FIELD_RESET = {
+    [PageStyleField.Background]: { backgroundColor: '', backgroundGradient: '', backgroundImage: '', backgroundType: 'solid' },
+    [PageStyleField.TextColor]: { textColor: '' },
+    [PageStyleField.FontFamily]: { fontFamily: '' },
 };
 const BACKGROUND_KEYS = ['background', 'background-color'];
+/** The keys a field's OWN value compiles to — background has two (a flat colour, or a paint). */
+const FIELD_OWN_KEYS = {
+    [PageStyleField.Background]: BACKGROUND_KEYS,
+    [PageStyleField.TextColor]: ['color'],
+    [PageStyleField.FontFamily]: ['font-family'],
+};
+/**
+ * Where each page-style field comes from — decided by the SAME compile the renderers run, so the
+ * Page panel can never say "from the look" for a field the canvas paints from the page, or the other
+ * way round. A flagged page's empty field is the look's token; an unflagged page's is `Unset`.
+ */
+function describePageStyle(style, options = {}) {
+    const own = compileOwnStyle(style);
+    const describe = (field) => {
+        if (FIELD_OWN_KEYS[field].some(k => k in own))
+            return { field, source: PageStyleSource.Own, token: null };
+        return options.designSystem
+            ? { field, source: PageStyleSource.Look, token: PAGE_STYLE_TOKENS[field] }
+            : { field, source: PageStyleSource.Unset, token: null };
+    };
+    return {
+        [PageStyleField.Background]: describe(PageStyleField.Background),
+        [PageStyleField.TextColor]: describe(PageStyleField.TextColor),
+        [PageStyleField.FontFamily]: describe(PageStyleField.FontFamily),
+    };
+}
+/** The style with one field handed back to the look: cleared to '', every other key kept. */
+function resetPageStyleField(style, field) {
+    return { ...(style ?? {}), ...FIELD_RESET[field] };
+}
 /**
  * Compile page style settings into CSS declarations.
  *
@@ -5280,14 +5343,16 @@ function compilePageStyle(style, options = {}) {
     const css = compileOwnStyle(style);
     if (!options.designSystem)
         return css;
-    if (!BACKGROUND_KEYS.some(k => k in css))
-        css['background'] = PAGE_TOKEN_FALLBACKS['background'];
-    if (!('color' in css))
-        css['color'] = PAGE_TOKEN_FALLBACKS['color'];
-    if (!('font-family' in css))
-        css['font-family'] = PAGE_TOKEN_FALLBACKS['font-family'];
+    for (const field of Object.values(PageStyleField)) {
+        if (!FIELD_OWN_KEYS[field].some(k => k in css))
+            css[FIELD_CSS_KEY[field]] = tokenVar(PAGE_STYLE_TOKENS[field]);
+    }
     return css;
 }
+/** A value only the `background` shorthand can carry: a `var()` (which may hold a gradient) or a gradient. */
+function isPaint(value) {
+    return /var\(|gradient\(/i.test(value);
+}
 /** What the page itself sets — the only thing a page without the design-system flag compiles to. */
 function compileOwnStyle(style) {
     if (!style)
@@ -5307,9 +5372,11 @@ function compileOwnStyle(style) {
                 : EMPTY_BACKGROUND;
             break;
         default:
-            // 'solid' and legacy pages with no type at all.
+            // 'solid' and legacy pages with no type at all. A token reference or a gradient is a
+            // PAINT (page-bg is a gradient stack in Glass and Midnight): `background-color` would be
+            // invalid at computed-value time and the page would lose its ground.
             if (style.backgroundColor)
-                css['background-color'] = style.backgroundColor;
+                css[isPaint(style.backgroundColor) ? 'background' : 'background-color'] = style.backgroundColor;
             break;
     }
     return css;
@@ -7100,5 +7167,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map