Merge branch 'master' into next

Merge branch 'master' into next

Author: Akshat55

README.md

@@ -44,7 +44,7 @@ That's it! Now we can run `npm start` and start building out our application!
 
 > *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` scss is our recommended setup.
 
-[![Edit Carbon Components Angular](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0129r494ql)
+[![Edit Carbon Components Angular](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/stackblitz-starters-exxkq4?file=src%2Fmain.ts)
 
 ### Support
 

package-lock.json

@@ -82,7 +82,7 @@
     "@angular/platform-browser-dynamic": "18.2.12",
     "@angular/router": "18.2.12",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.67.0",
+    "@carbon/styles": "1.70.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
     "@compodoc/compodoc": "1.1.26",

package.json

@@ -27,7 +27,7 @@ import { ButtonSize, ButtonType } from "./button.types";
 	<cds-tooltip
 		class="cds--icon-tooltip"
 		[description]="description"
-		[disabled]="disabled"
+		[disabled]="showTooltipWhenDisabled ? false : disabled"
 		[caret]="caret"
 		[dropShadow]="dropShadow"
 		[highContrast]="highContrast"
@@ -123,6 +123,10 @@ export class IconButton extends BaseIconButton implements AfterViewInit {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Indicates whether the tooltip should be shown when the button is disabled
+	 */
+	@Input() showTooltipWhenDisabled = false;
 
 	/**
 	 * Common button events

src/button/icon-button.component.ts

@@ -23,7 +23,8 @@ export default {
 		size: "md",
 		isExpressive: "false",
 		disabled: false,
-		autoAlign: false
+		autoAlign: false,
+		showTooltipWhenDisabled: false
 	},
 	argTypes: {
 		align: {
@@ -54,6 +55,9 @@ export default {
 		disabled: {
 			type: "boolean"
 		},
+		showTooltipWhenDisabled: {
+			type: "boolean"
+		},
 		// Actions
 		onClick: { action: "clicked" },
 		onMouseEnter: { action: "mouseenter" },
@@ -79,6 +83,7 @@ const Template = (args) => ({
 			[buttonNgClass]="buttonNgClass"
 			[buttonAttributes]="buttonAttributes"
 			[disabled]="disabled"
+			[showTooltipWhenDisabled]="showTooltipWhenDisabled"
 			description="Icon Description"
 			(click)="onClick($event)"
 			(mouseenter)="onMouseEnter($event)"
@@ -115,6 +120,7 @@ const AutoAlignTemplate = (args) => ({
 					[isOpen]="isOpen"
 					[buttonNgClass]="buttonNgClass"
 					[disabled]="disabled"
+					[showTooltipWhenDisabled]="showTooltipWhenDisabled"
 					[description]="description"
 					(click)="onClick($event)"
 					(mouseenter)="onMouseEnter($event)"
@@ -134,3 +140,4 @@ WithAutoAlign.args = {
 	align: "top",
 	isOpen: true
 };
+

src/button/icon-button.stories.ts

@@ -40,7 +40,13 @@ import { Observable } from "rxjs";
 @Component({
 	selector: "cds-combo-box, ibm-combo-box",
 	template: `
-		<div class="cds--list-box__wrapper">
+		<div
+			class="cds--list-box__wrapper"
+			[ngClass]="{
+				'cds--list-box__wrapper--fluid': fluid,
+				'cds--list-box__wrapper--fluid--invalid': fluid && invalid,
+				'cds--list-box__wrapper--fluid--focus': fluid && _isFocused
+			}">
 			<label
 				*ngIf="label"
 				[for]="id"
@@ -64,7 +70,8 @@ import { Observable } from "rxjs";
 					'cds--list-box--lg': size === 'lg',
 					'cds--list-box--disabled': disabled,
 					'cds--combo-box--readonly': readonly,
-					'cds--combo-box--warning cds--list-box--warning': warn
+					'cds--combo-box--warning cds--list-box--warning': warn,
+					'cds--list-box--invalid': invalid
 				}"
 				class="cds--list-box cds--combo-box"
 				[attr.data-invalid]="(invalid ? true : null)">
