@bpd-library/components 1.3.2-beta.7 → 1.3.2-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atoms/form-elements/range-slider/range-slider.d.ts +4 -1
- package/dist/atoms/form-elements/range-slider/range-slider.js +11 -4
- package/dist/atoms/form-elements/range-slider/range-slider.js.map +1 -1
- package/dist/atoms/form-elements/utilities/range-slider.d.ts +1 -0
- package/dist/atoms/form-elements/utilities/range-slider.js +66 -11
- package/dist/atoms/form-elements/utilities/range-slider.js.map +1 -1
- package/package.json +4 -4
|
@@ -7,5 +7,8 @@ export interface RangeSliderProps {
|
|
|
7
7
|
name: string;
|
|
8
8
|
classes?: string;
|
|
9
9
|
disabled?: boolean;
|
|
10
|
+
enableInputControls?: boolean;
|
|
11
|
+
minLabel?: Text | string;
|
|
12
|
+
maxLabel?: Text | string;
|
|
10
13
|
}
|
|
11
|
-
export declare const RangeSliderElement: ({ classes, disabled, min, max, increment, start, name, onChange, }: RangeSliderProps) => any;
|
|
14
|
+
export declare const RangeSliderElement: ({ classes, disabled, min, max, increment, start, name, onChange, enableInputControls, minLabel, maxLabel, }: RangeSliderProps) => any;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h } from '@atomify/jsx';
|
|
2
|
-
export const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, }) => {
|
|
1
|
+
import { Fragment, h } from '@atomify/jsx';
|
|
2
|
+
export const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, enableInputControls, minLabel, maxLabel, }) => {
|
|
3
3
|
const inputClasses = {
|
|
4
4
|
['c-range-slider']: true,
|
|
5
5
|
['form__item']: true,
|
|
@@ -9,10 +9,17 @@ export const RangeSliderElement = ({ classes, disabled, min, max, increment, sta
|
|
|
9
9
|
h("bpd-range-slider", { min: min, max: max, increment: increment, start: start, onRangeValuesChanged: onChange, class: classes },
|
|
10
10
|
h("div", { class: "range-slider__container" },
|
|
11
11
|
h("div", { "js-hook-slider-container": true }),
|
|
12
|
-
h("div", { class: "range-slider__values" },
|
|
12
|
+
h("div", { class: "range-slider__values" }, enableInputControls ? (h(Fragment, null,
|
|
13
|
+
h("div", { class: "range-slider__value-input-container" },
|
|
14
|
+
h("span", { class: "range-slider__value-input-label" }, minLabel),
|
|
15
|
+
h("input", { type: "text", class: "range-slider__value-input", "js-hook-slider-min": true })),
|
|
16
|
+
h("div", { class: "range-slider__value-input-container" },
|
|
17
|
+
h("span", { class: "range-slider__value-input-label" }, maxLabel),
|
|
18
|
+
h("input", { type: "text", class: "range-slider__value-input", "js-hook-slider-max": true })),
|
|
19
|
+
h("input", { type: "text", id: name, name: name, class: "u-sr-only", "js-hook-slider-min-max-value": true }))) : (h(Fragment, null,
|
|
13
20
|
h("span", { class: "range-slider__values-item", "js-hook-slider-min": true }),
|
|
14
21
|
h("span", { class: "range-slider__values-item", "js-hook-slider-max": true }),
|
|
15
22
|
h("input", { type: "number", id: `${name}-0`, name: name, value: start[0], "js-hook-slider-min-value": true }),
|
|
16
|
-
h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))));
|
|
23
|
+
h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))))));
|
|
17
24
|
};
|
|
18
25
|
//# sourceMappingURL=range-slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/range-slider/range-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/range-slider/range-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAgB3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG;QACjB,CAAC,gBAAgB,CAAC,EAAE,IAAI;QACxB,CAAC,YAAY,CAAC,EAAE,IAAI;QACpB,CAAC,sBAAsB,CAAC,EAAE,QAAQ;KACrC,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAE,YAAY;QACpB,wBACI,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,oBAAoB,EAAE,QAAQ,EAC9B,KAAK,EAAE,OAAO;YACd,WAAK,KAAK,EAAC,yBAAyB;gBAChC,8CAAoC;gBACpC,WAAK,KAAK,EAAC,sBAAsB,IAC5B,mBAAmB,CAAC,CAAC,CAAC,CACnB,EAAC,QAAQ;oBACL,WAAK,KAAK,EAAC,qCAAqC;wBAC5C,YAAM,KAAK,EAAC,iCAAiC,IAAE,QAAQ,CAAQ;wBAC/D,aACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,2BAA2B,+BAEnC,CACA;oBACN,WAAK,KAAK,EAAC,qCAAqC;wBAC5C,YAAM,KAAK,EAAC,iCAAiC,IAAE,QAAQ,CAAQ;wBAC/D,aACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,2BAA2B,+BAEnC,CACA;oBACN,aACI,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,WAAW,yCAEnB,CACK,CACd,CAAC,CAAC,CAAC,CACA,EAAC,QAAQ;oBACL,YAAM,KAAK,EAAC,2BAA2B,+BAA2B;oBAClE,YAAM,KAAK,EAAC,2BAA2B,+BAA2B;oBAClE,aACI,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,IAAI,IAAI,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qCAEjB;oBACF,aACI,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,IAAI,IAAI,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qCAEjB,CACK,CACd,CACC,CACJ,CACS,CACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Fragment, h } from '@atomify/jsx';\n\nexport interface RangeSliderProps {\n min: number;\n max: number;\n increment: number;\n start: number[];\n onChange: (e: CustomEvent) => void;\n name: string;\n classes?: string;\n disabled?: boolean;\n enableInputControls?: boolean;\n minLabel?: Text | string;\n maxLabel?: Text | string;\n}\n\nexport const RangeSliderElement = ({\n classes,\n disabled,\n min,\n max,\n increment,\n start,\n name,\n onChange,\n enableInputControls,\n minLabel,\n maxLabel,\n}: RangeSliderProps) => {\n const inputClasses = {\n ['c-range-slider']: true,\n ['form__item']: true,\n ['form__item--disabled']: disabled,\n };\n\n return (\n <div class={inputClasses}>\n <bpd-range-slider\n min={min}\n max={max}\n increment={increment}\n start={start}\n onRangeValuesChanged={onChange}\n class={classes}>\n <div class=\"range-slider__container\">\n <div js-hook-slider-container></div>\n <div class=\"range-slider__values\">\n {enableInputControls ? (\n <Fragment>\n <div class=\"range-slider__value-input-container\">\n <span class=\"range-slider__value-input-label\">{minLabel}</span>\n <input\n type=\"text\"\n class=\"range-slider__value-input\"\n js-hook-slider-min\n />\n </div>\n <div class=\"range-slider__value-input-container\">\n <span class=\"range-slider__value-input-label\">{maxLabel}</span>\n <input\n type=\"text\"\n class=\"range-slider__value-input\"\n js-hook-slider-max\n />\n </div>\n <input\n type=\"text\"\n id={name}\n name={name}\n class=\"u-sr-only\"\n js-hook-slider-min-max-value\n />\n </Fragment>\n ) : (\n <Fragment>\n <span class=\"range-slider__values-item\" js-hook-slider-min></span>\n <span class=\"range-slider__values-item\" js-hook-slider-max></span>\n <input\n type=\"number\"\n id={`${name}-0`}\n name={name}\n value={start[0]}\n js-hook-slider-min-value\n />\n <input\n type=\"number\"\n id={`${name}-1`}\n name={name}\n value={start[1]}\n js-hook-slider-max-value\n />\n </Fragment>\n )}\n </div>\n </div>\n </bpd-range-slider>\n </div>\n );\n};\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { defineElement, onDidLoad, useBindMethod, useElement, useEvent, useProp, } from '@atomify/hooks';
|
|
1
|
+
import { defineElement, onDidLoad, useBindMethod, useElement, useEvent, useListen, useProp, } from '@atomify/hooks';
|
|
2
2
|
import { toCurrency } from '@bpd-library/utilities';
|
|
3
3
|
import noUiSlider from 'nouislider';
|
|
4
|
+
const formatValue = (value) => toCurrency(value).replace(',', '.');
|
|
4
5
|
export const RangeSlider = ({ element }) => {
|
|
5
6
|
const [min] = useProp('min', 0);
|
|
6
7
|
const [max] = useProp('max', 0);
|
|
@@ -13,8 +14,28 @@ export const RangeSlider = ({ element }) => {
|
|
|
13
14
|
const sliderMax = useElement('[js-hook-slider-max]');
|
|
14
15
|
const sliderMinValue = useElement('[js-hook-slider-min-value]');
|
|
15
16
|
const sliderMaxValue = useElement('[js-hook-slider-max-value]');
|
|
17
|
+
const sliderMinMaxInput = useElement('[js-hook-slider-min-max-value]');
|
|
16
18
|
const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });
|
|
17
19
|
useBindMethod('resetState', resetState);
|
|
20
|
+
useBindMethod('setValues', (minValue, maxValue) => {
|
|
21
|
+
if (sliderMinValue.current && sliderMaxValue.current) {
|
|
22
|
+
sliderMinValue.current.value = `${minValue}`;
|
|
23
|
+
sliderMaxValue.current.value = `${maxValue}`;
|
|
24
|
+
sliderMinValue.current.checked = true;
|
|
25
|
+
sliderMaxValue.current.checked = true;
|
|
26
|
+
sliderMin.current.innerHTML = formatValue(minValue);
|
|
27
|
+
sliderMax.current.innerHTML = formatValue(maxValue);
|
|
28
|
+
}
|
|
29
|
+
if (sliderMinMaxInput.current) {
|
|
30
|
+
sliderMinMaxInput.current.value = `${minValue},${maxValue}`;
|
|
31
|
+
sliderMinMaxInput.current.checked = true;
|
|
32
|
+
}
|
|
33
|
+
sliderContainer.current.noUiSlider.updateOptions({
|
|
34
|
+
start: [Number(minValue), Number(maxValue)],
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
useListen(sliderMin, 'change', changeValuesManually);
|
|
38
|
+
useListen(sliderMax, 'change', changeValuesManually);
|
|
18
39
|
onDidLoad(() => {
|
|
19
40
|
const hasZeroValues = element.start.every((item) => item === 0);
|
|
20
41
|
const settings = {
|
|
@@ -32,23 +53,57 @@ export const RangeSlider = ({ element }) => {
|
|
|
32
53
|
const generatedValues = values.map((value) => parseInt(value));
|
|
33
54
|
setStart([...generatedValues]);
|
|
34
55
|
});
|
|
35
|
-
sliderContainer.current.noUiSlider.on('change', onChangeHandler);
|
|
56
|
+
sliderContainer.current.noUiSlider.on('change', () => onChangeHandler('slider'));
|
|
36
57
|
setMinMaxValues();
|
|
37
58
|
});
|
|
38
59
|
watchStart(setMinMaxValues);
|
|
60
|
+
function changeValuesManually() {
|
|
61
|
+
var _a, _b;
|
|
62
|
+
const sliderMinValue = `${(_a = sliderMin.current) === null || _a === void 0 ? void 0 : _a.value}`
|
|
63
|
+
.split('€ ')[1]
|
|
64
|
+
.replace(',', '')
|
|
65
|
+
.replace('.', '');
|
|
66
|
+
const sliderMaxValue = `${(_b = sliderMax.current) === null || _b === void 0 ? void 0 : _b.value}`
|
|
67
|
+
.split('€ ')[1]
|
|
68
|
+
.replace(',', '')
|
|
69
|
+
.replace('.', '');
|
|
70
|
+
setStart([Number(sliderMinValue), Number(sliderMaxValue)]);
|
|
71
|
+
setMinMaxValues();
|
|
72
|
+
onChangeHandler('input');
|
|
73
|
+
sliderContainer.current.noUiSlider.updateOptions({
|
|
74
|
+
start: [Number(sliderMinValue), Number(sliderMaxValue)],
|
|
75
|
+
});
|
|
76
|
+
}
|
|
39
77
|
function setMinMaxValues() {
|
|
40
78
|
const { minValue, maxValue } = getValues();
|
|
41
|
-
|
|
42
|
-
|
|
79
|
+
if (sliderMinMaxInput.current) {
|
|
80
|
+
sliderMin.current.value = formatValue(minValue);
|
|
81
|
+
sliderMax.current.value = formatValue(maxValue);
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
sliderMin.current.innerHTML = formatValue(minValue);
|
|
85
|
+
sliderMax.current.innerHTML = formatValue(maxValue);
|
|
86
|
+
}
|
|
43
87
|
}
|
|
44
|
-
function onChangeHandler() {
|
|
88
|
+
function onChangeHandler(rangeOrigin) {
|
|
45
89
|
const { minValue, maxValue } = getValues();
|
|
46
|
-
sliderMinValue.current.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
90
|
+
if (sliderMinValue.current && sliderMaxValue.current) {
|
|
91
|
+
sliderMinValue.current.value = `${minValue}`;
|
|
92
|
+
sliderMaxValue.current.value = `${maxValue}`;
|
|
93
|
+
sliderMinValue.current.checked = true;
|
|
94
|
+
sliderMaxValue.current.checked = true;
|
|
95
|
+
sliderMin.current.innerHTML = formatValue(minValue);
|
|
96
|
+
sliderMax.current.innerHTML = formatValue(maxValue);
|
|
97
|
+
sliderMinValue.current.dispatchEvent(new Event('change'));
|
|
98
|
+
sliderMaxValue.current.dispatchEvent(new Event('change'));
|
|
99
|
+
}
|
|
100
|
+
if (sliderMinMaxInput.current) {
|
|
101
|
+
sliderMinMaxInput.current.value = `${minValue},${maxValue}`;
|
|
102
|
+
sliderMinMaxInput.current.checked = true;
|
|
103
|
+
if (rangeOrigin === 'slider') {
|
|
104
|
+
sliderMinMaxInput.current.dispatchEvent(new Event('change', { bubbles: true }));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
52
107
|
rangeValuesChanged.emit({ minValue, maxValue, hasChanged });
|
|
53
108
|
}
|
|
54
109
|
function getValues() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/utilities/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n defineElement,\n FC,\n onDidLoad,\n useBindMethod,\n useElement,\n useEvent,\n useProp,\n} from '@atomify/hooks';\nimport { toCurrency } from '@bpd-library/utilities';\nimport noUiSlider from 'nouislider';\n\nexport interface BPDRange extends Component {\n bindValue: number[];\n start: number[];\n resetState: () => void;\n}\n\nexport const RangeSlider: FC<BPDRange> = ({ element }) => {\n const [min] = useProp<number>('min', 0);\n const [max] = useProp<number>('max', 0);\n const [increment] = useProp<number>('increment', 0);\n const [hasChanged, setHasChanged] = useProp<boolean>('hasChanged', false);\n const [, setStart, watchStart] = useProp<number[]>('start', [0, 0]);\n const [, setBindValue] = useProp<number[]>('bindValue', [0, 0]);\n\n const sliderContainer = useElement<HTMLDivElement>('[js-hook-slider-container]');\n const sliderMin = useElement<HTMLDivElement>('[js-hook-slider-min]');\n const sliderMax = useElement<HTMLDivElement>('[js-hook-slider-max]');\n const sliderMinValue = useElement<HTMLInputElement>('[js-hook-slider-min-value]');\n const sliderMaxValue = useElement<HTMLInputElement>('[js-hook-slider-max-value]');\n\n const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });\n\n useBindMethod('resetState', resetState);\n\n onDidLoad(() => {\n const hasZeroValues = element.start.every((item) => item === 0);\n\n const settings = {\n start: hasZeroValues ? [min, max] : element.start,\n step: increment,\n connect: true,\n documentElement: sliderContainer.current,\n range: {\n min,\n max,\n },\n };\n\n noUiSlider.create(sliderContainer.current!, settings);\n\n (sliderContainer.current as any).noUiSlider.on('update', (values: string[]) => {\n const generatedValues = values.map((value) => parseInt(value));\n setStart([...generatedValues]);\n });\n\n (sliderContainer.current as any).noUiSlider.on('change', onChangeHandler);\n\n setMinMaxValues();\n });\n\n watchStart(setMinMaxValues);\n\n function setMinMaxValues() {\n const { minValue, maxValue } = getValues();\n\n sliderMin.current!.innerHTML = `${toCurrency(minValue)}`.replace(',', '.');\n sliderMax.current!.innerHTML = `${toCurrency(maxValue)}`.replace(',', '.');\n }\n\n function onChangeHandler() {\n const { minValue, maxValue } = getValues();\n\n sliderMinValue.current!.value = `${minValue}`;\n sliderMaxValue.current!.value = `${maxValue}`;\n\n sliderMinValue.current!.checked = true;\n sliderMaxValue.current!.checked = true;\n\n sliderMinValue.current!.dispatchEvent(new Event('change'));\n sliderMaxValue.current!.dispatchEvent(new Event('change'));\n\n rangeValuesChanged.emit({ minValue, maxValue, hasChanged });\n }\n\n function getValues() {\n const hasZeroValues = element.start.every((item) => item === 0);\n const minValue = hasZeroValues ? min : element.start[0];\n const maxValue = hasZeroValues ? max : element.start[1];\n\n setBindValue(element.start);\n setHasChanged(JSON.stringify(element.start) !== JSON.stringify([min, max]));\n\n return {\n minValue,\n maxValue,\n };\n }\n\n function resetState() {\n (sliderContainer.current as any).noUiSlider.set([min, max]);\n setStart([0, 0]);\n setHasChanged(false);\n }\n};\n\nRangeSlider.props = {\n min: {\n type: Number,\n reflectToAttr: true,\n },\n max: {\n type: Number,\n reflectToAttr: true,\n },\n increment: {\n type: Number,\n reflectToAttr: true,\n },\n hasChanged: {\n type: Boolean,\n reflectToAttr: true,\n },\n start: {\n type: Array,\n reflectToAttr: true,\n },\n bindValue: {\n type: Array,\n },\n};\n\ndefineElement('bpd-range-slider', RangeSlider);\n"]}
|
|
1
|
+
{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/utilities/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n defineElement,\n FC,\n onDidLoad,\n useBindMethod,\n useElement,\n useEvent,\n useListen,\n useProp,\n} from '@atomify/hooks';\nimport { toCurrency } from '@bpd-library/utilities';\nimport noUiSlider from 'nouislider';\n\nexport interface BPDRange extends Component {\n bindValue: number[];\n start: number[];\n resetState: () => void;\n setValues: (minValue: number, maxValue: number) => void;\n}\n\nconst formatValue = (value: number) => toCurrency(value).replace(',', '.');\n\nexport const RangeSlider: FC<BPDRange> = ({ element }) => {\n const [min] = useProp<number>('min', 0);\n const [max] = useProp<number>('max', 0);\n const [increment] = useProp<number>('increment', 0);\n const [hasChanged, setHasChanged] = useProp<boolean>('hasChanged', false);\n const [, setStart, watchStart] = useProp<number[]>('start', [0, 0]);\n const [, setBindValue] = useProp<number[]>('bindValue', [0, 0]);\n\n const sliderContainer = useElement<HTMLDivElement>('[js-hook-slider-container]');\n const sliderMin = useElement<HTMLInputElement | HTMLSpanElement>('[js-hook-slider-min]');\n const sliderMax = useElement<HTMLInputElement | HTMLSpanElement>('[js-hook-slider-max]');\n const sliderMinValue = useElement<HTMLInputElement>('[js-hook-slider-min-value]');\n const sliderMaxValue = useElement<HTMLInputElement>('[js-hook-slider-max-value]');\n const sliderMinMaxInput = useElement<HTMLInputElement>('[js-hook-slider-min-max-value]');\n\n const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });\n\n useBindMethod('resetState', resetState);\n useBindMethod('setValues', (minValue, maxValue) => {\n if (sliderMinValue.current && sliderMaxValue.current) {\n sliderMinValue.current.value = `${minValue}`;\n sliderMaxValue.current.value = `${maxValue}`;\n sliderMinValue.current.checked = true;\n sliderMaxValue.current.checked = true;\n (sliderMin.current as HTMLSpanElement)!.innerHTML = formatValue(minValue);\n (sliderMax.current as HTMLSpanElement)!.innerHTML = formatValue(maxValue);\n }\n\n if (sliderMinMaxInput.current) {\n sliderMinMaxInput.current.value = `${minValue},${maxValue}`;\n sliderMinMaxInput.current.checked = true;\n }\n\n (sliderContainer.current as any).noUiSlider.updateOptions({\n start: [Number(minValue), Number(maxValue)],\n });\n });\n useListen(sliderMin, 'change', changeValuesManually);\n useListen(sliderMax, 'change', changeValuesManually);\n\n onDidLoad(() => {\n const hasZeroValues = element.start.every((item) => item === 0);\n\n const settings = {\n start: hasZeroValues ? [min, max] : element.start,\n step: increment,\n connect: true,\n documentElement: sliderContainer.current,\n range: {\n min,\n max,\n },\n };\n\n noUiSlider.create(sliderContainer.current!, settings);\n\n (sliderContainer.current as any).noUiSlider.on('update', (values: string[]) => {\n const generatedValues = values.map((value) => parseInt(value));\n setStart([...generatedValues]);\n });\n\n (sliderContainer.current as any).noUiSlider.on('change', () => onChangeHandler('slider'));\n\n setMinMaxValues();\n });\n\n watchStart(setMinMaxValues);\n\n function changeValuesManually() {\n const sliderMinValue = `${(sliderMin.current as HTMLInputElement)?.value}`\n .split('€ ')[1]\n .replace(',', '')\n .replace('.', '');\n const sliderMaxValue = `${(sliderMax.current as HTMLInputElement)?.value}`\n .split('€ ')[1]\n .replace(',', '')\n .replace('.', '');\n\n setStart([Number(sliderMinValue), Number(sliderMaxValue)]);\n setMinMaxValues();\n onChangeHandler('input');\n (sliderContainer.current as any).noUiSlider.updateOptions({\n start: [Number(sliderMinValue), Number(sliderMaxValue)],\n });\n }\n\n function setMinMaxValues() {\n const { minValue, maxValue } = getValues();\n\n if (sliderMinMaxInput.current) {\n (sliderMin.current as HTMLInputElement).value = formatValue(minValue);\n (sliderMax.current as HTMLInputElement).value = formatValue(maxValue);\n } else {\n (sliderMin.current as HTMLSpanElement)!.innerHTML = formatValue(minValue);\n (sliderMax.current as HTMLSpanElement)!.innerHTML = formatValue(maxValue);\n }\n }\n\n function onChangeHandler(rangeOrigin?: 'slider' | 'input') {\n const { minValue, maxValue } = getValues();\n\n if (sliderMinValue.current && sliderMaxValue.current) {\n sliderMinValue.current.value = `${minValue}`;\n sliderMaxValue.current.value = `${maxValue}`;\n sliderMinValue.current.checked = true;\n sliderMaxValue.current.checked = true;\n (sliderMin.current as HTMLSpanElement)!.innerHTML = formatValue(minValue);\n (sliderMax.current as HTMLSpanElement)!.innerHTML = formatValue(maxValue);\n\n sliderMinValue.current!.dispatchEvent(new Event('change'));\n sliderMaxValue.current!.dispatchEvent(new Event('change'));\n }\n\n if (sliderMinMaxInput.current) {\n sliderMinMaxInput.current.value = `${minValue},${maxValue}`;\n sliderMinMaxInput.current.checked = true;\n\n if (rangeOrigin === 'slider') {\n sliderMinMaxInput.current.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n\n rangeValuesChanged.emit({ minValue, maxValue, hasChanged });\n }\n\n function getValues() {\n const hasZeroValues = element.start.every((item) => item === 0);\n const minValue = hasZeroValues ? min : element.start[0];\n const maxValue = hasZeroValues ? max : element.start[1];\n\n setBindValue(element.start);\n setHasChanged(JSON.stringify(element.start) !== JSON.stringify([min, max]));\n\n return {\n minValue,\n maxValue,\n };\n }\n\n function resetState() {\n (sliderContainer.current as any).noUiSlider.set([min, max]);\n setStart([0, 0]);\n setHasChanged(false);\n }\n};\n\nRangeSlider.props = {\n min: {\n type: Number,\n reflectToAttr: true,\n },\n max: {\n type: Number,\n reflectToAttr: true,\n },\n increment: {\n type: Number,\n reflectToAttr: true,\n },\n hasChanged: {\n type: Boolean,\n reflectToAttr: true,\n },\n start: {\n type: Array,\n reflectToAttr: true,\n },\n bindValue: {\n type: Array,\n },\n};\n\ndefineElement('bpd-range-slider', RangeSlider);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpd-library/components",
|
|
3
|
-
"version": "1.3.2-beta.
|
|
3
|
+
"version": "1.3.2-beta.9",
|
|
4
4
|
"description": "Description",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "0cc46b1c0fa6fc01610a54838ca44723cd568c57",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@atomify/core": "2.4.1",
|
|
52
52
|
"@atomify/hooks": "1.1.11",
|
|
53
53
|
"@atomify/jsx": "1.7.1",
|
|
54
54
|
"@atomify/kit": "1.1.11",
|
|
55
|
-
"@bpd-library/types": "^1.3.2-beta.
|
|
56
|
-
"@bpd-library/utilities": "^1.3.2-beta.
|
|
55
|
+
"@bpd-library/types": "^1.3.2-beta.9",
|
|
56
|
+
"@bpd-library/utilities": "^1.3.2-beta.9",
|
|
57
57
|
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
|
|
58
58
|
"@mapbox/mapbox-gl-language": "^0.10.1",
|
|
59
59
|
"@turf/helpers": "^6.5.0",
|