@arsedizioni/ars-utils 22.0.46 → 22.0.48

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

@@ -1203,32 +1203,43 @@ function resolveFlexInput(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();
+}
 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' });
-        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.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._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(),
@@ -2086,7 +2097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 /**
  * @file fx-style-class.directives.ts  (Angular 21 — signals)
  *
- * [fxStyle]  — responsive inline style binding (Record<string,string>)
+ * [fxStyle]  — responsive inline style binding (NgStyle-compatible)
  * [fxClass]  — responsive CSS class binding (string | string[] | Record<string,boolean>)
  *
  * Angular 21 changes:
@@ -2101,6 +2112,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
+/**
+ * Flattens any {@link StyleInput} into a plain `{ property: cssValue }` map,
+ * resolving `'prop.unit': value` keys (e.g. `'max-width.px': 30` → `max-width: '30px'`)
+ * and stringifying numeric values. `null` / `undefined` / `''` values are skipped.
+ * @param v - The raw style input (or undefined).
+ * @returns A normalised `{ property: value }` map ready for `Renderer2.setStyle`.
+ */
+function normalizeStyle(v) {
+    const out = {};
+    const addRecord = (rec) => {
+        for (const [rawKey, rawVal] of Object.entries(rec)) {
+            if (rawVal === null || rawVal === undefined || rawVal === '')
+                continue;
+            const dot = rawKey.indexOf('.');
+            if (dot > -1) {
+                const prop = rawKey.slice(0, dot).trim();
+                const unit = rawKey.slice(dot + 1).trim();
+                if (prop)
+                    out[prop] = `${rawVal}${unit}`;
+            }
+            else {
+                out[rawKey.trim()] = String(rawVal);
+            }
+        }
+    };
+    const addString = (s) => {
+        for (const decl of s.split(';')) {
+            const i = decl.indexOf(':');
+            if (i === -1)
+                continue;
+            const prop = decl.slice(0, i).trim();
+            const val = decl.slice(i + 1).trim();
+            if (prop)
+                out[prop] = val;
+        }
+    };
+    if (!v)
+        return out;
+    if (typeof v === 'string')
+        addString(v);
+    else if (Array.isArray(v)) {
+        for (const item of v)
+            typeof item === 'string' ? addString(item) : addRecord(item);
+    }
+    else {
+        addRecord(v);
+    }
+    return out;
+}
 class FxStyleDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
@@ -2125,12 +2185,12 @@ class FxStyleDirective extends ResponsiveBaseDirective {
         this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm-down' });
         this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md-down' });
         this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg-down' });
-        this._resolved = computed(() => (resolveAll({ default: this.fxStyle(), xs: this.xs(), sm: this.sm(),
+        this._resolved = computed(() => normalizeStyle(resolveAll({ default: this.fxStyle(), 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(),
             'gt-lg': this.gtLg(), 'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
             'xl-up': this.xlUp(), 'sm-down': this.smDown(), 'md-down': this.mdDown(),
-            'lg-down': this.lgDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? {}), /* @ts-ignore */
+            'lg-down': this.lgDown() }, this.media.currentBp(), a => this.media.isActive(a))), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
         /** Tracks which CSS properties were last applied — plain field, not a signal. */
         this._appliedProps = new Set();
@@ -2181,6 +2241,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     standalone: true
                 }]
         }], ctorParameters: () => [], propDecorators: { fxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-lg", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-down", required: false }] }] } });
+/**
+ * Converts any {@link ClassInput} into a flat set of active class names.
+ * @param v - The class input (string, array, or `{ class: enabled }` map), or undefined.
+ * @returns A `Set` of the class names that should be applied.
+ */
 function toClassSet(v) {
     if (!v)
         return new Set();
@@ -3503,5 +3568,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, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, 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, coerceFlex, normalizeStyle, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, toBool, toClassSet, validateBasis, validateLayoutValue, validateWrapValue };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map