@fundamental-ngx/platform 0.43.50 → 0.43.52

package/fesm2020/fundamental-ngx-platform-form.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Injectable, Inject, forwardRef, isDevMode, EventEmitter, TemplateRef, ElementRef, Optional, Self, SkipSelf, Output, ViewChild, ContentChildren, Host, Attribute, ViewChildren, HostListener, NgModule, Injector, Pipe, LOCALE_ID } from '@angular/core';
+import { InjectionToken, Directive, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Injectable, Inject, forwardRef, isDevMode, EventEmitter, TemplateRef, ElementRef, Optional, Self, SkipSelf, Output, ViewChild, ContentChildren, Host, Attribute, ViewChildren, HostListener, NgModule, inject, NgZone, Injector, Pipe, LOCALE_ID } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { FD_FORM_FIELD, FD_FORM_FIELD_CONTROL } from '@fundamental-ngx/cdk/forms';
 import { uniqBy, merge as merge$1, cloneDeep } from 'lodash-es';
 import * as i15 from 'rxjs';
-import { Subject, BehaviorSubject, tap, combineLatest, filter, Subscription, merge, fromEvent, isObservable, firstValueFrom, of, timer, interval } from 'rxjs';
+import { Subject, BehaviorSubject, tap, combineLatest, filter, Subscription, merge, fromEvent, isObservable, takeUntil as takeUntil$1, firstValueFrom, of, timer, interval } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil, switchMap, startWith, debounceTime, filter as filter$1, take, skip } from 'rxjs/operators';
 import * as i1 from '@fundamental-ngx/platform/shared';
 import { ColumnLayoutGridClass, ResponsiveBreakPointConfig, RESPONSIVE_BREAKPOINTS_CONFIG, FormFieldGroup, BaseInput, InLineLayoutCollectionBaseInput, coerceArraySafe, CollectionBaseInput, isOptionItem, isJsObject, isString, MatchingStrategy, isFunction, isDataSource, ArrayMultiInputDataSource, ObservableMultiInputDataSource, MultiInputDataSource, DATA_PROVIDERS, PlatformContentDensityDeprecationsModule, ArrayComboBoxDataSource, ObservableComboBoxDataSource, ComboBoxDataSource, FormGroupContainer, ArrayMultiComboBoxDataSource, ObservableMultiComboBoxDataSource, isSelectableOptionItem, MultiComboBoxDataSource } from '@fundamental-ngx/platform/shared';
@@ -24,12 +24,12 @@ import { IconModule } from '@fundamental-ngx/core/icon';
 import * as i7 from '@fundamental-ngx/core/link';
 import { LinkModule } from '@fundamental-ngx/core/link';
 import * as i3$2 from '@fundamental-ngx/cdk/utils';
-import { RangeSelector, KeyUtil, TemplateDirective, isFunction as isFunction$1, selectStrategy, PipeModule, TemplateModule, DynamicComponentService, resizeObservable, InitialFocusModule, OnlyDigitsModule } from '@fundamental-ngx/cdk/utils';
+import { RangeSelector, KeyUtil, TemplateDirective, DestroyedService, isFunction as isFunction$1, selectStrategy, PipeModule, TemplateModule, DynamicComponentService, resizeObservable, InitialFocusModule, OnlyDigitsModule } from '@fundamental-ngx/cdk/utils';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2$1 from '@fundamental-ngx/core/checkbox';
 import { CheckboxComponent as CheckboxComponent$1, CheckboxModule } from '@fundamental-ngx/core/checkbox';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, ESCAPE, CONTROL, TAB, SHIFT, ALT, NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, A, SPACE, PAGE_UP, PAGE_DOWN } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, ESCAPE, CONTROL, TAB, SHIFT, ALT, NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, SPACE, A, PAGE_UP, PAGE_DOWN } from '@angular/cdk/keycodes';
 import * as i3$1 from '@fundamental-ngx/core/radio';
 import { RadioButtonComponent as RadioButtonComponent$1, RadioModule } from '@fundamental-ngx/core/radio';
 import * as i5$1 from '@fundamental-ngx/i18n';
