diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html index 163577e82..4307e4ecc 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html @@ -30,6 +30,11 @@ Text to be placed above the slider. + + defaultValue: string + + Initial value of the slider, only when it is uncontrolled. + helperText: string diff --git a/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json b/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json index 64abfceb4..4555402a4 100644 --- a/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json +++ b/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json @@ -1,61 +1,47 @@ { - "data": [ - { - "title": "Uncontrolled Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider", - "title": "uncontrolled-slider" - }, - "visibility": true - }, - { - "title": "Continuous Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider", - "title": "continuous-slider" - } - }, - { - "title": "Slider with input", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput", - "title": "slider-with-input" - } - }, - { - "title": "Controlled Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider", - "title": "controlled-slider" - } - }, - { - "title": "Sized Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/sized-slider/sized-slider.component.html&initialpath=sizedSlider", - "title": "sized-slider" - } - }, - { - "title": "Slider without limit values", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-no-limit-values/slider-no-limit-values.component.html&initialpath=sliderNoLimitValues", - "title": "slider-without-limits" - } - }, - { - "title": "Disabled Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/disabled-slider/disabled-slider.component.html&initialpath=disabledSlider", - "title": "disabled-slider" - } - }, - { - "title": "Discrete Slider", - "iframe": { - "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider", - "title": "discrete-slider" - } - } - ] + "data": [ + { + "title": "Uncontrolled Slider", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider", + "title": "uncontrolled-slider" + }, + "visibility": true + }, + { + "title": "Continuous Slider", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider", + "title": "continuous-slider" + } + }, + { + "title": "Slider with input", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput", + "title": "slider-with-input" + } + }, + { + "title": "Controlled Slider", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider", + "title": "controlled-slider" + } + }, + { + "title": "Slider without limit values", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-no-limit-values/slider-no-limit-values.component.html&initialpath=sliderNoLimitValues", + "title": "slider-without-limits" + } + }, + { + "title": "Discrete Slider", + "iframe": { + "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider", + "title": "discrete-slider" + } + } + ] } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts index bca124f6d..a7493cd44 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts @@ -43,6 +43,30 @@ describe("DxcSlider tests", () => { expect(onChangeFunction).toHaveBeenCalledWith(value); }); + test("Uncontrolled dxc-slider with default value", async () => { + const onChangeFunction = jest.fn(); + const value = 22; + TestBed.overrideComponent(DxcSliderComponent, { + set: { selector: "slider" }, + }); + const slider = await render(DxcSliderComponent, { + componentProperties: { + showLimitsValues: true, + onChange: { emit: onChangeFunction } as any, + showInput: true, + defaultValue: 10, + }, + imports: [MatSliderModule, DxcTextInputModule], + }); + const input = slider.getByRole("textbox"); + expect(input.value).toBe("10"); + input.focus(); + fireEvent.click(input); + fireEvent.input(input, { target: { value: value } }); + expect(onChangeFunction).toHaveBeenCalledWith(value); + expect(input.value).toBe("22"); + }); + test("Controlled dxc-slider", async () => { const onChangeFunction = jest.fn(); const value = 22; diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts index 694b07801..5338a10f5 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts @@ -76,6 +76,10 @@ export class DxcSliderComponent implements OnInit, OnChanges { * Text to be placed above the slider. */ @Input() label: string; + /** + * Initial value of the slider, only when it is uncontrolled. + */ + @Input() defaultValue?: number; /** * Helper text to be placed above the slider. */ @@ -184,6 +188,7 @@ export class DxcSliderComponent implements OnInit, OnChanges { } ngOnInit() { + this.value = this.defaultValue ?? this.value; this.renderedValue = this.value; if (this.labelFormatCallback) { diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts index 38333569a..cd23ada26 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts @@ -8,6 +8,7 @@ export interface SliderProperties { showInput?: boolean; value?: number; name?: string; + defaultValue?: number; label?: string; helperText?: string; disabled?: boolean;