@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-base.mjs

@@ -0,0 +1,620 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, afterNextRender, InjectionToken, forwardRef, ElementRef, Injector, input, booleanAttribute, computed, viewChildren, effect, Directive, isDevMode, model } from '@angular/core';
+import { setInputSignalValue, effectWithPrevious, classSignal, generateElementId } from '@ngneers/controls/utils-ng';
+import { Platform, injectThemeTemplate, injectThemeControlKinds, injectThemeColors, getAppliedClasses } from '@ngneers/controls/api/ng';
+import { toggleClass, getPropertyIfExists, objectKeys } from '@ngneers/controls/utils';
+
+const NGN_INSTANCE_KEY = '__ngneers_control_instance__';
+function elementWithInstance(element) {
+    return element;
+}
+function setNgnInstance(element, instance) {
+    elementWithInstance(element)[NGN_INSTANCE_KEY] = instance;
+    inject(DestroyRef).onDestroy(() => {
+        delete elementWithInstance(element)[NGN_INSTANCE_KEY];
+    });
+}
+function getNgnInstance(element) {
+    return elementWithInstance(element)[NGN_INSTANCE_KEY];
+}
+function getNearestNgnInstance(element, kind) {
+    let current = element;
+    while (current) {
+        const instance = elementWithInstance(current)[NGN_INSTANCE_KEY];
+        if (instance && (!kind || instance instanceof kind)) {
+            return instance;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+function getNearestNgnInstanceSig(element, kind) {
+    const sig = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sig" }] : /* istanbul ignore next */ []));
+    afterNextRender(() => {
+        sig.set(getNearestNgnInstance(element, kind));
+    });
+    return sig;
+}
+
+const NGN_CONTROL = new InjectionToken('NGN_CONTROL');
+/* eslint-enable typescript/no-explicit-any */
+/**
+ * @internal
+ * Provides the control itself for dependency injection.
+ * @param control - The control class to provide.
+ * @returns A provider for the control itself.
+ */
+function provideSelf(control) {
+    return { provide: NGN_CONTROL, useExisting: forwardRef(() => control) };
+}
+class NgnBase {
+    _defaultKind = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_defaultKind" }] : /* istanbul ignore next */ []));
+    _defaultColor = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_defaultColor" }] : /* istanbul ignore next */ []));
+    _kindOverride = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_kindOverride" }] : /* istanbul ignore next */ []));
+    /**
+     * The element reference for the host element.
+     */
+    element = inject(ElementRef);
+    /**
+     * The injector for the component.
+     */
+    injector = inject(Injector);
+    /**
+     * If true, the control will not apply any theme styles.
+     * The base styles of the control will still be applied.
+     * @default false
+     */
+    unstyled = input(false, { ...(ngDevMode ? { debugName: "unstyled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Some controls support custom kinds for styling purposes.
+     * The available kinds depend on the control and the theme used.
+     *
+     * TODO: link to custom types documentation
+     */
+    kind = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    color = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    appliedKind = computed(() => this._kindOverride() ?? this.kind() ?? this._defaultKind(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedKind" }] : /* istanbul ignore next */ []));
+    appliedColor = computed(() => this.color() ?? this._defaultColor(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedColor" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom passthrough attributes to apply to the control's theme classes and its dependencies.
+     * This allows for fine-grained customization of attributes, styles and more.
+     */
+    pt = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pt" }] : /* istanbul ignore next */ []));
+    /**
+     * Marks a control as the primary value control of a surrounding field
+     * (e.g. `ngn-input-field`). Fields resolve their projected control by
+     * filtering for this flag, so auxiliary controls placed inside the field
+     * (buttons, icons, spin buttons, …) never shadow the actual input.
+     * Overridden with `true` by input, mask-input, calendar, select, ….
+     */
+    isFieldControl = false;
+    /**
+     * Hook for placing focus/selection from a pointer event that originated in the
+     * surrounding field (or the control itself). The default does nothing and
+     * returns `false`, signalling the surrounding field should fall back to its
+     * primitive focusing. Controls that own internal focus placement (e.g.
+     * mask-input) override this, act on the pointer location, and return `true`.
+     */
+    focusFromPointer(_event) {
+        return false;
+    }
+    /**
+     * Hook for stepping the control's value (e.g. from `ngn-spin-buttons` or
+     * other external steppers). The default does nothing and returns `false`.
+     * Controls with a steppable value (e.g. number-input) override this, apply
+     * the step and return `true`.
+     * @param _direction - `1` to increment, `-1` to decrement.
+     * @param _big - Whether to apply the control's big step (e.g. Shift+Arrow).
+     */
+    stepValue(_direction, _big = false) {
+        return false;
+    }
+    /**
+     * Hook telling external steppers (e.g. `ngn-spin-buttons`) whether the value
+     * can currently be stepped in the given direction. The default returns
+     * `false`; controls overriding {@link stepValue} override this as well
+     * (typically `false` at a min/max bound or while disabled/readonly).
+     */
+    canStepValue(_direction) {
+        return false;
+    }
+    /**
+     * Hook for clearing the control's own value/state (e.g. from a surrounding
+     * field's clear button). The default does nothing and returns `false`, so the
+     * caller falls back to clearing the underlying DOM input. Controls that manage
+     * their own value (e.g. mask-input) override this to reset and return `true`.
+     */
+    clearValue() {
+        return false;
+    }
+    /**
+     * Temporarily overrides the authored kind without mutating the public input.
+     * Intended for derived control states such as validation-driven hints.
+     */
+    setKindOverride(kind) {
+        this._kindOverride.set(kind);
+    }
+    _childNgnControls = viewChildren(NGN_CONTROL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_childNgnControls" }] : /* istanbul ignore next */ []));
+    _afterLeaveCbs = [];
+    constructor() {
+        // `pt` is typed against this control's own `T`, which makes `this`
+        // (NgnBase<T>) structurally incompatible with the type-erased AnyNgnBase
+        // alias for an unconstrained/generic T. Safe: AnyNgnBase never reads `pt`
+        // in a way that depends on the real T at the call site.
+        setNgnInstance(this.element.nativeElement, this);
+        this.prepareAfterLeaveHook();
+        effect(() => {
+            // Propagate unstyled state to direct child controls, does not affect
+            // custom user content passed into ng-content or projected templates.
+            this._childNgnControls().forEach(child => {
+                setInputSignalValue(child.unstyled, this.unstyled());
+            });
+        });
+        this.initializeKindAndColorClasses();
+        if (inject(Platform).isBrowser) {
+            // Remove the initializing class after the first render to prevent FOUC.
+            afterNextRender(() => {
+                this.element.nativeElement.classList.remove('ngn-control-initializing');
+            });
+        }
+        else {
+            // Remove the initializing class immediately on the server to serve a complete initial HTML.
+            this.element.nativeElement.classList.remove('ngn-control-initializing');
+        }
+    }
+    /**
+     * Prepares the after leave hook to be called when the control is destroyed
+     * and its leave animation has finished.
+     */
+    prepareAfterLeaveHook() {
+        inject(DestroyRef).onDestroy(() => {
+            if (typeof this.element.nativeElement.getAnimations !== 'function') {
+                this.afterLeaveInternal();
+            }
+            else {
+                NgnBase._enqueueLeaveCheck(this.element.nativeElement, () => this.afterLeaveInternal());
+            }
+        });
+    }
+    // --- Batched leave animation checking ---
+    // Collects all destroyed components in the same frame into one queue,
+    // then processes them in a single rAF to avoid layout thrashing from
+    // interleaved getAnimations() calls and DOM mutations.
+    static _leaveQueue = [];
+    static _leaveRafScheduled = false;
+    static _enqueueLeaveCheck(element, callback) {
+        NgnBase._leaveQueue.push({ element, callback });
+        if (!NgnBase._leaveRafScheduled) {
+            NgnBase._leaveRafScheduled = true;
+            requestAnimationFrame(() => NgnBase._processLeaveQueue());
+        }
+    }
+    static _processLeaveQueue() {
+        const queue = NgnBase._leaveQueue;
+        NgnBase._leaveQueue = [];
+        NgnBase._leaveRafScheduled = false;
+        // Phase 1: Read all animations (batched queries — no interleaved mutations)
+        const results = [];
+        for (const { element, callback } of queue) {
+            results.push({
+                animation: NgnBase._findLeaveAnimation(element),
+                callback,
+            });
+        }
+        // Phase 2: Process results (no more style queries needed)
+        for (const { animation, callback } of results) {
+            if (!animation) {
+                callback();
+            }
+            else {
+                animation.finished
+                    .catch(() => {
+                    // ignore errors from animations being cancelled
+                })
+                    .finally(() => {
+                    callback();
+                });
+            }
+        }
+    }
+    /**
+     * Recursively searches for a leave animation on the element and its parents.
+     */
+    static _findLeaveAnimation(element) {
+        const animations = element.getAnimations();
+        const leaveAnimation = animations.find(a => a instanceof CSSAnimation && a.animationName.endsWith('-leave'));
+        if (leaveAnimation) {
+            return leaveAnimation;
+        }
+        if (element.parentElement) {
+            return NgnBase._findLeaveAnimation(element.parentElement);
+        }
+        return null;
+    }
+    afterLeaveInternal() {
+        /**
+         * After the control is hidden/removed from the DOM,
+         * manually wipe the innerHTML to ensure no detached children remain
+         * mapped to this component's LView slots in the browser's memory.
+         * This is especially important for controls that use ng-content
+         * or dynamically render child components.
+         */
+        this.element.nativeElement.innerHTML = '';
+        this._afterLeaveCbs.forEach(cb => cb());
+        this.afterLeave();
+    }
+    /**
+     * Lifecycle hook that is called after the control has left (been removed from) the DOM.
+     * Can be overridden by subclasses to perform custom actions after the leave animation.
+     */
+    afterLeave() {
+        // Can be overridden by subclasses
+    }
+    /**
+     * @internal
+     */
+    injectThemeTemplate(template, hostClass) {
+        const opts = { unstyled: this.unstyled };
+        const theme = injectThemeTemplate(template, opts);
+        const kinds = injectThemeControlKinds(theme.scope)();
+        if (kinds.length) {
+            this._defaultKind.set(kinds[0]);
+        }
+        const colors = injectThemeColors(theme.scope)();
+        if (colors.length) {
+            this._defaultColor.set(colors[0]);
+        }
+        if (hostClass !== undefined) {
+            // See constructor comment: `this` (NgnBase<T>) isn't structurally assignable
+            // to NgnBaseSafe<T & string> for a generic T because `pt`'s type still
+            // depends on T. Narrow the erasure to this control's own T & string, which
+            // matches what NgnPtEngine actually needs here.
+            new NgnPtEngine(this, hostClass);
+        }
+        return theme;
+    }
+    /**
+     * Toggles the kind and color theme classes based on the current values of the kind and color inputs.
+     */
+    initializeKindAndColorClasses() {
+        this.initializeAutoThemeClasses('kind', this.appliedKind);
+        this.initializeAutoThemeClasses('color', this.appliedColor);
+    }
+    /**
+     * Initializes automatic theme class toggling for a given prefix based on the provided string signal.
+     *
+     * ⚠️ Caution: This method assumes that the control's theme supports classes with the given prefix.
+     *
+     * ⚠️ Caution: Make sure the signal provides only string or nullish values.
+     *
+     * @param prefix The prefix for the theme class (e.g., 'kind' or 'color').
+     * @param signal The signal that provides the current string value for the theme class.
+     */
+    initializeAutoThemeClasses(prefix, signal) {
+        const element = this.element.nativeElement;
+        /**
+         * We can't know here whether the control has any kind or color classes,
+         * so we cast explicitly to ThemeClassToken. In practice, controls without
+         * kind or color classes will simply not toggle any classes as the input type does not allow it.
+         */
+        const classToken = (value) => value;
+        const togglePrefixedThemeClass = (prefix, value, enabled) => {
+            if (!value) {
+                return;
+            }
+            const theme = this.theme;
+            if (!theme) {
+                return;
+            }
+            toggleClass(element, theme.class(classToken(`${prefix}-${value}`)), enabled);
+        };
+        effectWithPrevious(signal, (current, previous) => {
+            togglePrefixedThemeClass(prefix, previous, false);
+            togglePrefixedThemeClass(prefix, current, true);
+        });
+        this._afterLeaveCbs.push(() => {
+            togglePrefixedThemeClass(prefix, signal(), false);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: NgnBase, isStandalone: true, inputs: { unstyled: { classPropertyName: "unstyled", publicName: "unstyled", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, pt: { classPropertyName: "pt", publicName: "pt", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngn-control ngn-control-initializing" }, viewQueries: [{ propertyName: "_childNgnControls", predicate: NGN_CONTROL, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: { class: 'ngn-control ngn-control-initializing' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { unstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "unstyled", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], pt: [{ type: i0.Input, args: [{ isSignal: true, alias: "pt", required: false }] }], _childNgnControls: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => NGN_CONTROL), { isSignal: true }] }] } });
+
+class NgnPtEngine {
+    pt;
+    ptClass;
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** The passthrough values currently applied to the element, for teardown on destroy. */
+    _currentAppliedPts;
+    classes = computed(() => {
+        const pt = this.pt();
+        if ('theme' in pt) {
+            const theme = pt['theme'];
+            const res = getAppliedClasses(this.ptClass(), theme);
+            return res;
+        }
+        return [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    _appliedPts = computed(() => {
+        const pt = this.pt()?.pt();
+        if (!pt) {
+            return;
+        }
+        const classes = this.classes();
+        return classes.map(({ name: ptClass }) => {
+            const classPt = getPropertyIfExists(pt, ptClass);
+            return classPt;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_appliedPts" }] : /* istanbul ignore next */ []));
+    constructor(pt, ptClass, options) {
+        const sigPt = typeof pt === 'function' ? pt : signal(pt);
+        const sigPtClass = typeof ptClass === 'function' ? ptClass : signal(ptClass);
+        this.pt = sigPt;
+        this.ptClass = sigPtClass;
+        const classes = computed(() => this.classes().map(c => c.class), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        classSignal(this._elementRef.nativeElement, classes);
+        if (options?.applyPassthrough === false) {
+            return;
+        }
+        effectWithPrevious(this._appliedPts, (current, previous) => {
+            if (previous) {
+                for (const classPt of previous) {
+                    if (!classPt) {
+                        continue;
+                    }
+                    this.removePreviousPtValues(classPt);
+                }
+            }
+            if (current) {
+                for (const classPt of current) {
+                    if (!classPt) {
+                        continue;
+                    }
+                    this.setNewPtValues(classPt);
+                }
+            }
+            this._currentAppliedPts = current;
+        });
+        // Detach applied passthrough (notably event listeners) when the element is
+        // destroyed, so nothing leaks past the control's lifetime.
+        this._destroyRef.onDestroy(() => {
+            if (!this._currentAppliedPts) {
+                return;
+            }
+            for (const classPt of this._currentAppliedPts) {
+                if (!classPt) {
+                    continue;
+                }
+                this.removePreviousPtValues(classPt);
+            }
+        });
+    }
+    setNewPtValues(classPt) {
+        if (classPt.$styles) {
+            const keys = objectKeys(classPt.$styles);
+            keys.forEach(key => {
+                this._elementRef.nativeElement.style[key] =
+                    classPt.$styles?.[key] || '';
+            });
+        }
+        if (classPt.$attributes) {
+            const keys = objectKeys(classPt.$attributes);
+            keys.forEach(key => {
+                this._elementRef.nativeElement.setAttribute(key, classPt.$attributes?.[key] || '');
+            });
+        }
+        if (classPt.$classes) {
+            const arrayOfClasses = Array.isArray(classPt.$classes)
+                ? classPt.$classes.flatMap(c => c.split(' '))
+                : classPt.$classes.split(' ');
+            arrayOfClasses.forEach(cls => {
+                try {
+                    this._elementRef.nativeElement.classList.add(cls);
+                }
+                catch {
+                    console.warn(`Could not add class '${cls}' to element`, this._elementRef.nativeElement);
+                }
+            });
+        }
+        if (classPt.$listeners) {
+            objectKeys(classPt.$listeners).forEach(eventName => {
+                const handler = classPt.$listeners?.[eventName];
+                if (!handler) {
+                    return;
+                }
+                this._elementRef.nativeElement.addEventListener(eventName, handler);
+            });
+        }
+    }
+    removePreviousPtValues(classPt) {
+        if (classPt.$styles) {
+            const keys = objectKeys(classPt.$styles);
+            keys.forEach(key => {
+                this._elementRef.nativeElement.style[key] = '';
+            });
+        }
+        if (classPt.$attributes) {
+            const keys = objectKeys(classPt.$attributes);
+            keys.forEach(key => {
+                this._elementRef.nativeElement.removeAttribute(key);
+            });
+        }
+        if (classPt.$classes) {
+            const arrayOfClasses = Array.isArray(classPt.$classes)
+                ? classPt.$classes.flatMap(c => c.split(' '))
+                : classPt.$classes.split(' ');
+            arrayOfClasses.forEach(cls => {
+                try {
+                    this._elementRef.nativeElement.classList.remove(cls);
+                }
+                catch {
+                    console.warn(`Could not remove class '${cls}' from element`, this._elementRef.nativeElement);
+                }
+            });
+        }
+        if (classPt.$listeners) {
+            objectKeys(classPt.$listeners).forEach(eventName => {
+                const listener = classPt.$listeners?.[eventName];
+                if (!listener) {
+                    return;
+                }
+                this._elementRef.nativeElement.removeEventListener(eventName, listener);
+            });
+        }
+    }
+}
+
+// Internal passthrough directive; intentionally uses the non-prefixed `ptInt` selector.
+class NgnPt {
+    /** The parent control whose theme/passthrough this element pulls from. */
+    ptInt = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ptInt" }] : /* istanbul ignore next */ []));
+    /**
+     * Parent-scope class token(s) applied to this element, along with the parent's
+     * `pt` slice for those classes. Use for flat theme parts of the parent.
+     */
+    ptClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Dependency-slot class on the parent. Applies the parent's marker class
+     * (`{parentScope}-{ptDep}`) to this element and forwards the parent's
+     * `pt[ptDep]` slice into the nested control that lives on this element, so the
+     * nested control resolves it against its own theme.
+     */
+    ptDep = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptDep" }] : /* istanbul ignore next */ []));
+    /**
+     * The nested control hosted on THIS element (present when `ptDep` targets a
+     * control). `self: true` is essential: without it the injection climbs to an
+     * ancestor control (e.g. the parent that owns `[ptInt]`), and the forwarding
+     * effect would then overwrite the ancestor's `pt` instead of the child's.
+     */
+    _self = inject(NGN_CONTROL, {
+        optional: true,
+        self: true,
+    });
+    /**
+     * Flat class engine for `ptClass`: applies the parent's scope class(es) and the
+     * matching `pt` slice to this element. A missing `ptClass` resolves to a no-op.
+     */
+    _classEngine = new NgnPtEngine(this.ptInt, computed(() => this.ptClass() ?? {}));
+    /**
+     * Marker engine for `ptDep`: applies ONLY the parent's `{parentScope}-{ptDep}`
+     * class to this element (`applyPassthrough: false`). The forwarded slice is
+     * applied separately, through the nested control's own engine.
+     */
+    _markerEngine = new NgnPtEngine(this.ptInt, computed(() => (this.ptDep() ?? {})), { applyPassthrough: false });
+    /** The parent's `pt` slice for the current `ptDep` slot, or `undefined`. */
+    _depSlice = computed(() => {
+        const dep = this.ptDep();
+        if (!dep) {
+            return undefined;
+        }
+        const parentPt = this.ptInt().pt?.();
+        return parentPt?.[dep];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_depSlice" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const self = this._self;
+        if (!self) {
+            // No nested control on this element (e.g. `ptDep` on a plain element): only
+            // the marker class applies; there is no child theme to forward the slice to.
+            // Warn (dev only) if a `ptDep` is actually set — read it in an effect, since
+            // inputs are not yet resolved in the constructor.
+            if (isDevMode()) {
+                effect(() => {
+                    if (this.ptDep()) {
+                        console.warn('[ptDep] is set but no nested control was found on this element; the parent' +
+                            " dependency slice can't be forwarded. Did you forget to host a control here?");
+                    }
+                });
+            }
+            return;
+        }
+        // Forward the parent's dependency slice into the nested control's own `pt`
+        // input, so the child's existing engine(s) resolve it against its theme.
+        // Reactive to parent `pt` changes; torn down with the directive/child. Writes
+        // on every run (even `undefined`) so a slice that disappears (e.g. `ptDep`
+        // cleared) clears the child's `pt` instead of leaving it stale; the child's
+        // own engine already treats a falsy `pt` as a no-op.
+        effect(() => {
+            setInputSignalValue(self.pt, this._depSlice());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnPt, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnPt, isStandalone: true, selector: "[ptInt]", inputs: { ptInt: { classPropertyName: "ptInt", publicName: "ptInt", isSignal: true, isRequired: true, transformFunction: null }, ptClass: { classPropertyName: "ptClass", publicName: "ptClass", isSignal: true, isRequired: false, transformFunction: null }, ptDep: { classPropertyName: "ptDep", publicName: "ptDep", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnPt, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ptInt]' }]
+        }], ctorParameters: () => [], propDecorators: { ptInt: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptInt", required: true }] }], ptClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptClass", required: false }] }], ptDep: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptDep", required: false }] }] } });
+
+class ValueControlBase extends NgnBase {
+    /**
+     * The label for the control.
+     */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the `aria-labelledby` attribute on the control.
+     * @default null
+     */
+    labelledBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * The ID for the control
+     * @default generateElementId()
+     */
+    inputId = input(generateElementId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The value of the control.
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Set the disabled state of the control.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ValueControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: ValueControlBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ValueControlBase, decorators: [{
+            type: Directive
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGN_CONTROL, NgnBase, NgnPt, NgnPtEngine, ValueControlBase, getNearestNgnInstance, getNearestNgnInstanceSig, getNgnInstance, provideSelf, setNgnInstance };
+//# sourceMappingURL=ngneers-controls-base.mjs.map