Merge branch 'master' into bpenkov/adv-filtering-open-pickers-on-enter

Author: Lipata

package-lock.json

@@ -83,7 +83,7 @@
     "@angular/compiler-cli": "^11.2.5",
     "@angular/language-service": "^11.2.5",
     "@angularclass/hmr": "^2.1.3",
-    "@types/jasmine": "^3.3.16",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.20.0",
     "@types/webpack-env": "^1.15.2",
@@ -109,8 +109,8 @@
     "hammer-simulator": "0.0.1",
     "igniteui-sassdoc-theme": "^1.1.4",
     "igniteui-typedoc-theme": "^2.0.9",
-    "jasmine": "~3.5.0",
-    "jasmine-core": "~3.5.0",
+    "jasmine": "~3.6.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.2",
     "karma": "^5.2.3",
     "karma-chrome-launcher": "~3.1.0",

package.json

@@ -166,7 +166,13 @@ ${noteText}
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html', `
 <igx-tabs type="fixed">
-<igx-tab-item label="Tab1" icon="folder" routerLink="view1" [isSelected]="true" class="tabitem">
+<igx-tab-item routerLink="view1" [isSelected]="true" label="Tab1" icon="home" class="tabitem">
+<ng-template igxTab>
+<div class="horizontal-center">
+<igx-icon>playlist_add_check</igx-icon>
+<div class="igx-tabs__item-label" i18n>Strategies</div>
+</div>
+</ng-template>
 </igx-tab-item>
 </igx-tabs>`);
         const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -178,8 +184,10 @@ ${noteText}
 <igx-tabs tabAlignment="justify">
 <igx-tab-item [selected]="true">
 <igx-tab-header routerLink="view1" class="tabitem">
-<igx-icon igxTabHeaderIcon>folder</igx-icon>
-<span igxTabHeaderLabel>Tab1</span>
+<div class="horizontal-center">
+<igx-icon>playlist_add_check</igx-icon>
+<div class="igx-tabs__item-label" i18n>Strategies</div>
+</div>
 </igx-tab-header>
 </igx-tab-item>
 </igx-tabs>`);
@@ -302,7 +310,10 @@ Some Content
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html', `
 <igx-bottom-nav>
-<igx-tab label="Tab1" icon="folder" routerLink="view1" class="igxtab">
+<igx-tab label="Tab1" icon="folder" routerLink="view1" class="igxtab" label="Tab1" icon="home">
+<ng-template igxTab>
+<div>Tab1</div>
+</ng-template>
 </igx-tab>
 </igx-bottom-nav>`);
         const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -314,8 +325,7 @@ ${noteText}
 <igx-bottom-nav>
 <igx-bottom-nav-item>
 <igx-bottom-nav-header routerLink="view1" class="igxtab">
-<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
-<span igxBottomNavHeaderLabel>Tab1</span>
+<div>Tab1</div>
 </igx-bottom-nav-header>
 </igx-bottom-nav-item>
 </igx-bottom-nav>`);

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -10,6 +10,9 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
         `Applying migration for Ignite UI for Angular to version ${version}`
     );
 
+    // eslint-disable-next-line max-len
+    const UPDATE_NOTE = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
+
     const COMPONENTS = [
         {
             component: 'igx-bottom-nav',
@@ -129,7 +132,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     let labelText = '';
                     if (hasAttribute(node, 'label')) {
                         const labelAttr = getAttribute(node, 'label')[0];
-                        labelText = `\n<span ${comp.labelDirective}>${labelAttr.value}</span>\n`;
+                        labelText = `\n<span ${comp.labelDirective}>${labelAttr.value}</span>`;
                     }
                     // Icon content
                     let iconText = '';
@@ -151,9 +154,17 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     }
 
                     if (iconText || labelText || routerLinkText) {
-                        // eslint-disable-next-line max-len
-                        const tabHeader = `\n<${comp.headerItem}${routerLinkText}${classText}>${iconText}${labelText}</${comp.headerItem}>`;
-                        addChange(file.url, new FileChange(startTag.end, tabHeader));
+                        // Get igx-tab-header if it's present
+                        const headerNode = findElementNodes([offset.node], comp.headerItem)
+                            .map(hNode => getSourceOffset(hNode as Element));
+
+                        if (headerNode && headerNode.length > 0) {
+                            addChange(file.url, new FileChange(headerNode[0].startTag.end - 1, `${routerLinkText}${classText}`));
+                        } else {
+                            // eslint-disable-next-line max-len
+                            const tabHeader = `\n<${comp.headerItem}${routerLinkText}${classText}>${iconText}${labelText}\n</${comp.headerItem}>`;
+                            addChange(file.url, new FileChange(startTag.end, tabHeader));
+                        }
                     }
                 });
 
