Merge branch 'next' of https://github.com/carbon-design-system/carbon-components-angular

Author: Akshat55

README.md

@@ -15,6 +15,9 @@
 		</a>
     <a href="https://bestpractices.coreinfrastructure.org/projects/5887">
       <img src="https://bestpractices.coreinfrastructure.org/projects/5887/badge">
+    </a>
+    <a href="https://discord.gg/J7JEUEkTRX">
+      <img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord">
     </a>
 	</p>
 </p>

integration/ng13/package-lock.json

@@ -145,6 +145,14 @@ assets:
         name: Storybook
         action: link
         url: https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple
+  definition-tooltip:
+    status: stable
+    framework: angular
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition
   dialogs:
     externalDocsUrl: https://carbondesignsystem.com/patterns/dialog-pattern
     status: stable
@@ -467,14 +475,6 @@ assets:
         name: Storybook
         action: link
         url: https://angular.carbondesignsystem.com/?path=/story/components-toggle
-  tooltip-definition:
-    status: stable
-    framework: angular
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition
   tooltip-icon:
     name: Tooltip icon
     status: stable

integration/ng14/package-lock.json

@@ -394,10 +394,12 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 			selected: boolean
 		}
 	}>();
-	/** emits an empty event when the menu is closed */
+	/** Emits an empty event when the menu is closed */
 	@Output() close = new EventEmitter<void>();
-	/** emits the search string from the input */
+	/** Emits the search string from the input */
 	@Output() search = new EventEmitter<string>();
+	/** Emits an event when the clear button is clicked. */
+	@Output() clear = new EventEmitter();
 	/** ContentChild reference to the instantiated dropdown list */
 	@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;
 	@ViewChild("dropdownMenu") dropdownMenu;
@@ -669,6 +671,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		const selected = this.view.getSelected();
 		this.propagateChangeCallback(selected);
 		this.selected.emit(selected as any);
+		this.clear.emit();
 	}
 
 	/**

integration/ng15/package-lock.json

@@ -47,6 +47,24 @@ export default {
 			},
 			{
 				content: "four"
+			},
+			{
+				content: "five"
+			},
+			{
+				content: "six"
+			},
+			{
+				content: "seven"
+			},
+			{
+				content: "eight"
+			},
+			{
+				content: "nine"
+			},
+			{
+				content: "ten"
 			}
 		],
 		appendInline: false,

src/carbon.yml

@@ -155,7 +155,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 		if (changes.isOpen) {
 			if (changes.isOpen.currentValue) {
 				this.open();
-			} else {
+			} else if (!changes.isOpen.firstChange) {
 				this.close({
 					reason: CloseReasons.programmatic
 				});

src/combobox/combobox.component.ts

@@ -502,13 +502,13 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			event.preventDefault();
 			if (event.key === "ArrowDown") {
 				if (this.hasNextElement()) {
-					this.getNextElement();
+					this.getNextElement().scrollIntoView({block: "end"});
 				} else {
 					this.blurIntent.emit("bottom");
 				}
 			} else if (event.key === "ArrowUp") {
 				if (this.hasPrevElement()) {
-					this.getPrevElement();
+					this.getPrevElement().scrollIntoView();
 				} else {
 					this.blurIntent.emit("top");
 				}

src/combobox/combobox.stories.ts

@@ -7,7 +7,8 @@ import {
 	TemplateRef,
 	ViewChild,
 	ContentChild,
-	AfterContentInit
+	AfterContentInit,
+	ChangeDetectorRef
 } from "@angular/core";
 
 import { TextArea } from "./text-area.directive";
@@ -145,6 +146,11 @@ export class Label implements AfterContentInit, AfterViewInit {
 
 	@HostBinding("class.cds--form-item") labelClass = true;
 
+	/**
+	 * Creates an instance of Label.
+	 */
+	constructor(protected changeDetectorRef: ChangeDetectorRef) {}
+
 	/**
 	 * Update wrapper class if a textarea is hosted.
 	 */
@@ -165,6 +171,7 @@ export class Label implements AfterContentInit, AfterViewInit {
 				// avoid overriding ids already set by the user reuse it instead
 				if (inputElement.id) {
 					this.labelInputID = inputElement.id;
+					this.changeDetectorRef.detectChanges();
 				}
 				inputElement.setAttribute("id", this.labelInputID);
 				return;
@@ -174,6 +181,7 @@ export class Label implements AfterContentInit, AfterViewInit {
 			if (divElement) {
 				if (divElement.id) {
 					this.labelInputID = divElement.id;
+					this.changeDetectorRef.detectChanges();
 				}
 				divElement.setAttribute("id", this.labelInputID);
 			}