Merge branch 'master' into mdragnev/fix-12316

Author: dkamburov

gulpfile.js

@@ -248,7 +248,10 @@ function typedocBuildDocsEN(cb) {
 }
 
 const SASSDOC = {
-    PROJECT_PATH: path.join(__dirname, 'projects', 'igniteui-angular', 'src', 'lib', 'core', 'styles'),
+    PROJECT_PATHS: [
+        `${path.join(__dirname, 'projects', 'igniteui-angular', 'src', 'lib', 'core', 'styles')}/**/*.scss`,
+        `${path.join(__dirname, 'node_modules', 'igniteui-theming', 'sass')}/**/*.scss`
+    ],
     DEST: path.join(DOCS_OUTPUT_PATH, 'sass'),
     OPTIONS: path.join(__dirname, '.sassdocrc'),
 };
@@ -266,7 +269,7 @@ function sassdocBuildJson(cb) {
     options.convert = convert;
     options.exportDir = exportDir;
 
-    gulp.src(`${SASSDOC.PROJECT_PATH}/**/*.scss`)
+    gulp.src(SASSDOC.PROJECT_PATHS)
         .pipe(sassdoc(options));
 
     cb();
@@ -282,7 +285,7 @@ function sassdocImportJson(cb) {
     options.json_dir = importDir;
     options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
 
-    gulp.src(`${SASSDOC.PROJECT_PATH}/**/*.scss`)
+    gulp.src(SASSDOC.PROJECT_PATHS)
         .pipe(sassdoc(options));
 
     cb();
@@ -297,7 +300,7 @@ function sassdocBuildJA(cb) {
     options.json_dir = pathTranslations;
     options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
 
-    gulp.src(`${SASSDOC.PROJECT_PATH}/**/*.scss`)
+    gulp.src(SASSDOC.PROJECT_PATHS)
         .pipe(sassdoc(options));
 
     cb();
@@ -309,7 +312,7 @@ function sassdocBuildEN(cb) {
     options.lang = 'en';
     options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
 
-    gulp.src(`${SASSDOC.PROJECT_PATH}/**/*.scss`)
+    gulp.src(SASSDOC.PROJECT_PATHS)
         .pipe(sassdoc(options));
 
     cb();

package-lock.json

@@ -114,7 +114,7 @@
     "hammer-simulator": "0.0.1",
     "ig-typedoc-theme": "^4.2.0",
     "igniteui-sassdoc-theme": "^1.1.4",
-    "igniteui-theming": "^1.1.2",
+    "igniteui-theming": "^1.1.4",
     "igniteui-webcomponents": "^4.0.0",
     "jasmine": "^4.5.0",
     "jasmine-core": "~4.5.0",
@@ -128,7 +128,7 @@
     "postcss-scss": "^4.0.3",
     "sass": "^1.56.0",
     "sass-true": "^6.0.1",
-    "sassdoc": "^2.7.3",
+    "sassdoc": "^2.7.4",
     "sassdoc-plugin-localization": "^1.4.3",
     "stylelint": "^14.15.0",
     "stylelint-scss": "^4.1.0",

package.json

@@ -20,7 +20,7 @@ export interface Replaced {
     providedIn: 'root'
 })
 export class MaskParsingService {
-    public applyMask(inputVal: string, maskOptions: MaskOptions): string {
+    public applyMask(inputVal: string, maskOptions: MaskOptions, pos: number = 0): string {
         let outputVal = '';
         let value = '';
         const mask: string = maskOptions.format;
@@ -60,7 +60,6 @@ export class MaskParsingService {
             nonLiteralValues.splice(nonLiteralIndices.length);
         }
 
-        let pos = 0;
         for (const nonLiteralValue of nonLiteralValues) {
             const char = nonLiteralValue;
             outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
@@ -115,7 +114,13 @@ export class MaskParsingService {
             maskedValue = this.replaceCharAt(maskedValue, i, char);
         }
 
-        return { value: maskedValue, end: cursor };
+        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};
     }
 
     public replaceCharAt(strValue: string, index: number, char: string): string {

projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts

@@ -27,7 +27,7 @@ describe('igxMask', () => {
                 OneWayBindComponent,
                 PipesMaskComponent,
                 PlaceholderMaskComponent,
-                EmptyMaskTestComponent,
+                MaskTestComponent,
                 ReadonlyMaskTestComponent
             ],
             imports: [
@@ -378,7 +378,7 @@ describe('igxMask', () => {
     }));
 
     it('Should display mask on dragenter and remove it on dragleave', fakeAsync(() => {
-        const fixture = TestBed.createComponent(EmptyMaskTestComponent);
+        const fixture = TestBed.createComponent(MaskTestComponent);
         fixture.detectChanges();
         const input = fixture.componentInstance.input;
 
@@ -390,6 +390,17 @@ describe('igxMask', () => {
 
         input.nativeElement.dispatchEvent(new DragEvent('dragleave'));
         expect(input.nativeElement.value).toEqual('');
+
+        // should preserve state on dragenter        
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        UIInteractions.simulatePaste('76', fixture.debugElement.query(By.css('.igx-input-group__input')), 3, 3);
+        fixture.detectChanges();
+
+        input.nativeElement.dispatchEvent(new Event('blur'));
+        expect(input.nativeElement.value).toEqual('___76_____');
+
+        input.nativeElement.dispatchEvent(new DragEvent('dragenter'));
+        expect(input.nativeElement.value).toEqual('___76_____');
     }));
 
     it('Apply display and input pipes on blur and focus.', fakeAsync(() => {
@@ -485,6 +496,29 @@ describe('igxMask', () => {
         expect(fixture.componentInstance.maskDirective.mask).toEqual('##.##');
         expect(input.nativeElement.placeholder).toEqual('##.##');
     }));
+
+    it('should update input properly on selection with DELETE', () => {
+        const fixture = TestBed.createComponent(MaskComponent);
+        fixture.detectChanges();
+        const inputElement = fixture.debugElement.query(By.css('input'));
+        inputElement.triggerEventHandler('focus');
+        UIInteractions.simulatePaste('1234567890', inputElement, 1, 1);
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.value).toEqual('(123) 4567-890');
+        
+        const inputHTMLElement = inputElement.nativeElement as HTMLInputElement;
+        inputHTMLElement.setSelectionRange(6, 8);
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.selectionStart).toEqual(6);
+        expect(inputElement.nativeElement.selectionEnd).toEqual(8);
+
+        UIInteractions.triggerEventHandlerKeyDown('Delete', inputElement);
+        inputElement.triggerEventHandler('input', { inputType: 'test' });
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.selectionStart).toEqual(8);
+        expect(inputElement.nativeElement.selectionEnd).toEqual(8);
+        expect(inputHTMLElement.value).toEqual('(123) __67-890'); 
+    });
 });
 
 describe('igxMaskDirective ControlValueAccessor Unit', () => {
@@ -728,7 +762,7 @@ class PipesMaskComponent {
         </igx-input-group>
     `
 })
-class EmptyMaskTestComponent {
+class MaskTestComponent {
     @ViewChild('input', { static: true })
     public input: ElementRef;
 }

projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts

@@ -220,17 +220,19 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
                         numberOfMaskLiterals++;
                     }
                 }
-                this.inputValue = isInputComplete?
+                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) {
@@ -281,7 +283,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('dragenter')
     public onDragEnter(): void {
-        if (!this._focused) {
+        if (!this._focused && !this._dataValue) {
             this.showMask(this._dataValue);
         }
     }