diff --git a/package-lock.json b/package-lock.json index 87e79a2590..528ea63e9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,7 +45,6 @@ "@types/karma": "^6.3.8", "@types/lodash-es": "^4.17.4", "@types/node": "^18.19.4", - "@types/nouislider": "^15.0.0", "@types/prismjs": "^1.16.3", "@types/uuid": "^10.0.0", "@types/webpack": "^5.28.0", @@ -7336,16 +7335,6 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, - "node_modules/@types/nouislider": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@types/nouislider/-/nouislider-15.0.0.tgz", - "integrity": "sha512-CgBRRaaoR09F+yIp3y222atrs8+e2fDv0sFJmhhgJP9fvKfoZsKHX10oBMe/Y3toZ4obIY+CMirfGeli+aoKwg==", - "deprecated": "This is a stub types definition. nouislider provides its own type definitions, so you do not need this installed.", - "dev": true, - "dependencies": { - "nouislider": "*" - } - }, "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", diff --git a/package.json b/package.json index b8ea57b56b..c60d031d70 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,6 @@ "@types/karma": "^6.3.8", "@types/lodash-es": "^4.17.4", "@types/node": "^18.19.4", - "@types/nouislider": "^15.0.0", "@types/prismjs": "^1.16.3", "@types/uuid": "^10.0.0", "@types/webpack": "^5.28.0", diff --git a/packages/stark-ui/ng-package.json b/packages/stark-ui/ng-package.json index 41c83bf415..9b71c5232a 100644 --- a/packages/stark-ui/ng-package.json +++ b/packages/stark-ui/ng-package.json @@ -23,7 +23,6 @@ "@prettier/plugin-xml", "@sqltools/formatter", "@types/lodash-es", - "@types/nouislider", "@types/prismjs", "angular2-text-mask", "normalize.css", diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json index 9a3d730a49..96915db7ec 100644 --- a/packages/stark-ui/package.json +++ b/packages/stark-ui/package.json @@ -21,11 +21,10 @@ "@angular/material-moment-adapter": "^16.2.14", "@mdi/angular-material": "^4.0.96", "@sqltools/formatter": "^1.2.3", - "@types/nouislider": "^9.0.10", "@types/prismjs": "^1.16.3", "angular2-text-mask": "^9.0.0", "normalize.css": "^8.0.1", - "nouislider": "^14.6.3", + "nouislider": "^15.8.1", "prettier": "~3.3.3", "prismjs": "^1.23.0", "text-mask-addons": "^3.8.0", diff --git a/packages/stark-ui/src/modules/slider/components.ts b/packages/stark-ui/src/modules/slider/components.ts index 8af6144c3f..7444a93c75 100644 --- a/packages/stark-ui/src/modules/slider/components.ts +++ b/packages/stark-ui/src/modules/slider/components.ts @@ -1,3 +1,2 @@ export * from "./components/slider.component"; export * from "./components/slider-config.intf"; -export * from "./components/slider-pips.intf"; diff --git a/packages/stark-ui/src/modules/slider/components/_slider-theme.scss b/packages/stark-ui/src/modules/slider/components/_slider-theme.scss index c2a5ca60d8..f275bdaecf 100644 --- a/packages/stark-ui/src/modules/slider/components/_slider-theme.scss +++ b/packages/stark-ui/src/modules/slider/components/_slider-theme.scss @@ -5,7 +5,7 @@ @use "sass:map"; @use "@angular/material" as mat; @use "../../../../styles/old-variables" as old-vars; -@import "~nouislider/distribute/nouislider.css"; +@import "~nouislider/dist/nouislider.css"; @mixin stark-slider-theme($material-theme-config, $stark-theme-config) { .stark-slider { @@ -96,6 +96,10 @@ height: 300px; width: 5px; + .noUi-origin { + top: 0; + } + .noUi-handle { transform: translate(-10px, -50%); } diff --git a/packages/stark-ui/src/modules/slider/components/slider-config.intf.ts b/packages/stark-ui/src/modules/slider/components/slider-config.intf.ts index 1bcf2c44fc..c71320b163 100644 --- a/packages/stark-ui/src/modules/slider/components/slider-config.intf.ts +++ b/packages/stark-ui/src/modules/slider/components/slider-config.intf.ts @@ -1,84 +1,9 @@ -import { StarkSliderPips } from "./slider-pips.intf"; - -/** - * Interface to be used together with the {@link StarkSliderConfig} - * when using advanced formatting options for the {@link StarkSliderComponent}. - */ -export interface StarkSliderFormatter { - /** - * Function to convert a number to a string with a specific format - */ - to(rawValue: number): string; // format a number - - /** - * Function to parse the formatted string back to a number - */ - from(formattedValue: string): number; // get a number back -} +import { Options } from "nouislider"; /** + * @deprecated please use the `Options` interface from "nouislider" library directly * Interface to be implemented when using the {@link StarkSliderComponent}. * It is in fact a subset of the options supported by the {@link https://github.com/leongersen/noUiSlider/|noUiSlider} library. */ -export interface StarkSliderConfig { - /** - * Several ways to handle user interaction. - * - * See {@link https://refreshless.com/nouislider/behaviour-option/|noUiSlider API: Behaviour} - */ - behaviour?: string; - - /** - * This can be used to control the (green) bar between the handles, or the edges of the slider. - * - * See {@link https://refreshless.com/nouislider/slider-options/#section-connect|noUiSlider API: Connect} - */ - connect?: boolean | boolean[]; - - /** - * Formatter containing `to()` function to encode the values and a `from()` function to decode them. - */ - format?: StarkSliderFormatter; - - /** - * Slider's orientation: `"horizontal"` or `"vertical"`. - * - * **In case of vertical sliders, a default height is set via CSS rules which you can override if needed.** - * - * Default: `"horizontal"` - */ - orientation?: "horizontal" | "vertical"; - - /** - * Config object to define how the pips will be displayed in the slider. - */ - pips?: StarkSliderPips; - - /** - * All the values that are part of the range. The object should contain at least `min` and `max` properties. - * - * See {@link https://refreshless.com/nouislider/slider-values/#section-range|noUiSlider API: Range} - */ - range: { - min: number | number[]; - max: number | number[]; - [value: string]: number | number[]; - }; - - /** - * The minimum amount of units that an slider can change within the range. - * - * See {@link https://refreshless.com/nouislider/slider-values/#section-step|noUiSlider API: Step} - */ - step?: number; - /** - * Enable/disable the display of tooltips. - * You can also pass a formatter function to format the tooltips content. - * - * See: {@link https://refreshless.com/nouislider/slider-options/#section-tooltips|noUiSlider API: Tooltips} - * - * Default: `false` - */ - tooltips?: boolean | boolean[] | StarkSliderFormatter; -} +export interface StarkSliderConfig extends Options {} diff --git a/packages/stark-ui/src/modules/slider/components/slider-pips.intf.ts b/packages/stark-ui/src/modules/slider/components/slider-pips.intf.ts deleted file mode 100644 index 62d3617685..0000000000 --- a/packages/stark-ui/src/modules/slider/components/slider-pips.intf.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as noUiSlider from "nouislider"; -import { StarkSliderFormatter } from "./slider-config.intf"; - -/** - * The StarkSliderFormatter is an interface to be used together with the StarkSliderConfig - * when using advanced options for the the {@link StarkSliderComponent}. It is in fact a subset of the noUiSlider Pips options. - */ -export interface StarkSliderPips extends noUiSlider.PipsOptions { - /** - * Formatter containing `to()` function to encode the values and a `from()` function to decode them. - */ - format?: StarkSliderFormatter; -} diff --git a/packages/stark-ui/src/modules/slider/components/slider.component.spec.ts b/packages/stark-ui/src/modules/slider/components/slider.component.spec.ts index 248c4c29ab..d6e77d019f 100644 --- a/packages/stark-ui/src/modules/slider/components/slider.component.spec.ts +++ b/packages/stark-ui/src/modules/slider/components/slider.component.spec.ts @@ -4,7 +4,7 @@ import { Component, ViewChild } from "@angular/core"; import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; import { StarkSliderComponent } from "./slider.component"; -import { StarkSliderConfig } from "./slider-config.intf"; +import { Options } from "nouislider"; import Spy = jasmine.Spy; /** @@ -27,7 +27,7 @@ class TestHostComponent { public sliderId?: string; public sliderValues?: number[]; - public sliderConfig?: StarkSliderConfig; + public sliderConfig?: Options; /** * Simulates the OnValueChanges event of the slider component @@ -44,7 +44,8 @@ describe("SliderComponent", () => { let hostComponent: TestHostComponent; let hostFixture: ComponentFixture; - const mockConfig: StarkSliderConfig = { + const mockConfig: Options = { + start: 5, range: { min: 5, max: 95 @@ -76,7 +77,6 @@ describe("SliderComponent", () => { hostComponent.sliderValues = mockValues; hostComponent.sliderId = mockSliderId; - spyOn(component.noUiSliderLibrary, "create").and.callThrough(); spyOn(component, "updateSliderInstanceValues").and.callThrough(); spyOn(component.changed, "emit").and.callThrough(); @@ -153,7 +153,6 @@ describe("SliderComponent", () => { describe("createSliderInstance", () => { it("should create the slider instance and assign it to the internal variable", () => { - expect(component.noUiSliderLibrary.create).toHaveBeenCalledTimes(1); expect(component.slider).toBeDefined(); }); }); diff --git a/packages/stark-ui/src/modules/slider/components/slider.component.ts b/packages/stark-ui/src/modules/slider/components/slider.component.ts index 3cd00b2562..21467ba43c 100644 --- a/packages/stark-ui/src/modules/slider/components/slider.component.ts +++ b/packages/stark-ui/src/modules/slider/components/slider.component.ts @@ -14,11 +14,10 @@ import { SimpleChanges, ViewEncapsulation } from "@angular/core"; -import * as noUiSliderLibrary from "nouislider"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { StarkDOMUtil } from "@nationalbankbelgium/stark-ui/src/util"; -import { StarkSliderConfig } from "./slider-config.intf"; import { AbstractStarkUiComponent } from "@nationalbankbelgium/stark-ui/src/internal-common"; +import { API, Options, create } from "nouislider"; /** * @ignore @@ -51,7 +50,7 @@ export class StarkSliderComponent extends AbstractStarkUiComponent implements Af * Configuration object for the slider instance to be created. */ @Input() - public sliderConfig!: StarkSliderConfig; + public sliderConfig!: Options; /** * HTML "id" attribute of the element. @@ -86,12 +85,7 @@ export class StarkSliderComponent extends AbstractStarkUiComponent implements Af /** * a reference to the `noUiSlider` component */ - public slider!: noUiSliderLibrary.noUiSlider; - - /** - * a reference to the noUiSlider library - */ - public noUiSliderLibrary: any; + public slider!: API; /** * Class constructor @@ -105,7 +99,6 @@ export class StarkSliderComponent extends AbstractStarkUiComponent implements Af elementRef: ElementRef ) { super(renderer, elementRef); - this.noUiSliderLibrary = noUiSliderLibrary; } /** @@ -152,16 +145,15 @@ export class StarkSliderComponent extends AbstractStarkUiComponent implements Af StarkDOMUtil.getElementsBySelector(this.elementRef.nativeElement, ".stark-slider .slider")[0] ); - const sliderOptions: noUiSliderLibrary.Options = { ...this.sliderConfig, start: this.values }; - this.noUiSliderLibrary.create(sliderElement, sliderOptions); - this.slider = (sliderElement).noUiSlider; + const sliderOptions: Options = { ...this.sliderConfig, start: this.values }; + this.slider = create(sliderElement, sliderOptions); } /** * Attach the update handler to the slider component */ public attachSliderInstanceUpdateHandler(): void { - this.slider.on("update", (_values: string[], _handle: number, unencodedValues: number[]) => { + this.slider.on("update", (_values: (string | number)[], _handle: number, unencodedValues: number[]) => { if (!isEqual(this.values, unencodedValues)) { this.values = unencodedValues; this.latestUnencodedValues = unencodedValues;