@ship-ui/core 0.16.2 → 0.16.3

package/fesm2022/ship-ui-core.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
-import { isPlatformBrowser, JsonPipe, DatePipe, NgTemplateOutlet } from '@angular/common';
+import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
@@ -3461,135 +3461,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
-function createInputSignal(input, options) {
-    const injector = options?.injector || (assertInInjectionContext(createInputSignal), inject(Injector));
-    const { debounce = 0, initialValue = undefined, transform = (value) => value, compare = (a, b) => a === b, forceType = undefined, returnPreviousValue = true, } = options || {};
-    const valueSignal = signal(initialValue, ...(ngDevMode ? [{ debugName: "valueSignal" }] : []));
-    const destroyRef = injector.get(DestroyRef);
-    const inputElementRef = computed(() => {
-        const inputElement = input()?.nativeElement;
-        if (!(inputElement instanceof HTMLInputElement || inputElement instanceof HTMLTextAreaElement)) {
-            return;
-        }
-        return createCustomInputEventListener(inputElement);
-    }, ...(ngDevMode ? [{ debugName: "inputElementRef" }] : []));
-    let isUpdating = false;
-    let previousValue;
-    let timeoutId = null;
-    effect(() => {
-        const inputElement = inputElementRef();
-        if (!inputElement) {
-            return valueSignal.set(returnPreviousValue && previousValue ? transform(previousValue) : undefined);
-        }
-        if (initialValue !== undefined && inputElement.value === '') {
-            valueSignal.set(initialValue);
-        }
-        else if (inputElement.value !== '') {
-            syncValueFromInput();
-        }
-        const inputHandler = (e) => {
-            if (timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-            timeoutId = setTimeout(() => {
-                timeoutId = null;
-                syncValueFromInput();
-            }, debounce);
-        };
-        inputElement.addEventListener('input', inputHandler);
-        inputElement.addEventListener('inputValueChanged', inputHandler);
-        destroyRef.onDestroy(() => {
-            inputElement.removeEventListener('input', inputHandler);
-            inputElement.removeEventListener('inputValueChanged', inputHandler);
-            if (timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        });
-    }, { injector });
-    effect(() => {
-        const inputElement = inputElementRef();
-        if (!inputElement)
-            return;
-        const currentValue = valueSignal() ?? '';
-        let domValue = currentValue === null || currentValue === undefined ? '' : String(currentValue);
-        if (inputElement.value !== domValue) {
-            previousValue = domValue;
-            inputElement.value = domValue;
-            inputElement.dispatchEvent(new Event('input'));
-        }
-    }, { injector });
-    return valueSignal;
-    function syncValueFromInput() {
-        if (isUpdating)
-            return;
-        isUpdating = true;
-        try {
-            const inputElement = inputElementRef();
-            if (!inputElement)
-                return;
-            const inputValue = inputElement.value;
-            const transformedValue = forceType ? forceTransform(inputValue, forceType) : transform(inputValue);
-            previousValue = inputValue;
-            if (!compare(valueSignal(), transformedValue)) {
-                valueSignal.set(transformedValue);
-            }
-        }
-        finally {
-            isUpdating = false;
-        }
-    }
-    function createCustomInputEventListener(input) {
-        Object.defineProperty(input, 'value', {
-            configurable: true,
-            get() {
-                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value'); // Use Object.getPrototypeOf
-                return descriptor.get.call(this);
-            },
-            set(newVal) {
-                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value'); // Use Object.getPrototypeOf
-                descriptor.set.call(this, newVal);
-                const inputEvent = new CustomEvent('inputValueChanged', {
-                    bubbles: true,
-                    cancelable: true,
-                    detail: {
-                        value: newVal,
-                    },
-                });
-                this.dispatchEvent(inputEvent);
-                return newVal;
-            },
-        });
-        return input;
-    }
-    function forceTransform(value, type) {
-        switch (type) {
-            case 'string':
-                return value.toString();
-            case 'number':
-                const num = Number(value);
-                return isNaN(num) ? undefined : num;
-            case 'boolean':
-                return (value.toLowerCase() === 'true'
-                    ? true
-                    : value.toLowerCase() === 'false'
-                        ? false
-                        : undefined);
-            default:
-                return value;
-        }
-    }
-}
-
 function observeFirstChild(parentEl, elementTags) {
     const elementSignal = signal(null, ...(ngDevMode ? [{ debugName: "elementSignal" }] : []));
     const _upperCaseElementTags = elementTags.map((tag) => tag.toUpperCase());
     const injector = inject(Injector);
     const destroyRef = injector.get(DestroyRef);
-    if (typeof MutationObserver === 'undefined')
+    if (isPlatformServer(injector.get(PLATFORM_ID)) || typeof MutationObserver === 'undefined')
         return elementSignal.asReadonly();
     const initialElement = _upperCaseElementTags.find((tag) => parentEl.nativeElement.querySelector(tag));
     if (initialElement) {
-        console.log('initialElement', initialElement);
         elementSignal.set(new ElementRef(parentEl.nativeElement.querySelector(elementTags[0])));
         return elementSignal.asReadonly();
     }
@@ -3667,6 +3547,89 @@ function observeChildren(parentEl, elementTags) {
     };
 }
 
+function createFormInputSignal(formEl, elementTags = ['input', 'textarea']) {
+    const elementRefSignal = formEl ? formEl : observeFirstChild(inject(ElementRef), elementTags);
+    const valueSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "valueSignal" }] : []));
+    const injector = inject(Injector);
+    const destroyRef = injector.get(DestroyRef);
+    const firstInputEl = signal(null, ...(ngDevMode ? [{ debugName: "firstInputEl" }] : []));
+    effect((onCleanup) => {
+        const elRef = elementRefSignal();
+        if (!elRef)
+            return;
+        const inputEl = elRef.nativeElement;
+        if (!inputEl)
+            return;
+        createCustomInputEventListener(inputEl);
+        firstInputEl.set(inputEl);
+        valueSignal.set(inputEl.value ?? '');
+        onCleanup(() => {
+            firstInputEl.set(null);
+        });
+    }, { injector });
+    let removeListener = null;
+    effect(() => {
+        const inputEl = firstInputEl();
+        if (!inputEl)
+            return;
+        if (removeListener) {
+            removeListener();
+            removeListener = null;
+        }
+        const inputChangedListener = (event) => {
+            valueSignal.set(event.detail.value);
+        };
+        const inputListener = (event) => {
+            valueSignal.set(event.target.value);
+        };
+        inputEl.addEventListener('input', inputListener);
+        inputEl.addEventListener('inputValueChanged', inputChangedListener);
+        valueSignal.set(inputEl.value);
+        removeListener = () => {
+            inputEl.removeEventListener('input', inputListener);
+            inputEl.removeEventListener('inputValueChanged', inputChangedListener);
+        };
+        destroyRef.onDestroy(() => {
+            if (removeListener)
+                removeListener();
+        });
+    }, { injector });
+    effect(() => {
+        const inputEl = firstInputEl();
+        if (!inputEl)
+            return;
+        const inputValue = valueSignal();
+        if (!inputValue)
+            return;
+        inputEl.value = inputValue;
+        inputEl.dispatchEvent(new Event('input'));
+    }, { injector });
+    return valueSignal;
+}
+function createCustomInputEventListener(input) {
+    Object.defineProperty(input, 'value', {
+        configurable: true,
+        get() {
+            const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+            return descriptor.get.call(this);
+        },
+        set(newVal) {
+            const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+            descriptor.set.call(this, newVal);
+            const inputEvent = new CustomEvent('inputValueChanged', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    value: newVal,
+                },
+            });
+            this.dispatchEvent(inputEvent);
+            return newVal;
+        },
+    });
+    return input;
+}
+
 class ShipMenu {
     constructor() {
         this.#document = inject(DOCUMENT);
@@ -3685,7 +3648,7 @@ class ShipMenu {
         this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
         this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
-        this.inputValue = createInputSignal(this.inputRef);
+        this.inputValue = createFormInputSignal(this.inputRef);
         this.abortController = null;
         this.optionsEffect = effect(() => {
             if (this.abortController !== null) {
@@ -6378,6 +6341,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], itemElements: [{ type: i0.ViewChildren, args: ['item', { isSignal: true }] }] } });
 
+class ShipFormFieldExperimental {
+    constructor() {
+        this.firstInput = createFormInputSignal();
+        this.hello = effect(() => {
+            console.log('hello', this.firstInput());
+        }, ...(ngDevMode ? [{ debugName: "hello" }] : []));
+    }
+    myClick() {
+        this.firstInput.update((x) => x + 'hello');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormFieldExperimental, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipFormFieldExperimental, isStandalone: true, selector: "sh-form-field-experimental", ngImport: i0, template: `
+    <ng-content></ng-content>
+
+    <button (click)="myClick()">hello</button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormFieldExperimental, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-form-field-experimental',
+                    imports: [],
+                    template: `
+    <ng-content></ng-content>
+
+    <button (click)="myClick()">hello</button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class ShipFileDragDrop {
     constructor() {
         this.filesOver = signal(false, ...(ngDevMode ? [{ debugName: "filesOver" }] : []));
@@ -6731,5 +6725,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map