Merge pull request #3081 from carbon-design-system/m-to-next

Merging branch master into next

src/combobox/combobox.component.spec.ts

@@ -21,16 +21,20 @@ import { PlaceholderModule } from "./../placeholder/index";
 		placeholder="placeholder"
 		label="label"
 		[items]="items"
-		[(ngModel)]="model">
+		[(ngModel)]="model"
+		[type]="type"
+		[itemValueKey]="itemValueKey">
 		<cds-dropdown-list></cds-dropdown-list>
 	</cds-combo-box>`
 })
 class ComboboxTest {
 	items = [
-		{content: "one", selected: false},
-		{content: "two", selected: false},
-		{content: "three", selected: false}
+		{id: "1", content: "one", selected: false},
+		{id: "2", content: "two", selected: false},
+		{id: "3", content: "three", selected: false}
 	];
+	type = "single";
+	itemValueKey = undefined;
 	model: ListItem;
 }
 
@@ -76,6 +80,7 @@ describe("Combo box", () => {
 		fixture.detectChanges();
 
 		expect(element.nativeElement.querySelector("input").value).toBe("one");
+		expect(wrapper.model.id).toBe("1");
 		expect(wrapper.model.content).toBe("one");
 		expect(wrapper.model.selected).toBe(true);
 
@@ -173,9 +178,9 @@ describe("Combo box", () => {
 		textInput.dispatchEvent(new Event("input"));
 
 		wrapper.items = [
-			{content: "four", selected: false},
-			{content: "five", selected: false},
-			{content: "six", selected: false}
+			{id: "4", content: "four", selected: false},
+			{id: "5", content: "five", selected: false},
+			{id: "6", content: "six", selected: false}
 		];
 
 		fixture.detectChanges();
@@ -184,4 +189,24 @@ describe("Combo box", () => {
 
 		expect(itemEls.length).toEqual(2);
 	});
+
+	it("should update model by itemValueKey when specified", () => {
+		fixture = TestBed.createComponent(ComboboxTest);
+		wrapper = fixture.componentInstance;
+		wrapper.type = "multi";
+		wrapper.itemValueKey = "id";
+		fixture.detectChanges();
+
+		element = fixture.debugElement.query(By.css("cds-combo-box"));
+
+		const dropdownToggle = element.nativeElement.querySelector(".cds--list-box__field");
+		dropdownToggle.click();
+		fixture.detectChanges();
+
+		const dropdownOption = element.nativeElement.querySelector(".cds--list-box__menu-item");
+		dropdownOption.click();
+		fixture.detectChanges();
+
+		expect(wrapper.model).toEqual(["1"]);
+	});
 });

src/combobox/combobox.component.ts

@@ -638,7 +638,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 				// clone the items and update their state based on the received value array
 				// this way we don't lose any additional metadata that may be passed in via the `items` Input
 				let newValues = [];
-				for (const v of value) {
+				for (const v of value ?? []) {
 					for (const item of this.view.getListItems()) {
 						if (item[this.itemValueKey] === v) {
 							newValues.push(Object.assign({}, item, { selected: true }));
@@ -696,12 +696,12 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		const selected = this.view.getSelected();
 
 		// 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);
-        }
+		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);

src/datepicker/datepicker.stories.ts

@@ -132,6 +132,7 @@ const RangeTemplate = (args) => ({
 			[rangeInvalid]="invalid"
 			[rangeInvalidText]="invalidText"
 			[dateFormat]="dateFormat"
+			[flatpickrOptions]="flatpickrOptions"
 			[value]="value"
 			(valueChange)="valueChange($event)"
 			[helperText]="helperText">
@@ -154,6 +155,7 @@ const RangeTemplate = (args) => ({
 			[rangeWarn]="warn"
 			[rangeWarnText]="warnText"
 			[dateFormat]="dateFormat"
+			[flatpickrOptions]="flatpickrOptions"
 			(valueChange)="valueChange($event)"
 			[helperText]="helperText">
 		</cds-date-picker>
@@ -162,8 +164,12 @@ const RangeTemplate = (args) => ({
 export const Range = RangeTemplate.bind({});
 Range.args = {
 	dateFormat: "d/m/Y",
-	value: ["01/02/24", "08/02/24"],
-	language: "en"
+	value: ["02/11/24", "08/11/24"],
+	language: "en",
+	flatpickrOptions: {
+		minDate: new Date("11/01/24"),
+		maxDate: new Date("11/30/24")
+	}
 };
 Range.argTypes = {
 	language: {

src/icon/icon.directive.ts

@@ -81,7 +81,8 @@ export class IconDirective implements AfterViewInit, OnChanges {
 		}
 
 		const svg = root.tagName.toUpperCase() !== "SVG" ? svgElement : root;
-		svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+		const xmlns = "http://www.w3.org/2000/svg";
+		svg.setAttribute("xmlns", xmlns);
 
 		const attributes = getAttributes({
 			width: icon.attrs.width,

src/pagination/pagination.component.spec.ts

@@ -174,4 +174,22 @@ describe("Pagination", () => {
 		fixture.detectChanges();
 		expect(wrapper.pageOptions).toEqual(Array(1));
 	});
+
+	it("should replace the select with a number input when the pagination threshold is reached", () => {
+		const fixture = TestBed.createComponent(PaginationTest);
+		const wrapper = fixture.componentInstance;
+		fixture.detectChanges();
+		element = fixture.debugElement.query(By.css("cds-pagination"));
+
+		element.componentInstance.pageSelectThreshold = 500;
+		fixture.detectChanges();
+		expect(element.nativeElement.querySelector(".cds--select__page-number input")).toBe(null);
+		expect(element.nativeElement.querySelector(".cds--select__page-number select")).toBeDefined();
+
+		element.componentInstance.pageSelectThreshold = 2;
+		fixture.detectChanges();
+		expect(element.nativeElement.querySelector(".cds--select__page-number input")).toBeDefined();
+		expect(element.nativeElement.querySelector(".cds--select__page-number select")).toBe(null);
+
+	});
 });

src/pagination/pagination.component.ts

@@ -137,7 +137,7 @@ export interface PaginationTranslations {
 						<option *ngFor="let page of pageOptions; let i = index;" class="cds--select-option" [value]="i + 1">{{i + 1}}</option>
 					</select>
 					<svg
-						*ngIf="pageOptions.length <= 1000"
+						*ngIf="pageOptions.length <= pageSelectThreshold"
 						cdsIcon="chevron--down"
 						size="16"
 						style="display: inherit;"