igniteui-angular 15.0.0-rc.0 → 15.0.0

package/fesm2020/igniteui-angular.mjs

@@ -15164,6 +15164,16 @@ class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective {
     onInput() {
         this.open();
     }
+    /** @hidden @internal */
+    onCompositionStart() {
+        if (!this._composing) {
+            this._composing = true;
+        }
+    }
+    /** @hidden @internal */
+    onCompositionEnd() {
+        this._composing = false;
+    }
     /** @hidden  @internal */
     onArrowDown(event) {
         event.preventDefault();
@@ -15175,7 +15185,7 @@ class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective {
     }
     /** @hidden  @internal */
     handleKeyDown(event) {
-        if (!this.collapsed) {
+        if (!this.collapsed && !this._composing) {
             switch (event.key.toLowerCase()) {
                 case 'space':
                 case 'spacebar':
@@ -15297,7 +15307,7 @@ class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective {
     ;
 }
 IgxAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxAutocompleteDirective, deps: [{ token: NgModel, optional: true, self: true }, { token: FormControlName, optional: true, self: true }, { token: IgxInputGroupComponent, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-IgxAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: IgxAutocompleteDirective, selector: "[igxAutocomplete]", inputs: { target: ["igxAutocomplete", "target"], autocompleteSettings: ["igxAutocompleteSettings", "autocompleteSettings"], disabled: ["igxAutocompleteDisabled", "disabled"] }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "input": "onInput()", "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.ArrowUp": "onArrowDown($event)", "keydown.Alt.ArrowUp": "onArrowDown($event)", "keydown.Tab": "onTab()", "keydown.Shift.Tab": "onTab()" }, properties: { "attr.autocomplete": "this.autofill", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns", "attr.aria-activedescendant": "this.ariaActiveDescendant", "attr.aria-autocomplete": "this.ariaAutocomplete" } }, exportAs: ["igxAutocomplete"], usesInheritance: true, ngImport: i0 });
+IgxAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: IgxAutocompleteDirective, selector: "[igxAutocomplete]", inputs: { target: ["igxAutocomplete", "target"], autocompleteSettings: ["igxAutocompleteSettings", "autocompleteSettings"], disabled: ["igxAutocompleteDisabled", "disabled"] }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "input": "onInput()", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.ArrowUp": "onArrowDown($event)", "keydown.Alt.ArrowUp": "onArrowDown($event)", "keydown.Tab": "onTab()", "keydown.Shift.Tab": "onTab()" }, properties: { "attr.autocomplete": "this.autofill", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns", "attr.aria-activedescendant": "this.ariaActiveDescendant", "attr.aria-autocomplete": "this.ariaAutocomplete" } }, exportAs: ["igxAutocomplete"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
@@ -15355,6 +15365,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }], onInput: [{
                 type: HostListener,
                 args: ['input']
+            }], onCompositionStart: [{
+                type: HostListener,
+                args: ['compositionstart']
+            }], onCompositionEnd: [{
+                type: HostListener,
+                args: ['compositionend']
             }], onArrowDown: [{
                 type: HostListener,
                 args: ['keydown.ArrowDown', ['$event']]
@@ -17871,7 +17887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
 const MASK_FLAGS = ['C', '&', 'a', 'A', '?', 'L', '9', '0', '#'];
 /** @hidden */
 class MaskParsingService {
-    applyMask(inputVal, maskOptions) {
+    applyMask(inputVal, maskOptions, pos = 0) {
         let outputVal = '';
         let value = '';
         const mask = maskOptions.format;
@@ -17902,7 +17918,6 @@ class MaskParsingService {
         if (nonLiteralValues.length > nonLiteralIndices.length) {
             nonLiteralValues.splice(nonLiteralIndices.length);
         }
-        let pos = 0;
         for (const nonLiteralValue of nonLiteralValues) {
             const char = nonLiteralValue;
             outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
@@ -17949,6 +17964,11 @@ class MaskParsingService {
             }
             maskedValue = this.replaceCharAt(maskedValue, i, char);
         }
+        if (Math.abs(end - start) >= 1) {
+            // set cursor to be max between last cursor pos and the calculated `end`
+            // since on `delete` the cursor should move forward
+            cursor = Math.max(cursor, end);
+        }
         return { value: maskedValue, end: cursor };
     }
     replaceCharAt(strValue, index, char) {
@@ -18198,14 +18218,16 @@ class IgxMaskDirective {
             }
             this.inputValue = isInputComplete ?
                 this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
-                : this._compositionValue.substring(0, this._compositionStartIndex);
-            this._start = this.selectionStart;
-            this._end = this.selectionEnd;
-            this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
-            this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
-            this.nativeElement.selectionEnd = this._end;
-            this._start = this.selectionStart;
-            this._end = this.selectionEnd;
+                : this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;
+            if (this._compositionValue) {
+                this._start = this.selectionStart;
+                this._end = this.selectionEnd;
+                this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
+                this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
+                this.nativeElement.selectionEnd = this._end;
+                this._start = this.selectionStart;
+                this._end = this.selectionEnd;
+            }
         }
         if (this._hasDropAction) {
             this._start = this.selectionStart;
@@ -18245,7 +18267,7 @@ class IgxMaskDirective {
     }
     /** @hidden */
     onDragEnter() {
-        if (!this._focused) {
+        if (!this._focused && !this._dataValue) {
             this.showMask(this._dataValue);
         }
     }
@@ -25906,6 +25928,15 @@ class IgxRowDirective {
             this.grid.actionStrip.show(this);
         }
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    hideActionStrip() {
+        if (this.grid.actionStrip && this.grid.actionStrip.hideOnRowLeave) {
+            this.grid.actionStrip.hide();
+        }
+    }
     /**
      * @hidden
      * @internal
@@ -26051,7 +26082,7 @@ class IgxRowDirective {
     }
 }
 IgxRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxRowDirective, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-IgxRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: IgxRowDirective, selector: "[igxRowBaseComponent]", inputs: { data: "data", index: "index", disabled: "disabled", gridID: "gridID", selected: "selected" }, outputs: { addAnimationEnd: "addAnimationEnd" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "showActionStrip()" }, properties: { "attr.role": "this.role", "attr.aria-disabled": "this.disabled", "class.igx-grid__tr--disabled": "this.disabled", "style.min-height.px": "this.rowHeight", "attr.data-rowIndex": "this.dataRowIndex", "attr.aria-selected": "this.selected" } }, viewQueries: [{ propertyName: "checkboxElement", first: true, predicate: i0.forwardRef(function () { return IgxCheckboxComponent; }), descendants: true, read: IgxCheckboxComponent }, { propertyName: "_virtDirRow", predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_cells", predicate: ["cell"], descendants: true }], ngImport: i0 });
+IgxRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: IgxRowDirective, selector: "[igxRowBaseComponent]", inputs: { data: "data", index: "index", disabled: "disabled", gridID: "gridID", selected: "selected" }, outputs: { addAnimationEnd: "addAnimationEnd" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "showActionStrip()", "mouseleave": "hideActionStrip()" }, properties: { "attr.role": "this.role", "attr.aria-disabled": "this.disabled", "class.igx-grid__tr--disabled": "this.disabled", "style.min-height.px": "this.rowHeight", "attr.data-rowIndex": "this.dataRowIndex", "attr.aria-selected": "this.selected" } }, viewQueries: [{ propertyName: "checkboxElement", first: true, predicate: i0.forwardRef(function () { return IgxCheckboxComponent; }), descendants: true, read: IgxCheckboxComponent }, { propertyName: "_virtDirRow", predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_cells", predicate: ["cell"], descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxRowDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[igxRowBaseComponent]' }]
@@ -26103,6 +26134,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }], showActionStrip: [{
                 type: HostListener,
                 args: ['mouseenter']
+            }], hideActionStrip: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 class IgxGridActionsBaseDirective {
@@ -26540,6 +26574,25 @@ class IgxActionStripComponent extends DisplayDensityBase {
         }
         return this._resourceStrings;
     }
+    /**
+     * Hide or not the Action Strip based on if it is a menu.
+     *
+     * @hidden
+     * @internal
+     */
+    get hideOnRowLeave() {
+        if (this.menu.items.length === 0) {
+            return true;
+        }
+        else if (this.menu.items.length > 0) {
+            if (this.menu.collapsed) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+    }
     /**
      * Getter for the 'display' property of the current `IgxActionStrip`
      *
@@ -78833,7 +78886,7 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
         if (isPinnedArea) {
             treeRec = this.grid.unpinnedRecords.find(x => x.data === this.data);
         }
-        return treeRec.level === 0;
+        return treeRec?.level === 0;
     }
     /**
      * @hidden