From 0533ce705b40350cf99e7f3b2b8d81cab6073767 Mon Sep 17 00:00:00 2001 From: rkkp1023 Date: Fri, 15 Nov 2024 12:03:43 +0530 Subject: [PATCH 1/9] fix: added minDate and maxDate in the datepicker --- src/datepicker/datepicker.component.ts | 12 ++++++++++++ src/datepicker/datepicker.stories.ts | 10 ++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 2e53e3e306..35e667eb32 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -226,6 +226,16 @@ export class DatePicker implements @Input() plugins = []; + /** + * The minimum date that a user can start picking from. + */ + @Input() minDate: string | number; + + /** + * The maximum date that a user can pick to. + */ + @Input() maxDate: string | number; + @Input() set flatpickrOptions(options: Partial) { this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options); @@ -240,6 +250,8 @@ export class DatePicker implements plugins, dateFormat: this.dateFormat, locale: languages.default?.default[this.language] || languages.default[this.language], + maxDate: this.maxDate, + minDate: this.minDate, // Little trick force "readonly mode" on datepicker input. // Docs: Whether clicking on the input should open the picker. // You could disable this if you wish to open the calendar manually with.open(). diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index 969921fb4f..9ffcedde91 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -131,6 +131,8 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeInvalid]="invalid" [rangeInvalidText]="invalidText" + [minDate]="minDate" + [maxDate]="maxDate" [dateFormat]="dateFormat" [value]="value" (valueChange)="valueChange($event)" @@ -153,6 +155,8 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeWarn]="warn" [rangeWarnText]="warnText" + [minDate]="minDate" + [maxDate]="maxDate" [dateFormat]="dateFormat" (valueChange)="valueChange($event)" [helperText]="helperText"> @@ -162,8 +166,10 @@ 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", + minDate: "01/11/24", + maxDate: "30/11/24" }; Range.argTypes = { language: { From 384472fc68048cb662c142532a8e5b99fdbd4b01 Mon Sep 17 00:00:00 2001 From: rkkp1023 Date: Wed, 20 Nov 2024 10:06:37 +0530 Subject: [PATCH 2/9] chore: address review comments --- src/datepicker/datepicker.component.ts | 14 +------------- src/datepicker/datepicker.stories.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 35e667eb32..c1a86fda71 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -225,17 +225,7 @@ export class DatePicker implements @Input() skeleton = false; @Input() plugins = []; - - /** - * The minimum date that a user can start picking from. - */ - @Input() minDate: string | number; - - /** - * The maximum date that a user can pick to. - */ - @Input() maxDate: string | number; - + @Input() set flatpickrOptions(options: Partial) { this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options); @@ -250,8 +240,6 @@ export class DatePicker implements plugins, dateFormat: this.dateFormat, locale: languages.default?.default[this.language] || languages.default[this.language], - maxDate: this.maxDate, - minDate: this.minDate, // Little trick force "readonly mode" on datepicker input. // Docs: Whether clicking on the input should open the picker. // You could disable this if you wish to open the calendar manually with.open(). diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index 9ffcedde91..f8455d9ba8 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -134,6 +134,7 @@ const RangeTemplate = (args) => ({ [minDate]="minDate" [maxDate]="maxDate" [dateFormat]="dateFormat" + [flatpickrOptions]="flatpickrOptions" [value]="value" (valueChange)="valueChange($event)" [helperText]="helperText"> @@ -158,6 +159,7 @@ const RangeTemplate = (args) => ({ [minDate]="minDate" [maxDate]="maxDate" [dateFormat]="dateFormat" + [flatpickrOptions]="flatpickrOptions" (valueChange)="valueChange($event)" [helperText]="helperText"> @@ -168,8 +170,10 @@ Range.args = { dateFormat: "d/m/Y", value: ["02/11/24", "08/11/24"], language: "en", - minDate: "01/11/24", - maxDate: "30/11/24" + flatpickrOptions: { + minDate: new Date("11/01/24"), + maxDate: new Date("11/30/24"), + } }; Range.argTypes = { language: { From 4f70d24db7a6fe0fb25c8a21fe821255e0ac9a15 Mon Sep 17 00:00:00 2001 From: rkkp1023 Date: Wed, 20 Nov 2024 10:19:18 +0530 Subject: [PATCH 3/9] chore: fix formating --- src/datepicker/datepicker.stories.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index f8455d9ba8..b40a3fa1c6 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -131,8 +131,6 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeInvalid]="invalid" [rangeInvalidText]="invalidText" - [minDate]="minDate" - [maxDate]="maxDate" [dateFormat]="dateFormat" [flatpickrOptions]="flatpickrOptions" [value]="value" @@ -156,8 +154,6 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeWarn]="warn" [rangeWarnText]="warnText" - [minDate]="minDate" - [maxDate]="maxDate" [dateFormat]="dateFormat" [flatpickrOptions]="flatpickrOptions" (valueChange)="valueChange($event)" From 1a4b698182e1529a4ea0aa7a42c2661ab4feae45 Mon Sep 17 00:00:00 2001 From: Koen Van Durme Date: Mon, 25 Nov 2024 12:28:28 +0100 Subject: [PATCH 4/9] Properly handle null in writeValue when in multiselect mode and itemValueKey is defined --- src/combobox/combobox.component.spec.ts | 39 ++++++++++++++++++++----- src/combobox/combobox.component.ts | 2 +- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/combobox/combobox.component.spec.ts b/src/combobox/combobox.component.spec.ts index 20703a0169..feef065459 100644 --- a/src/combobox/combobox.component.spec.ts +++ b/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"> ` }) 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']); + }); }); diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts index 8d079e158a..9291ac604b 100644 --- a/src/combobox/combobox.component.ts +++ b/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 })); From 5f92ef0b9627f6d9a6cdb5b888bab3035f12c4f0 Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Mon, 25 Nov 2024 10:00:05 -0500 Subject: [PATCH 5/9] Update src/datepicker/datepicker.component.ts --- src/datepicker/datepicker.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index c1a86fda71..717066537d 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -225,7 +225,6 @@ export class DatePicker implements @Input() skeleton = false; @Input() plugins = []; - @Input() set flatpickrOptions(options: Partial) { this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options); From 42526bc671b50fc02f3e1c842d9d9dd0c2a6a1bf Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Mon, 25 Nov 2024 10:01:02 -0500 Subject: [PATCH 6/9] chore: lint fix --- src/datepicker/datepicker.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 717066537d..2e53e3e306 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -225,6 +225,7 @@ export class DatePicker implements @Input() skeleton = false; @Input() plugins = []; + @Input() set flatpickrOptions(options: Partial) { this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options); From 8165d6bf7970a144f65b3244b5e1a76d6095c06a Mon Sep 17 00:00:00 2001 From: = Date: Thu, 28 Nov 2024 09:28:17 +0100 Subject: [PATCH 7/9] fix 3075 pagination select icon --- src/pagination/pagination.component.spec.ts | 18 ++++++++++++++++++ src/pagination/pagination.component.ts | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/pagination/pagination.component.spec.ts b/src/pagination/pagination.component.spec.ts index c683fa256a..c9f9c07645 100644 --- a/src/pagination/pagination.component.spec.ts +++ b/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); + + }); }); diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts index 0308baa8cc..4d16fbe4c2 100644 --- a/src/pagination/pagination.component.ts +++ b/src/pagination/pagination.component.ts @@ -137,7 +137,7 @@ export interface PaginationTranslations { Date: Sat, 30 Nov 2024 04:31:24 +0530 Subject: [PATCH 8/9] fix: ensure proper namespace for title attr --- src/icon/icon.directive.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/icon/icon.directive.ts b/src/icon/icon.directive.ts index d912742020..57ae41eb9a 100644 --- a/src/icon/icon.directive.ts +++ b/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, @@ -110,7 +111,7 @@ export class IconDirective implements AfterViewInit, OnChanges { } if (attributes["title"]) { - const title = document.createElement("title"); + const title = document.createElementNS(xmlns, "title"); title.textContent = attributes.title; IconDirective.titleIdCounter++; title.setAttribute("id", `${icon.name}-title-${IconDirective.titleIdCounter}`); From 5c03216d438e845f78f79f72fabecc76d688a1ed Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Fri, 29 Nov 2024 19:00:56 -0500 Subject: [PATCH 9/9] chore: lint fix (#3080) Signed-off-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com> --- src/combobox/combobox.component.spec.ts | 4 ++-- src/combobox/combobox.component.ts | 12 ++++++------ src/datepicker/datepicker.stories.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/combobox/combobox.component.spec.ts b/src/combobox/combobox.component.spec.ts index feef065459..9203d24054 100644 --- a/src/combobox/combobox.component.spec.ts +++ b/src/combobox/combobox.component.spec.ts @@ -33,7 +33,7 @@ class ComboboxTest { {id: "2", content: "two", selected: false}, {id: "3", content: "three", selected: false} ]; - type = 'single'; + type = "single"; itemValueKey = undefined; model: ListItem; } @@ -207,6 +207,6 @@ describe("Combo box", () => { dropdownOption.click(); fixture.detectChanges(); - expect(wrapper.model).toEqual(['1']); + expect(wrapper.model).toEqual(["1"]); }); }); diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts index 9291ac604b..11202d96cc 100644 --- a/src/combobox/combobox.component.ts +++ b/src/combobox/combobox.component.ts @@ -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); diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index b40a3fa1c6..265a7cee63 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -168,7 +168,7 @@ Range.args = { language: "en", flatpickrOptions: { minDate: new Date("11/01/24"), - maxDate: new Date("11/30/24"), + maxDate: new Date("11/30/24") } }; Range.argTypes = {