@@ -109,7 +116,8 @@ import { Observable } from "rxjs";
 						[disabled]="disabled"
 						[readOnly]="readonly"
 						(input)="onSearch($event.target.value)"
-						(blur)="onBlur()"
+						(focus)="fluid ? handleFocus($event) : null"
+						(blur)="fluid ? handleFocus($event) : onBlur()"
 						(keydown.enter)="onSubmit($event)"
 						[value]="selectedValue"
 						class="cds--text-input"
@@ -166,8 +174,9 @@ import { Observable } from "rxjs";
 					<ng-content *ngIf="open"></ng-content>
 				</div>
 			</div>
+			<hr *ngIf="fluid" class="cds--list-box__divider" />
 			<div
-				*ngIf="helperText && !invalid && !warn"
+				*ngIf="helperText && !invalid && !warn && !fluid"
 				class="cds--form__helper-text"
 				[ngClass]="{'cds--form__helper-text--disabled': disabled}">
 				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
@@ -368,6 +377,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	 * Set to `true` for readonly state.
 	 */
 	@Input() readonly = false;
+	/**
+	 * Experimental: enable fluid state
+	 */
+	@Input() fluid = false;
 	/**
 	 * Emits a ListItem
 	 *
@@ -426,7 +439,6 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	@ViewChild("input", { static: true }) input: ElementRef;
 	@ViewChild("listbox", { static: true }) listbox: ElementRef;
 	@HostBinding("class.cds--list-box__wrapper") hostClass = true;
-	@HostBinding("style.display") display = "block";
 
 	public open = false;
 
@@ -456,6 +468,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	protected _clearSelectionTitle = this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED");
 	protected _clearSelectionAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED");
 
+	protected _isFocused = false;
+
 	/**
 	 * Creates an instance of ComboBox.
 	 */
@@ -680,7 +694,15 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		// clearSelected can only fire on type=multi
 		// so we just emit getSelected() (just in case there's any disabled but selected items)
 		const selected = this.view.getSelected();
-		this.propagateChangeCallback(selected);
+
+		// in case there are disabled items they should be mapped according to itemValueKey
+        if (this.itemValueKey && selected) {
+            const values = selected.map((item) => item[this.itemValueKey]);
+            this.propagateChangeCallback(values);
+        } else {
+            this.propagateChangeCallback(selected);
+        }
+
 		this.selected.emit(selected as any);
 		this.clear.emit(event);
 	}
@@ -877,6 +899,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		}
 	}
 
+	handleFocus(event: FocusEvent) {
+		this._isFocused = event.type === "focus";
+	}
+
 	protected updateSelected() {
 		const selected = this.view.getSelected();
 		if (this.type === "multi") {

src/combobox/combobox.component.ts

@@ -72,7 +72,8 @@ export default {
 		dropUp: false,
 		selectionFeedback: "top-after-reopen",
 		size: "md",
-		theme: "dark"
+		theme: "dark",
+		fluid: false
 	},
 	argTypes: {
 		size: {
@@ -119,6 +120,7 @@ const Template = (args) => ({
 			[items]="items"
 			[theme]="theme"
 			[dropUp]="dropUp"
+			[fluid]="fluid"
 			(selected)="selected($event)"
 			(submit)="submit($event)"
 			(search)="search($event)"
@@ -176,6 +178,10 @@ Dynamic.parameters = {
 	}
 };
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+	fluid: true
+};
 
 const MultiTemplate = (args) => ({
 	props: args,
@@ -196,6 +202,7 @@ const MultiTemplate = (args) => ({
 			[selectionFeedback]="selectionFeedback"
 			[dropUp]="dropUp"
 			[appendInline]="appendInline"
+			[fluid]="fluid"
 			type="multi"
 			(selected)="selected($event)"
 			(submit)="submit($event)"