@arsedizioni/ars-utils 22.0.43 → 22.0.47

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

@@ -2086,7 +2086,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 +2101,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 +2174,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 +2230,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 +3557,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, normalizeStyle, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, toBool, toClassSet, validateBasis, validateLayoutValue, validateWrapValue };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map