@@ -179,7 +190,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                         const tabContentTag = new RegExp(String.raw`${comp.panelItem}`);
                         const hasTabContent = content.match(tabContentTag);
 
-                        if ((!hasTabContent || hasTabContent.length === 0) && !isEmptyOrSpaces(content)) {
+                        if (!hasTabContent && !isEmptyOrSpaces(content)) {
                             const tabPanel = `\n<${comp.panelItem}${classAttrText}>${content}</${comp.panelItem}>\n`;
                             addChange(offset.file.url, new FileChange(tabHeader.sourceSpan.end.offset, tabPanel, content, 'replace'));
                         }
@@ -195,8 +206,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     map(node => getSourceOffset(node as Element)).
                     forEach(offset => {
                         const { startTag, file } = offset;
-                        // eslint-disable-next-line max-len
-                        const commentText = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
+                        const commentText = UPDATE_NOTE;
                         addChange(file.url, new FileChange(startTag.start, commentText));
                     });
 

projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -1,16 +1,22 @@
-import { ElementRef, EventEmitter, Inject, LOCALE_ID, Optional, Input, Directive, Output } from '@angular/core';
+import {
+    AfterViewInit, ContentChildren, Directive, ElementRef, EventEmitter,
+    Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList
+} from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { EditorProvider } from '../core/edit-provider';
-import { PickerInteractionMode } from './types';
 import { IToggleView } from '../core/navigation';
 import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { DateRange } from '../date-range-picker/public_api';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
 import { OverlaySettings } from '../services/overlay/utilities';
+import { IgxPickerToggleComponent } from './picker-icons.common';
+import { PickerInteractionMode } from './types';
 
 @Directive()
-export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider {
+export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider, AfterViewInit, OnDestroy {
     /**
      * The editor's input mask.
      *
@@ -193,6 +199,10 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
     @Output()
     public closed = new EventEmitter<IBaseEventArgs>();
 
+    /** @hidden @internal */
+    @ContentChildren(IgxPickerToggleComponent, { descendants: true })
+    public toggleComponents: QueryList<IgxPickerToggleComponent>;
+
     protected _collapsed = true;
     protected _type: IgxInputGroupType;
     protected _minValue: Date | string;
@@ -215,6 +225,8 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
         return this.mode === PickerInteractionMode.DropDown;
     }
 
+    protected _destroy$ = new Subject();
+
     public abstract valueChange: EventEmitter<string | Date | DateRange | null>;
 
     constructor(public element: ElementRef,
@@ -225,6 +237,28 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
         this.locale = this.locale || this._localeId;
     }
 
+    /** @hidden @internal */
+    public ngAfterViewInit(): void {
+        this.subToIconsClicked(this.toggleComponents, () => this.open());
+        this.toggleComponents.changes.pipe(takeUntil(this._destroy$))
+            .subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));
+    }
+
+    /** @hidden @internal */
+    public ngOnDestroy(): void {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+
+    /** Subscribes to the click events of toggle/clear icons in a query */
+    protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any) {
+        components.forEach(toggle => {
+            toggle.clicked
+                .pipe(takeUntil(merge(components.changes, this._destroy$)))
+                .subscribe(next);
+        });
+    };
+
     public abstract select(value: Date | DateRange | string): void;
     public abstract open(settings?: OverlaySettings): void;
     public abstract toggle(settings?: OverlaySettings): void;