@arsedizioni/ars-utils 22.0.52 → 22.0.53

package/fesm2022/arsedizioni-ars-utils-ui.mjs

@@ -1037,10 +1037,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  *   • calc() support (flex-grow/shrink/basis split, operator padding)
  *   • wrap-container basis rewrite (ngx issue 660)
  *
- * Extensions beyond ngx-layout (documented, opt-in by syntax):
- *   • fxFlex="*"          → fills the remaining space like fxFlex="grow" (1 1 100%)
- *   • fxFlex="" + a SIBLING with fxFlex="*" → this element gets 0 0 auto
- *     (static-attribute detection only; property bindings are not seen)
+ * Extensions beyond ngx-layout (documented):
+ *   • fxFlex="*"  and  bare fxFlex  → both "fill the remaining space" (grow, 1 1 100%).
+ *                           For content-sized siblings use a plain element (no fxFlex):
+ *                           it defaults to `0 1 auto`.
+ *   • addFlexToParent     → if the direct parent is not a flex container, this directive
+ *                           sets display:flex on it so children work without fxLayout
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
@@ -1175,66 +1177,42 @@ function buildFlexStyles(value, direction, hasWrap) {
         out[k] = v === null ? null : String(v);
     return out;
 }
-/** Extension: true when a sibling element declares fxFlex="*" (static attribute). */
-function parentHasStar(el) {
-    const parent = el.parentElement;
-    if (!parent)
-        return false;
-    return Array.from(parent.children).some(c => c !== el && (c.getAttribute('fxflex') === '*' || c.getAttribute('fxFlex') === '*'));
-}
 /**
- * Resolves the non-ngx fxFlex extensions to a value `buildFlexStyles` understands.
- *   • '*'                    → 'grow' (fill the remaining space → `flex: 1 1 100%`, max-* 100%)
- *   • '' with a `*` sibling  → 'none' (`0 0 auto`)
- *   • anything else          → returned unchanged
+ * Resolves the fxFlex "fill" inputs to a value `buildFlexStyles` understands.
+ * Both `fxFlex="*"` and a bare `fxFlex` mean "fill the remaining space" → `grow`
+ * (`flex: 1 1 100%`, max-* 100%); every other value is returned unchanged.
  * @param raw - The resolved fxFlex value for the active breakpoint.
- * @param hasStarSibling - Whether a sibling element declares `fxFlex="*"`.
  * @returns The value to pass to `buildFlexStyles`.
  */
-function resolveFlexInput(raw, hasStarSibling) {
-    if (raw === '*')
-        return 'grow';
-    if (raw === '' && hasStarSibling)
-        return 'none';
-    return raw;
-}
-/**
- * Coerces an fxFlex binding value to the string form the builder expects.
- * Accepts numbers (e.g. `[fxFlex]="32"` or `[fxFlex]="cond ? 24 : 32"`) and
- * normalises them to a string; keeps `''` (bare attribute) as-is; maps
- * null/undefined to "not set".
- * @param v - The bound value: a string, a number, null, or undefined.
- * @returns The trimmed string value, or undefined when not set.
- */
-function coerceFlex(v) {
-    return v === null || v === undefined ? undefined : String(v).trim();
+function resolveFlexInput(raw) {
+    return (raw === '*' || raw === '') ? 'grow' : raw;
 }
 class FxFlexDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
         /** Direct ancestor FxLayout (any level); matched to the direct parent in the effect. */
         this.parentLayout = inject(FxLayoutDirective, { skipSelf: true, optional: true });
-        this.fxFlex = input(undefined, { ...(ngDevMode ? { debugName: "fxFlex" } : /* istanbul ignore next */ {}), alias: 'fxFlex', transform: coerceFlex });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xs', transform: coerceFlex });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm', transform: coerceFlex });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md', transform: coerceFlex });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg', transform: coerceFlex });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl', transform: coerceFlex });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-sm', transform: coerceFlex });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-md', transform: coerceFlex });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-lg', transform: coerceFlex });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-xl', transform: coerceFlex });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-xs', transform: coerceFlex });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-sm', transform: coerceFlex });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-md', transform: coerceFlex });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-lg', transform: coerceFlex });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-up', transform: coerceFlex });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-up', transform: coerceFlex });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-up', transform: coerceFlex });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl-up', transform: coerceFlex });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-down', transform: coerceFlex });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-down', transform: coerceFlex });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-down', transform: coerceFlex });
+        this.fxFlex = input(undefined, { ...(ngDevMode ? { debugName: "fxFlex" } : /* istanbul ignore next */ {}), alias: 'fxFlex' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-xl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-lg' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-down' });
         this._rawFlex = computed(() => resolveAll({ default: this.fxFlex(), xs: this.xs(), sm: this.sm(), md: this.md(),
             lg: this.lg(), xl: this.xl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
             'lt-xl': this.ltXl(), 'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
@@ -1254,11 +1232,18 @@ class FxFlexDirective extends ResponsiveBaseDirective {
                 this._applied.clear();
                 return;
             }
-            // Extensions (documented in the header). `*` fills like fxFlex="grow" (=> flex: 1 1 100%);
-            // a bare fxFlex next to a `*` sibling collapses to `0 0 auto`. The sibling DOM read is
-            // performed lazily, only for the bare-'' case in the browser.
-            const hasStarSibling = raw === '' && this.isBrowser ? parentHasStar(el) : false;
-            raw = resolveFlexInput(raw, hasStarSibling);
+            // addFlexToParent (ngx-layout parity): when the direct parent is not a flex
+            // container, make it one so fxFlex children behave even without an explicit fxLayout.
+            const directParentHasLayout = !!this.parentLayout && this.parentLayout.hostElement === el.parentElement;
+            if (this.isBrowser && el.parentElement && !directParentHasLayout) {
+                const pdisplay = getComputedStyle(el.parentElement).display;
+                if (pdisplay !== 'flex' && pdisplay !== 'inline-flex') {
+                    this.r2.setStyle(el.parentElement, 'display', 'flex');
+                }
+            }
+            // `*` and a bare fxFlex both mean "fill" => grow (1 1 100%). For content-sized
+            // siblings use a plain element (no fxFlex) — it defaults to `0 1 auto`.
+            raw = resolveFlexInput(raw);
             // Parent flow: reactive via FxLayoutDirective signals when it is the
             // direct parent; getComputedStyle fallback for plain-CSS flex parents.
             const { direction, hasWrap } = resolveParentFlow(el, this.parentLayout, this.isBrowser);
@@ -3576,5 +3561,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIAS_FAMILIES, ALIAS_INDEX, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, coerceFlex, normalizeGap, normalizeStyle, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, toBool, toClassSet, validateBasis, validateLayoutValue, validateWrapValue };
+export { ALIAS_FAMILIES, ALIAS_INDEX, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, normalizeGap, normalizeStyle, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, toBool, toClassSet, validateBasis, validateLayoutValue, validateWrapValue };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map