@ionic/angular 7.3.4-dev.11696436834.1e83c799 → 7.3.4-dev.11699470772.1dad7e66

package/fesm2015/ionic-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Directive, HostListener, Component, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, Optional, forwardRef, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, MaxValidator, MinValidator } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, MaxValidator, MinValidator } from '@angular/forms';
 import * as i2 from '@ionic/angular/common';
-import { ValueAccessor, setIonicClasses, IonRouterOutlet as IonRouterOutlet$1, IonTabs as IonTabs$1, IonBackButton as IonBackButton$1, IonNav as IonNav$1, RouterLinkDelegateDirective as RouterLinkDelegateDirective$1, RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegateDirective$1, IonModal as IonModal$1, IonPopover as IonPopover$1, raf, ConfigToken, provideComponentInputBinding, AngularDelegate, ModalController, PopoverController } from '@ionic/angular/common';
+import { IonRouterOutlet as IonRouterOutlet$1, IonTabs as IonTabs$1, IonBackButton as IonBackButton$1, IonNav as IonNav$1, RouterLinkDelegateDirective as RouterLinkDelegateDirective$1, RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegateDirective$1, IonModal as IonModal$1, IonPopover as IonPopover$1, ConfigToken, provideComponentInputBinding, AngularDelegate, ModalController, PopoverController } from '@ionic/angular/common';
 export { ActionSheetController, AlertController, AngularDelegate, AnimationController, Config, DomController, GestureController, IonicRouteStrategy, LoadingController, MenuController, ModalController, NavController, NavParams, PickerController, Platform, PopoverController, ToastController } from '@ionic/angular/common';
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
@@ -12,13 +12,160 @@ import { setupConfig } from '@ionic/core';
 export { IonicSafeString, IonicSlides, createAnimation, createGesture, getPlatforms, getTimeGivenProgression, iosTransitionAnimation, isPlatform, mdTransitionAnimation } from '@ionic/core';
 import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
+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, el) {
+        this.injector = injector;
+        this.el = el;
+        this.onChange = () => {
+            /**/
+        };
+        this.onTouched = () => {
+            /**/
+        };
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue = value;
+        setIonicClasses(this.el);
+    }
+    /**
+     * 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.el.nativeElement) {
+            if (value !== this.lastValue) {
+                this.lastValue = value;
+                this.onChange(value);
+            }
+            setIonicClasses(this.el);
+        }
+    }
+    _handleBlurEvent(el) {
+        if (el === this.el.nativeElement) {
+            this.onTouched();
+            setIonicClasses(this.el);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        if (this.statusChanges) {
+            this.statusChanges.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        let ngControl;
+        try {
+            ngControl = this.injector.get(NgControl);
+        }
+        catch (_a) {
+            /* 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.el));
+        }
+        /**
+         * 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.el);
+                    };
+                }
+            });
+        }
+    }
+}
+/** @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;
+};
+
 class BooleanValueAccessorDirective extends ValueAccessor {
     constructor(injector, el) {
         super(injector, el);
     }
     writeValue(value) {
-        this.elementRef.nativeElement.checked = this.lastValue = value;
-        setIonicClasses(this.elementRef);
+        this.el.nativeElement.checked = this.lastValue = value;
+        setIonicClasses(this.el);
     }
     _handleIonChange(el) {
         this.handleValueChange(el, el.checked);
@@ -91,11 +238,8 @@ class RadioValueAccessorDirective extends ValueAccessor {
     constructor(injector, el) {
         super(injector, el);
     }
+    // TODO(FW-2827): type (HTMLIonRadioElement and HTMLElement are both missing `checked`)
     _handleIonSelect(el) {
-        /**
-         * The `el` type is any to access the `checked` state property
-         * that is not exposed on the type interface.
-         */
         this.handleValueChange(el, el.checked);
     }
 }