@ionic/angular 7.3.4-dev.11695051069.10d92d60 → 7.3.4-dev.11695650636.128f2ec9

package/fesm2020/ionic-angular-common.mjs

@@ -8,6 +8,7 @@ import { DOCUMENT } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, combineLatest, of } from 'rxjs';
 import { __decorate } from 'tslib';
 import { filter, switchMap, distinctUntilChanged } from 'rxjs/operators';
+import { NgControl } from '@angular/forms';
 
 // TODO(FW-2827): types
 class OverlayBaseController {
@@ -2398,6 +2399,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['ionTabButtonClick', ['$event']]
             }] } });
 
+const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+
+// TODO(FW-2827): types
+class ValueAccessor {
+    constructor(injector, elementRef) {
+        this.injector = injector;
+        this.elementRef = elementRef;
+        this.onChange = () => {
+            /**/
+        };
+        this.onTouched = () => {
+            /**/
+        };
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.value = this.lastValue = value;
+        setIonicClasses(this.elementRef);
+    }
+    /**
+     * Notifies the ControlValueAccessor of a change in the value of the control.
+     *
+     * This is called by each of the ValueAccessor directives when we want to update
+     * the status and validity of the form control. For example with text components this
+     * is called when the ionInput event is fired. For select components this is called
+     * when the ionChange event is fired.
+     *
+     * This also updates the Ionic form status classes on the element.
+     *
+     * @param el The component element.
+     * @param value The new value of the control.
+     */
+    handleValueChange(el, value) {
+        if (el === this.elementRef.nativeElement) {
+            if (value !== this.lastValue) {
+                this.lastValue = value;
+                this.onChange(value);
+            }
+            setIonicClasses(this.elementRef);
+        }
+    }
+    _handleBlurEvent(el) {
+        if (el === this.elementRef.nativeElement) {
+            this.onTouched();
+            setIonicClasses(this.elementRef);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.elementRef.nativeElement.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        if (this.statusChanges) {
+            this.statusChanges.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        let ngControl;
+        try {
+            ngControl = this.injector.get(NgControl);
+        }
+        catch {
+            /* No FormControl or ngModel binding */
+        }
+        if (!ngControl) {
+            return;
+        }
+        // Listen for changes in validity, disabled, or pending states
+        if (ngControl.statusChanges) {
+            this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.elementRef));
+        }
+        /**
+         * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
+         * whenever it is implemented.
+         */
+        const formControl = ngControl.control;
+        if (formControl) {
+            const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+            methodsToPatch.forEach((method) => {
+                if (typeof formControl[method] !== 'undefined') {
+                    const oldFn = formControl[method].bind(formControl);
+                    formControl[method] = (...params) => {
+                        oldFn(...params);
+                        setIonicClasses(this.elementRef);
+                    };
+                }
+            });
+        }
+    }
+}
+/** @nocollapse */ ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ValueAccessor, host: { listeners: { "ionBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['ionBlur', ['$event.target']]
+            }] } });
+const setIonicClasses = (element) => {
+    raf(() => {
+        const input = element.nativeElement;
+        const hasValue = input.value != null && input.value.toString().length > 0;
+        const classes = getClasses(input);
+        setClasses(input, classes);
+        const item = input.closest('ion-item');
+        if (item) {
+            if (hasValue) {
+                setClasses(item, [...classes, 'item-has-value']);
+            }
+            else {
+                setClasses(item, classes);
+            }
+        }
+    });
+};
+const getClasses = (element) => {
+    const classList = element.classList;
+    const classes = [];
+    for (let i = 0; i < classList.length; i++) {
+        const item = classList.item(i);
+        if (item !== null && startsWith(item, 'ng-')) {
+            classes.push(`ion-${item.substring(3)}`);
+        }
+    }
+    return classes;
+};
+const setClasses = (element, classes) => {
+    const classList = element.classList;
+    classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+    classList.add(...classes);
+};
+const startsWith = (input, search) => {
+    return input.substring(0, search.length) === search;
+};
+
 /**
  * Provides a way to customize when activated routes get reused.
  */
@@ -2457,5 +2605,5 @@ class IonicRouteStrategy {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionSheetController, AlertController, AngularDelegate, AnimationController, Config, ConfigToken, DomController, GestureController, IonBackButton, IonModal, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, LoadingController, MenuController, ModalController, NavController, NavParams, PickerController, Platform, PopoverController, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ToastController, bindLifecycleEvents, provideComponentInputBinding };
+export { ActionSheetController, AlertController, AngularDelegate, AnimationController, Config, ConfigToken, DomController, GestureController, IonBackButton, IonModal, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, LoadingController, MenuController, ModalController, NavController, NavParams, PickerController, Platform, PopoverController, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ToastController, ValueAccessor, bindLifecycleEvents, provideComponentInputBinding, raf, setIonicClasses };
 //# sourceMappingURL=ionic-angular-common.mjs.map