@@ -4300,11 +4300,35 @@ class AutoCompleteDirective {
         /** Event thrown, when the auto ahead text is accepted */
         this.onComplete = new EventEmitter();
         /** @hidden */
+        this._destroyed$ = inject(DestroyedService);
+        /** @hidden */
         this._completeKeys = [ENTER];
         /** @hidden */
         this._fillKeys = [LEFT_ARROW, RIGHT_ARROW];
         /** @hidden */
         this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
+        /** @hidden */
+        this._isComposing = false;
+        /** @hidden */
+        this._zone = inject(NgZone);
+        /**
+         * Fixes #10710 / #12983
+         * With chinese characters inputText property update was triggered after the keyup event trigger.
+         * By ensuring that we set all properties we can proceed with stable data.
+         */
+        this._zone.runOutsideAngular(() => {
+            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keyup');
+            const compositionStartEvent = fromEvent(this._elementRef.nativeElement, 'compositionstart');
+            const compositionEndEvent = fromEvent(this._elementRef.nativeElement, 'compositionend');
+            keyupEvent.pipe(takeUntil$1(this._destroyed$)).subscribe((evt) => this.handleKeyboardEvent(evt));
+            compositionStartEvent.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+                this._isComposing = true;
+            });
+            compositionEndEvent.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+                this._isComposing = false;
+                this.inputText = this._elementRef.nativeElement.value;
+            });
+        });
     }
     /** @hidden */
     handleBlur() {
@@ -4314,24 +4338,26 @@ class AutoCompleteDirective {
     }
     /** @hidden */
     handleKeyboardEvent(event) {
-        if (KeyUtil.isKeyCode(event, this._stopKeys)) {
-            this._element.value = this.inputText;
-        }
-        else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
-            this._sendCompleteEvent(true);
-        }
-        else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
-            this._sendCompleteEvent(false);
-        }
-        else if (!this._isControlKey(event) && this.inputText) {
-            /** Prevention from triggering typeahead, when having crtl/cmd + keys */
-            if (!this._triggerTypeAhead()) {
-                return;
+        if (!this._isComposing) {
+            if (KeyUtil.isKeyCode(event, this._stopKeys)) {
+                this._element.value = this.inputText;
             }
-            this._oldValue = this.inputText;
-            const item = this._searchByStrategy();
-            if (item) {
-                this._typeahead(item.label);
+            else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
+                this._sendCompleteEvent(true);
+            }
+            else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
+                this._sendCompleteEvent(false);
+            }
+            else if (!this._isControlKey(event) && this.inputText) {
+                /** Prevention from triggering typeahead, when having crtl/cmd + keys */
+                if (!this._triggerTypeAhead()) {
+                    return;
+                }
+                this._oldValue = this.inputText;
+                const item = this._searchByStrategy();
+                if (item) {
+                    this._typeahead(item.label);
+                }
             }
         }
         this._lastKeyUpEvent = event;
@@ -6101,8 +6127,10 @@ class BaseCombobox extends CollectionBaseInput {
                 this.isOpenChangeHandle(true);
             }
             const acceptedKeys = !KeyUtil.isKeyCode(event, BACKSPACE) &&
+                !KeyUtil.isKeyCode(event, SPACE) &&
                 !KeyUtil.isKeyType(event, 'alphabetical') &&
                 !KeyUtil.isKeyType(event, 'numeric') &&
+                !KeyUtil.isKeyType(event, 'ime') &&
                 !KeyUtil.isKeyCode(event, this._numberPadNumberKeys);
             if (this.isEmptyValue && acceptedKeys) {
                 this.listComponent?.setItemActive(0);
@@ -8819,7 +8847,9 @@ class BaseMultiCombobox extends CollectionBaseInput {
         }
         else if (!KeyUtil.isKeyCode(event, [...this._nonOpeningKeys, CONTROL])) {
             this.showList(true);
-            const acceptedKeys = !KeyUtil.isKeyType(event, 'alphabetical') && !KeyUtil.isKeyType(event, 'numeric');
+            const acceptedKeys = !KeyUtil.isKeyType(event, 'alphabetical') &&
+                !KeyUtil.isKeyType(event, 'numeric') &&
+                !KeyUtil.isKeyType(event, 'ime');
             if (acceptedKeys) {
                 // SetTimeout is needed for input to receive new value.
                 setTimeout(() => {