@ngutil/common 0.0.21 → 0.0.26

package/fesm2022/ngutil-common.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, DestroyRef, computed, isSignal, Injectable, Inject, SkipSelf, Optional, input } from '@angular/core';
-import { Subject, share, take, takeUntil, BehaviorSubject, scan, tap, map, shareReplay, Observable, finalize, isObservable, throwError, combineLatest, filter, switchMap } from 'rxjs';
+import { Directive, inject, DestroyRef, computed, isSignal, Injectable, Inject, SkipSelf, Optional, input, signal, effect, ElementRef } from '@angular/core';
+import { Subject, share, take, takeUntil, BehaviorSubject, scan, tap, map, shareReplay, Observable, finalize, isObservable, throwError, combineLatest, filter, switchMap, ReplaySubject, concat, catchError, of, from, forkJoin } from 'rxjs';
+import { NgControl } from '@angular/forms';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { isEqual, cloneDeep, isPlainObject as isPlainObject$1 } from 'lodash';
 export { isPrimitive } from 'utility-types';
@@ -85,132 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
             type: Directive
         }] });
 
-const specials = ["auto", "inherit"];
-const UNIT_REGEX = "v[h|w|min|max]|p[c|t|x]|[re|e|c|m]m|[l|c]h|%|in|Q|ex|m?s";
-const NUMBER_REGEX = "[+-]?(?:\\d*\\.\\d+|\\d+\\.\\d*|\\d+)";
-const regex = new RegExp(`^(${NUMBER_REGEX})\\s*(${UNIT_REGEX})?$`);
-class NumberWithUnit {
-    static coerce(value, defaultUnit) {
-        if (specials.includes(value)) {
-            return new NumberWithUnit(NaN, value);
-        }
-        else if (typeof value === "string") {
-            const match = value.match(regex);
-            if (match) {
-                return new NumberWithUnit(Number(match[1]), match[2] || defaultUnit);
-            }
-        }
-        else if (typeof value === "number") {
-            return new NumberWithUnit(value, defaultUnit);
-        }
-        throw new Error(`Not implemented number with unit: ${value}`);
-    }
-    constructor(value, unit) {
-        this.value = value;
-        this.unit = unit;
-    }
-    toString() {
-        if (isNaN(this.value)) {
-            return this.unit;
-        }
-        else if (this.unit != null) {
-            return `${this.value}${this.unit}`;
-        }
-        else {
-            return `${this.value}`;
-        }
-    }
-}
-
-function coerceBoolAttr(value) {
-    return value != null && `${value}` !== "false";
-}
-
-const Zone = window.Zone;
-function __zone_symbol__(val) {
-    const symbol = typeof Zone !== "undefined" && Zone.__symbol__
-        ? Zone.__symbol__(val)
-        : `__zone_symbol__${val}`;
-    return typeof window[symbol] !== "undefined" ? symbol : val;
-}
-const rawSetTimeout = window[__zone_symbol__("setTimeout")];
-const rawClearTimeout = window[__zone_symbol__("clearTimeout")];
-const rawSetInterval = window[__zone_symbol__("setInterval")];
-const rawClearInterval = window[__zone_symbol__("clearInterval")];
-const rawRequestAnimationFrame = window[__zone_symbol__("requestAnimationFrame")];
-const rawCancelAnimationFrame = window[__zone_symbol__("cancelAnimationFrame")];
-
-class _FastDOM {
-    #rafId;
-    #mutate = [];
-    #measure = [];
-    mutate(handler) {
-        this.#mutate.push(handler);
-        this._schedule();
-    }
-    mutateNext(handler) {
-        this.#mutate.push(() => {
-            this.#mutate.push(handler);
-        });
-        this._schedule();
-    }
-    measure(handler) {
-        this.#measure.push(handler);
-        this._schedule();
-    }
-    setStyle(el, style, chain) {
-        this.mutate(() => {
-            for (const [k, v] of Object.entries(style)) {
-                if (v == null) {
-                    el.style.removeProperty(k);
-                }
-                else {
-                    el.style.setProperty(k, v);
-                }
-            }
-            chain && chain();
-        });
-    }
-    setAttributes(el, attrs, chain) {
-        this.mutate(() => {
-            for (const [k, v] of Object.entries(attrs)) {
-                if (v == null) {
-                    el.removeAttribute(k);
-                }
-                else {
-                    el.setAttribute(k, v);
-                }
-            }
-            chain && chain();
-        });
-    }
-    _schedule() {
-        if (!this.#rafId) {
-            this.#rafId = rawRequestAnimationFrame(this._apply.bind(this));
-        }
-    }
-    _apply() {
-        this.#rafId = null;
-        const measure = this.#measure.slice();
-        const mutate = this.#mutate.slice();
-        this.#measure.length = 0;
-        this.#mutate.length = 0;
-        runQ(measure);
-        runQ(mutate);
-        if (this.#measure.length || this.#mutate.length) {
-            this._schedule();
-        }
-    }
-}
-function runQ(items) {
-    let item;
-    while ((item = items.shift())) {
-        item();
-    }
-}
-const FastDOM = new _FastDOM();
-
-class BusyState {
+class BusyTrackerState {
     constructor() {
         this.#events = new BehaviorSubject(null);
         this.#data = {};
@@ -272,7 +148,7 @@ class BusyState {
         return Object.entries(this.#data);
     }
     connect(o, prefix) {
-        if (o instanceof BusyState) {
+        if (o instanceof BusyTrackerState) {
             return this.connect(o.current$, prefix);
         }
         else {
@@ -318,7 +194,7 @@ class BusyTracker {
         this.destroyRef = inject(DestroyRef);
         this._state = this.parent
             ? this.parent._state
-            : new BusyState();
+            : new BusyTrackerState();
         this.state$ = this._state.current$;
         this.state = toSignal(this.state$, { requireSync: true });
         this.any = computed(() => this.state().isBusy);
@@ -385,6 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                 }, {
                     type: Optional
                 }] }] });
+// TODO: BusyState directive
 /**
  * ```ts
  * @Component({
@@ -455,6 +332,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                 }]
         }] });
 
+var _a;
+/**
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   hostDirectives: [DisabledState],
+ *   template: `<button [disabled]="disabledState.isDisabled()">Submit</button>`,
+ * })
+ * export class Button {
+ *   readonly disabledState = inject(DisabledState)
+ * }
+ * ```
+ */
+class DisabledState {
+    #parent;
+    #busy;
+    #disabled;
+    constructor() {
+        this.#parent = inject(_a, { skipSelf: true, optional: true });
+        this.#busy = inject(Busy, { self: true, optional: true });
+        this.#disabled = signal(false);
+        this.isDisabled = computed(() => !!(this.#parent?.isDisabled() || this.#busy?.isOthersBusy() || this.#disabled()));
+        effect(() => this.isDisabled());
+    }
+    set(value) {
+        this.#disabled.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DisabledState, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: DisabledState, isStandalone: true, host: { properties: { "attr.disabled": "isDisabled()" } }, exportAs: ["nuDisabled"], ngImport: i0 }); }
+}
+_a = DisabledState;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DisabledState, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: "nuDisabled",
+                    host: {
+                        "[attr.disabled]": "isDisabled()"
+                    }
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * @example
+ * ```html
+ *    <form nuDisabled nuBusy="submit">
+ *      <button [nuDisabled]="form.invalid" nuBusy="submit">Submit</button>
+ *    </form>
+ * ```
+ */
+class Disabled {
+    #state;
+    #control;
+    constructor() {
+        this.#state = inject(DisabledState, { self: true });
+        this.#control = inject(NgControl, { self: true, optional: true });
+        this.nuDisabled = input(false);
+        effect(() => this.#state.set(this.nuDisabled()), { allowSignalWrites: true });
+        effect(() => {
+            const control = this.#control?.control;
+            if (!control) {
+                // TODO: retry
+                return;
+            }
+            if (this.#state.isDisabled()) {
+                control.enabled && control.disable();
+            }
+            else {
+                control.disabled && control.enable();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: Disabled, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.6", type: Disabled, isStandalone: true, selector: "[nuDisabled]", inputs: { nuDisabled: { classPropertyName: "nuDisabled", publicName: "nuDisabled", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: DisabledState }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: Disabled, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: "[nuDisabled]",
+                    hostDirectives: [DisabledState]
+                }]
+        }], ctorParameters: () => [] });
+
+const specials = ["auto", "inherit"];
+const UNIT_REGEX = "v[h|w|min|max]|p[c|t|x]|[re|e|c|m]m|[l|c]h|%|in|Q|ex|m?s";
+const NUMBER_REGEX = "[+-]?(?:\\d*\\.\\d+|\\d+\\.\\d*|\\d+)";
+const regex = new RegExp(`^(${NUMBER_REGEX})\\s*(${UNIT_REGEX})?$`);
+class NumberWithUnit {
+    static coerce(value, defaultUnit) {
+        if (specials.includes(value)) {
+            return new NumberWithUnit(NaN, value);
+        }
+        else if (typeof value === "string") {
+            const match = value.match(regex);
+            if (match) {
+                return new NumberWithUnit(Number(match[1]), match[2] || defaultUnit);
+            }
+        }
+        else if (typeof value === "number") {
+            return new NumberWithUnit(value, defaultUnit);
+        }
+        throw new Error(`Not implemented number with unit: ${value}`);
+    }
+    constructor(value, unit) {
+        this.value = value;
+        this.unit = unit;
+    }
+    toString() {
+        if (isNaN(this.value)) {
+            return this.unit;
+        }
+        else if (this.unit != null) {
+            return `${this.value}${this.unit}`;
+        }
+        else {
+            return `${this.value}`;
+        }
+    }
+}
+
+function coerceBoolAttr(value) {
+    return value != null && `${value}` !== "false";
+}
+
+function coerceElement(value) {
+    if (value instanceof ElementRef) {
+        return value.nativeElement;
+    }
+    return value;
+}
+
+class StopStateChain extends Error {
+}
+class StateChain {
+    #executed;
+    #handlers;
+    #current;
+    constructor(states) {
+        this.#executed = [];
+        this.#handlers = {};
+        this.#current = new ReplaySubject(1);
+        this.current$ = this.#current.asObservable();
+        this.states = { ...states };
+        for (const value of Object.values(states)) {
+            if (value.order == null) {
+                value.order = "parallel";
+            }
+        }
+    }
+    on(state, fn) {
+        if (state in this.#handlers) {
+            this.#handlers[state].push(fn);
+        }
+        else {
+            this.#handlers[state] = [fn];
+        }
+        return () => {
+            const idx = this.#handlers[state].indexOf(fn);
+            if (idx > -1) {
+                this.#handlers[state].splice(idx, 1);
+            }
+        };
+    }
+    /**
+     * Run this state changes on other state
+     */
+    control(state, remap) {
+        const remove = [];
+        for (const selfState of Object.keys(this.states)) {
+            const otherState = remap?.[selfState] || selfState;
+            if (otherState in state.states) {
+                remove.push(this.on(selfState, () => state.run([otherState])));
+            }
+        }
+        return () => {
+            for (const fn of remove) {
+                fn();
+            }
+        };
+    }
+    run(states) {
+        if (states.length === 0) {
+            throw new Error("Missing states");
+        }
+        const executed = [];
+        return concat(...states.map(state => this.#run(state).pipe(tap(s => s && executed.push(s))))).pipe(catchError(err => (err instanceof StopStateChain ? of(executed) : throwError(() => err))));
+    }
+    #run(state) {
+        const options = this.states[state];
+        return new Observable(dst => {
+            if (this.#executed.includes(state)) {
+                dst.next(state);
+                dst.complete();
+                return;
+            }
+            this.#executed.push(state);
+            this.#current.next(state);
+            const handlers = this.#handlers[state];
+            if (handlers == null || handlers.length === 0) {
+                dst.next(state);
+                dst.complete();
+                return;
+            }
+            const observables = handlers
+                .map(handler => {
+                const result = handler();
+                if (result == null) {
+                    return of(null);
+                }
+                else {
+                    return from(result);
+                }
+            })
+                .map(handler => handler.pipe(catchError(err => {
+                if (err instanceof StopStateChain) {
+                    const idx = this.#executed.indexOf(state);
+                    if (idx > -1) {
+                        this.#executed.splice(idx, 1);
+                    }
+                    dst.error(err);
+                    dst.complete();
+                    return of(null);
+                }
+                else {
+                    return throwError(() => err);
+                }
+            })));
+            if (observables.length === 1) {
+                return observables[0].pipe(map(() => state)).subscribe(dst);
+            }
+            else {
+                if (options.order === "parallel") {
+                    return forkJoin(observables)
+                        .pipe(map(() => state))
+                        .subscribe(dst);
+                }
+                else {
+                    return concat(...observables)
+                        .pipe(map(() => state))
+                        .subscribe(dst);
+                }
+            }
+        });
+    }
+    destroy() {
+        ;
+        this.#handlers = null;
+    }
+}
+
+const Zone = window.Zone;
+function __zone_symbol__(val) {
+    const symbol = typeof Zone !== "undefined" && Zone.__symbol__
+        ? Zone.__symbol__(val)
+        : `__zone_symbol__${val}`;
+    return typeof window[symbol] !== "undefined" ? symbol : val;
+}
+const rawSetTimeout = window[__zone_symbol__("setTimeout")];
+const rawClearTimeout = window[__zone_symbol__("clearTimeout")];
+const rawSetInterval = window[__zone_symbol__("setInterval")];
+const rawClearInterval = window[__zone_symbol__("clearInterval")];
+const rawRequestAnimationFrame = window[__zone_symbol__("requestAnimationFrame")];
+const rawCancelAnimationFrame = window[__zone_symbol__("cancelAnimationFrame")];
+
+class _FastDOM {
+    #rafId;
+    #mutate = [];
+    #measure = [];
+    mutate(handler) {
+        this.#mutate.push(handler);
+        this._schedule();
+    }
+    mutateNext(handler) {
+        this.#mutate.push(() => {
+            this.#mutate.push(handler);
+        });
+        this._schedule();
+    }
+    measure(handler) {
+        this.#measure.push(handler);
+        this._schedule();
+    }
+    setStyle(el, style, chain) {
+        this.mutate(() => {
+            for (const [k, v] of Object.entries(style)) {
+                if (v == null) {
+                    el.style.removeProperty(k);
+                }
+                else {
+                    el.style.setProperty(k, v);
+                }
+            }
+            chain && chain();
+        });
+    }
+    setAttributes(el, attrs, chain) {
+        this.mutate(() => {
+            for (const [k, v] of Object.entries(attrs)) {
+                if (v == null) {
+                    el.removeAttribute(k);
+                }
+                else {
+                    el.setAttribute(k, v);
+                }
+            }
+            chain && chain();
+        });
+    }
+    _schedule() {
+        if (!this.#rafId) {
+            this.#rafId = rawRequestAnimationFrame(this._apply.bind(this));
+        }
+    }
+    _apply() {
+        this.#rafId = null;
+        const measure = this.#measure.slice();
+        const mutate = this.#mutate.slice();
+        this.#measure.length = 0;
+        this.#mutate.length = 0;
+        runQ(measure);
+        runQ(mutate);
+        if (this.#measure.length || this.#mutate.length) {
+            this._schedule();
+        }
+    }
+}
+function runQ(items) {
+    let item;
+    while ((item = items.shift())) {
+        item();
+    }
+}
+const FastDOM = new _FastDOM();
+
 // export { deepFreeze }
 const deepClone = typeof structuredClone === "function" ? structuredClone : cloneDeep;
 // export const deepFreeze: <T>(obj: T) => DeepReadonly<T> = o => Object.freeze(o) as any
@@ -510,5 +722,5 @@ function toSorted(items, fn) {
  * Generated bundle index. Do not edit.
  */
 
-export { Busy, BusyState, BusyTracker, Destruct, Destructible, FastDOM, NUMBER_REGEX, NumberWithUnit, UNIT_REGEX, coerceBoolAttr, deepClone, deepFreeze, isPlainObject, rawCancelAnimationFrame, rawClearInterval, rawClearTimeout, rawRequestAnimationFrame, rawSetInterval, rawSetTimeout, toSorted };
+export { Busy, BusyTracker, BusyTrackerState, Destruct, Destructible, Disabled, DisabledState, FastDOM, NUMBER_REGEX, NumberWithUnit, StateChain, UNIT_REGEX, __zone_symbol__, coerceBoolAttr, coerceElement, deepClone, deepFreeze, isPlainObject, rawCancelAnimationFrame, rawClearInterval, rawClearTimeout, rawRequestAnimationFrame, rawSetInterval, rawSetTimeout, toSorted };
 //# sourceMappingURL=ngutil-common.mjs.map