@wavemaker/custom-widgets-m3 12.0.0-next.45022 → 12.0.0-next.45025
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.
- custom-widgets-m3/index.d.ts +1 -0
- custom-widgets-m3/index.js +1 -0
- custom-widgets-m3/package.json +1 -1
- custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +5 -0
- custom-widgets-m3/src/discrete_slider/discrete_slider.js +158 -0
- custom-widgets-m3/src/discrete_slider/page.min.d.ts +7 -0
- custom-widgets-m3/src/discrete_slider/page.min.js +7 -0
- custom-widgets-m3/src/slider/page.min.js +2 -2
- custom-widgets-m3/src/slider/slider.js +10 -4
custom-widgets-m3/index.d.ts
CHANGED
custom-widgets-m3/index.js
CHANGED
custom-widgets-m3/package.json
CHANGED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
Widget.onReady = function () {
|
|
2
|
+
Widget.Widgets.container1.class += ' filled-slider discrete-slider';
|
|
3
|
+
if (Widget.props.layout === "Vertical") {
|
|
4
|
+
Widget.Widgets.slider1.class += ' vertical';
|
|
5
|
+
}
|
|
6
|
+
else {
|
|
7
|
+
Widget.Widgets.slider1.class += ' horizontal';
|
|
8
|
+
}
|
|
9
|
+
// Initialize slider value using datavalue
|
|
10
|
+
var initialValue = Number(Widget.props.value); // Use props.value for initial value
|
|
11
|
+
Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(initialValue)) + '%');
|
|
12
|
+
// Set slider step value from props
|
|
13
|
+
Widget.Widgets.slider1.step = Widget.props.step_value;
|
|
14
|
+
Widget.Widgets.composite.required = Widget.props.required;
|
|
15
|
+
// Call functions to configure and update the slider
|
|
16
|
+
configureDiscreteSlider();
|
|
17
|
+
updateSteps();
|
|
18
|
+
activeSliderElement();
|
|
19
|
+
updateLabelVisibility(); // Update label visibility based on initial value
|
|
20
|
+
};
|
|
21
|
+
function activeSliderElement() {
|
|
22
|
+
var activeSlider = Widget.Widgets.slider1.$element[0]; // Get the slider element
|
|
23
|
+
if (activeSlider) {
|
|
24
|
+
// Create a new div element
|
|
25
|
+
var newDiv = document.createElement('p');
|
|
26
|
+
newDiv.className = 'active-slider'; // Set a class for styling
|
|
27
|
+
// Append the new element to slider container
|
|
28
|
+
activeSlider.appendChild(newDiv);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
/*
|
|
32
|
+
* Configure the slider for discrete steps.
|
|
33
|
+
*/
|
|
34
|
+
function configureDiscreteSlider() {
|
|
35
|
+
var slider = Widget.Widgets.slider1; // Slider widget
|
|
36
|
+
var minValue = parseInt(Widget.props.min_value, 10);
|
|
37
|
+
var maxValue = parseInt(Widget.props.max_value, 10);
|
|
38
|
+
var stepValueParam = Widget.props.step_value;
|
|
39
|
+
var initialValue = Number(Widget.props.value); // Use props.value for initial value
|
|
40
|
+
var stepValue = parseInt(stepValueParam, 10);
|
|
41
|
+
if (isNaN(minValue) || isNaN(maxValue) || isNaN(stepValue) || stepValue <= 0) {
|
|
42
|
+
console.error("Invalid min, max, or step values");
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
// Set slider's min, max, and step attributes
|
|
46
|
+
slider.min = minValue;
|
|
47
|
+
slider.max = maxValue;
|
|
48
|
+
slider.step = stepValue;
|
|
49
|
+
// Ensure slider value is within the range
|
|
50
|
+
if (isNaN(initialValue) || initialValue < minValue || initialValue > maxValue) {
|
|
51
|
+
console.error("Slider value is out of range");
|
|
52
|
+
slider.datavalue = minValue; // Default to minValue if the provided value is invalid
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
slider.datavalue = initialValue; // Set the slider to the provided value
|
|
56
|
+
}
|
|
57
|
+
// Set initial position
|
|
58
|
+
Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(slider.datavalue)) + '%');
|
|
59
|
+
}
|
|
60
|
+
/*
|
|
61
|
+
* Update the labels displayed on the slider.
|
|
62
|
+
*/
|
|
63
|
+
function updateSteps() {
|
|
64
|
+
var slider = Widget.Widgets.slider1;
|
|
65
|
+
var labelContainer = Widget.Widgets.container2;
|
|
66
|
+
if (slider && labelContainer) {
|
|
67
|
+
var minValue = parseInt(slider.min, 10);
|
|
68
|
+
var maxValue = parseInt(slider.max, 10);
|
|
69
|
+
var stepValue = parseInt(slider.step, 10);
|
|
70
|
+
// Calculate the number of steps
|
|
71
|
+
var numSteps = Math.ceil((maxValue - minValue) / stepValue);
|
|
72
|
+
// Clear existing labels
|
|
73
|
+
labelContainer.$element[0].innerHTML = '';
|
|
74
|
+
// Create and position labels for each step
|
|
75
|
+
for (var i = 0; i <= numSteps; i++) {
|
|
76
|
+
var stepLabel = document.createElement('p');
|
|
77
|
+
stepLabel.className = 'step-label';
|
|
78
|
+
var labelValue = minValue + (i * stepValue);
|
|
79
|
+
// Ensure labelValue does not exceed maxValue
|
|
80
|
+
if (labelValue > maxValue)
|
|
81
|
+
break;
|
|
82
|
+
stepLabel.textContent = labelValue;
|
|
83
|
+
// Calculate and set label position
|
|
84
|
+
var leftPosition = Math.round(((labelValue - minValue) / (maxValue - minValue)) * 100 * 100) / 100; // Rounded to two decimal places
|
|
85
|
+
var adjustedPosition = leftPosition - 1;
|
|
86
|
+
stepLabel.style.setProperty('--position', "".concat(adjustedPosition, "%"));
|
|
87
|
+
stepLabel.setAttribute('data-position', adjustedPosition);
|
|
88
|
+
// Append label to the container
|
|
89
|
+
labelContainer.$element[0].appendChild(stepLabel);
|
|
90
|
+
}
|
|
91
|
+
// Set container positioning and add event listener for updating label visibility
|
|
92
|
+
labelContainer.$element[0].style.position = 'relative';
|
|
93
|
+
Widget.Widgets.slider1.$element[0].addEventListener('input', updateLabelVisibility);
|
|
94
|
+
// Initial update of label visibility
|
|
95
|
+
updateLabelVisibility();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
function updateLabelVisibility() {
|
|
99
|
+
var slider = Widget.Widgets.slider1;
|
|
100
|
+
var labels = Widget.Widgets.container2.$element[0].getElementsByClassName('step-label');
|
|
101
|
+
if (slider) {
|
|
102
|
+
var sliderValue = Number(slider.datavalue); // Get the current slider value
|
|
103
|
+
var minValue_1 = parseInt(slider.min, 10);
|
|
104
|
+
var maxValue_1 = parseInt(slider.max, 10);
|
|
105
|
+
var stepValue_1 = parseInt(slider.step, 10);
|
|
106
|
+
// Calculate the number of steps
|
|
107
|
+
var targets = Array.from({
|
|
108
|
+
length: Math.ceil((maxValue_1 - minValue_1) / stepValue_1) + 1
|
|
109
|
+
}, function (_, i) { return minValue_1 + i * stepValue_1; }).filter(function (value) { return value <= maxValue_1; });
|
|
110
|
+
console.log('Targets:', targets);
|
|
111
|
+
console.log('Slider Value:', sliderValue);
|
|
112
|
+
// Update label states based on slider value and targets
|
|
113
|
+
for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
|
|
114
|
+
var label = labels_1[_i];
|
|
115
|
+
var labelValue = parseInt(label.textContent, 10);
|
|
116
|
+
// Remove existing classes
|
|
117
|
+
label.classList.remove('hidden', 'inactive', 'active');
|
|
118
|
+
// Determine the label's state based on the slider value
|
|
119
|
+
if (targets.includes(labelValue)) {
|
|
120
|
+
if (labelValue === sliderValue) {
|
|
121
|
+
label.classList.add('hidden'); // Hide label if it matches the slider value
|
|
122
|
+
}
|
|
123
|
+
else if (labelValue < sliderValue) {
|
|
124
|
+
label.classList.add('inactive'); // Label is inactive if it is less than the slider value
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
label.classList.add('active'); // Label is active if it is greater than the slider value
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
// Ensure that labels are visible based on their state
|
|
131
|
+
label.style.display = 'block';
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
/*
|
|
136
|
+
* Convert slider value to percentage based on min and max
|
|
137
|
+
*/
|
|
138
|
+
function getSliderPercentage(value) {
|
|
139
|
+
var slider = Widget.Widgets.slider1;
|
|
140
|
+
var minValue = parseInt(slider.min, 10);
|
|
141
|
+
var maxValue = parseInt(slider.max, 10);
|
|
142
|
+
return ((value - minValue) / (maxValue - minValue)) * 100;
|
|
143
|
+
}
|
|
144
|
+
/*
|
|
145
|
+
* Handle slider value changes.
|
|
146
|
+
*/
|
|
147
|
+
Widget.slider1Change = function ($event, widget, newVal, oldVal) {
|
|
148
|
+
console.log('Slider Change Event:', {
|
|
149
|
+
$event: $event,
|
|
150
|
+
widget: widget,
|
|
151
|
+
newVal: newVal,
|
|
152
|
+
oldVal: oldVal
|
|
153
|
+
});
|
|
154
|
+
var sliderValue = newVal; // Use the new slider value
|
|
155
|
+
widget.$element[0].style.setProperty("--end", (100 - getSliderPercentage(sliderValue)) + '%');
|
|
156
|
+
// Update label visibility on slider change
|
|
157
|
+
updateLabelVisibility();
|
|
158
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export var discrete_slider = {
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22filled-slider%22%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22slider1Change%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%22%3E%3C%2Fwm-slider%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22stop-indicator%22%3E%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
+
"script": "Widget.onReady+%3D+function%28%29+%7B%0A%0A++++Widget.Widgets.container1.class+%2B%3D+%27+filled-slider+discrete-slider%27%3B%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22Vertical%22%29+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+vertical%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D%0A%0A++++%2F%2F+Initialize+slider+value+using+datavalue%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28initialValue%29%29+%2B+%27%25%27%29%3B%0A%0A++++%2F%2F+Set+slider+step+value+from+props%0A++++Widget.Widgets.slider1.step+%3D+Widget.props.step_value%3B%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A++++%2F%2F+Call+functions+to+configure+and+update+the+slider%0A++++configureDiscreteSlider%28%29%3B%0A++++updateSteps%28%29%3B%0A++++activeSliderElement%28%29%3B%0A++++updateLabelVisibility%28%29%3B+%2F%2F+Update+label+visibility+based+on+initial+value%0A++++console.log%28Widget.Widgets.slider1.step%29%3B%0A++++console.log%28Widget.Widgets.slider1.datavalue%2C+%22hu%22%29%3B%0A%7D%3B%0A%0Afunction+activeSliderElement%28%29+%7B%0A++++const+activeSlider+%3D+Widget.Widgets.slider1.%24element%5B0%5D%3B+%2F%2F+Get+the+slider+element%0A%0A++++if+%28activeSlider%29+%7B%0A++++++++%2F%2F+Create+a+new+div+element%0A++++++++const+newDiv+%3D+document.createElement%28%27p%27%29%3B%0A++++++++newDiv.className+%3D+%27active-slider%27%3B+%2F%2F+Set+a+class+for+styling%0A++++++++%2F%2F+Append+the+new+element+to+slider+container%0A++++++++activeSlider.appendChild%28newDiv%29%3B%0A++++%7D%0A%7D%0A%0A%2F*+%0A+*+Configure+the+slider+for+discrete+steps.%0A+*%2F%0Afunction+configureDiscreteSlider%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B+%2F%2F+Slider+widget%0A++++const+minValue+%3D+parseInt%28Widget.props.min_value%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28Widget.props.max_value%2C+10%29%3B%0A++++const+stepValueParam+%3D+Widget.props.step_value%3B%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A%0A++++const+stepValue+%3D+parseInt%28stepValueParam%2C+10%29%3B%0A++++if+%28isNaN%28minValue%29+%7C%7C+isNaN%28maxValue%29+%7C%7C+isNaN%28stepValue%29+%7C%7C+stepValue+%3C%3D+0%29+%7B%0A++++++++console.error%28%22Invalid+min%2C+max%2C+or+step+values%22%29%3B%0A++++++++return%3B%0A++++%7D%0A%0A++++%2F%2F+Set+slider%27s+min%2C+max%2C+and+step+attributes%0A++++slider.min+%3D+minValue%3B%0A++++slider.max+%3D+maxValue%3B%0A++++slider.step+%3D+stepValue%3B%0A%0A++++%2F%2F+Ensure+slider+value+is+within+the+range%0A++++if+%28isNaN%28initialValue%29+%7C%7C+initialValue+%3C+minValue+%7C%7C+initialValue+%3E+maxValue%29+%7B%0A++++++++console.error%28%22Slider+value+is+out+of+range%22%29%3B%0A++++++++slider.datavalue+%3D+minValue%3B+%2F%2F+Default+to+minValue+if+the+provided+value+is+invalid%0A++++%7D+else+%7B%0A++++++++slider.datavalue+%3D+initialValue%3B+%2F%2F+Set+the+slider+to+the+provided+value%0A++++%7D%0A%0A++++%2F%2F+Set+initial+position%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28slider.datavalue%29%29+%2B+%27%25%27%29%3B%0A%7D%0A%0A%2F*%0A+*+Update+the+labels+displayed+on+the+slider.%0A+*%2F%0Afunction+updateSteps%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labelContainer+%3D+Widget.Widgets.container2%3B%0A%0A++++if+%28slider+%26%26+labelContainer%29+%7B%0A++++++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+numSteps+%3D+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29%3B%0A%0A++++++++%2F%2F+Clear+existing+labels%0A++++++++labelContainer.%24element%5B0%5D.innerHTML+%3D+%27%27%3B%0A%0A++++++++%2F%2F+Create+and+position+labels+for+each+step%0A++++++++for+%28let+i+%3D+0%3B+i+%3C%3D+numSteps%3B+i%2B%2B%29+%7B%0A++++++++++++const+stepLabel+%3D+document.createElement%28%27p%27%29%3B%0A++++++++++++stepLabel.className+%3D+%27step-label%27%3B%0A++++++++++++const+labelValue+%3D+minValue+%2B+%28i+*+stepValue%29%3B%0A%0A++++++++++++%2F%2F+Ensure+labelValue+does+not+exceed+maxValue%0A++++++++++++if+%28labelValue+%3E+maxValue%29+break%3B%0A%0A++++++++++++stepLabel.textContent+%3D+labelValue%3B%0A%0A++++++++++++%2F%2F+Calculate+and+set+label+position%0A++++++++++++const+leftPosition+%3D+Math.round%28%28%28labelValue+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100+*+100%29+%2F+100%3B+%2F%2F+Rounded+to+two+decimal+places%0A++++++++++++const+adjustedPosition+%3D+leftPosition+-+1%3B%0A++++++++++++stepLabel.style.setProperty%28%27--position%27%2C+%60%24%7BadjustedPosition%7D%25%60%29%3B%0A%0A++++++++++++stepLabel.setAttribute%28%27data-position%27%2C+adjustedPosition%29%3B%0A%0A++++++++++++%2F%2F+Append+label+to+the+container%0A++++++++++++labelContainer.%24element%5B0%5D.appendChild%28stepLabel%29%3B%0A++++++++%7D%0A%0A++++++++%2F%2F+Set+container+positioning+and+add+event+listener+for+updating+label+visibility%0A++++++++labelContainer.%24element%5B0%5D.style.position+%3D+%27relative%27%3B%0A++++++++Widget.Widgets.slider1.%24element%5B0%5D.addEventListener%28%27input%27%2C+updateLabelVisibility%29%3B%0A%0A++++++++%2F%2F+Initial+update+of+label+visibility%0A++++++++updateLabelVisibility%28%29%3B%0A++++%7D%0A%7D%0A%0Afunction+updateLabelVisibility%28%29+%7B%0A++++console.log%28%27Updating+label+visibility%27%29%3B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labels+%3D+Widget.Widgets.container2.%24element%5B0%5D.getElementsByClassName%28%27step-label%27%29%3B%0A%0A++++if+%28slider%29+%7B%0A++++++++const+sliderValue+%3D+Number%28slider.datavalue%29%3B+%2F%2F+Get+the+current+slider+value%0A++++++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+targets+%3D+Array.from%28%7B%0A++++++++++++length%3A+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29+%2B+1%0A++++++++%7D%2C+%28_%2C+i%29+%3D%3E+minValue+%2B+i+*+stepValue%29.filter%28value+%3D%3E+value+%3C%3D+maxValue%29%3B%0A++++++++console.log%28%27Targets%3A%27%2C+targets%29%3B%0A++++++++console.log%28%27Slider+Value%3A%27%2C+sliderValue%29%3B%0A++++++++%2F%2F+Update+label+states+based+on+slider+value+and+targets%0A++++++++for+%28const+label+of+labels%29+%7B%0A++++++++++++const+labelValue+%3D+parseInt%28label.textContent%2C+10%29%3B%0A%0A++++++++++++%2F%2F+Remove+existing+classes%0A++++++++++++label.classList.remove%28%27hidden%27%2C+%27inactive%27%2C+%27active%27%29%3B%0A%0A++++++++++++%2F%2F+Determine+the+label%27s+state+based+on+the+slider+value%0A++++++++++++if+%28targets.includes%28labelValue%29%29+%7B%0A++++++++++++++++if+%28labelValue+%3D%3D%3D+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27hidden%27%29%3B+%2F%2F+Hide+label+if+it+matches+the+slider+value%0A++++++++++++++++%7D+else+if+%28labelValue+%3C+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27inactive%27%29%3B+%2F%2F+Label+is+inactive+if+it+is+less+than+the+slider+value%0A++++++++++++++++%7D+else+%7B%0A++++++++++++++++++++label.classList.add%28%27active%27%29%3B+%2F%2F+Label+is+active+if+it+is+greater+than+the+slider+value%0A++++++++++++++++%7D%0A++++++++++++%7D%0A%0A++++++++++++%2F%2F+Ensure+that+labels+are+visible+based+on+their+state%0A++++++++++++label.style.display+%3D+%27block%27%3B%0A++++++++%7D%0A++++%7D%0A%7D%0A%0A%2F*%0A+*+Convert+slider+value+to+percentage+based+on+min+and+max%0A+*%2F%0Afunction+getSliderPercentage%28value%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0A%2F*%0A+*+Handle+slider+value+changes.%0A+*%2F%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++console.log%28%27Slider+Change+Event%3A%27%2C+%7B%0A++++++++%24event%2C%0A++++++++widget%2C%0A++++++++newVal%2C%0A++++++++oldVal%0A++++%7D%29%3B%0A++++const+sliderValue+%3D+newVal%3B+%2F%2F+Use+the+new+slider+value%0A++++widget.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28sliderValue%29%29+%2B+%27%25%27%29%3B%0A%0A++++%2F%2F+Update+label+visibility+on+slider+change%0A++++updateLabelVisibility%28%29%3B%0A%7D%3B",
|
|
4
|
+
"styles": ".app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++--start%3A+0%25%3B%0A++++--end%3A+100%25%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center+%21important%3B%0A++++inline-size%3A+auto%3B%0A++++block-size%3A+1.25rem%3B%0A++++margin%3A+1.125rem+0%3B%0A++++flex%3A+none%3B%0A++++direction%3A+ltr%3B%0A++++flex-grow%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.vertical+%7B%0A++++flex-direction%3A+row+%21important%3B%0A++++margin%3A+.5rem+auto+%21important%3B%0A++++padding%3A+50%25+0%3B%0A++++transform%3A+rotate%28-90deg%29%3B%0A++++inline-size%3A+100%25%3B%0A%7D%0A%0A.app-container.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+12px%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A.app-container.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.discrete-slider+%7B%0A++++display%3A+flex%3B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.discrete-slider+.min-max-container+%7B%0A++++display%3A+flex%3B%0A++++justify-content%3A+space-between%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+none%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++background%3A+none%3B%0A++++z-index%3A+1%3B%0A++++padding%3A+0%3B%0A++++margin%3A+0%3B%0A++++opacity%3A+unset%3B%0A++++color%3A+unset%3B%0A++++height%3A+unset%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-webkit-slider-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-moz-range-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem%3B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A++++clip-path%3A+polygon%28calc%28var%28--start%29+-+0.5rem%29+0%2C+0+0%2C+0+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+0%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%2C+100%25+0%2C+100%25+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.active-slider+%7B%0A++++position%3A+absolute%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem+0+0+1rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++z-index%3A+0%3B%0A++++float%3A+unset%3B%0A++++vertical-align%3A+baseline%3B%0A++++inset%3A+calc%2850%25+-+0.5rem%29+var%28--end%29+auto+var%28--start%29%3B%0A++++clip-path%3A+polygon%280+0%2C+calc%28100%25+-+0.5rem%29+0%2C+calc%28100%25+-+0.5rem%29+100%25%2C+0+100%25%29%3B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+36px%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-left+%7B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-right+%7B%0A++++right%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3E+p.active-slider+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider+input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track+%7B%0A++++background%3A+unset%3B%0A++++height%3A+unset%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A%0A%2F*+Ensure+the+container+is+positioned+relatively+to+contain+absolutely+positioned+children+*%2F%0A%0A.app-container.stop-indicator+%7B%0A++++position%3A+relative%3B%0A++++box-sizing%3A+border-box%3B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A++++margin-inline%3A+auto%3B%0A%7D%0A%0A%0A%2F*+Style+for+individual+step+labels+*%2F%0A%0A.app-container.stop-indicator+.step-label+%7B%0A++++position%3A+absolute%3B%0A++++text-align%3A+center%3B%0A++++white-space%3A+nowrap%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.hidden+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.inactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.active%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%5Bdata-position%3D%2299%22%5D+%7B%0A++++--position%3A+98.5%25+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%3A%3Abefore+%7B%0A++++position%3A+absolute%3B%0A++++height%3A+4px%3B%0A++++width%3A+4px%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++content%3A+%27%27%3B%0A++++top%3A+-30px%3B%0A++++visibility%3A+visible%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A%7D",
|
|
5
|
+
"variables": "%7B+%7D",
|
|
6
|
+
"config": "%7B%0A%20%20%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20orientation%20of%20the%20widget.%20Choose%20%27Vertical%27%20for%20a%20vertical%20layout%20or%20%27Horizontal%27%20for%20a%20horizontal%20layout.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Vertical%22%2C%20%22Horizontal%22%20%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22Horizontal%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20interactivity%20of%20the%20widget.%20%27Enabled%27%20allows%20interaction%20with%20the%20widget%2C%20while%20%27Disabled%27%20makes%20the%20widget%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20text%20that%20appears%20on%20the%20widget%E2%80%99s%20label.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20initial%20value%20of%20the%20slider%20when%20the%20widget%20is%20first%20displayed.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22step_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Step%20Value%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20increment%20or%20decrement%20steps%20for%20the%20slider.%20This%20value%20controls%20the%20amount%20by%20which%20the%20slider%E2%80%99s%20value%20changes%20with%20each%20step.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%2210%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22min_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Minimum%20Value%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20smallest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22max_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Maximum%20Value%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20largest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22100%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%20%20%22onChange%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Change%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Triggered%20when%20the%20slider%E2%80%99s%20value%20changes.%20The%20function%20receives%20parameters%20including%20the%20event%2C%20the%20widget%2C%20the%20new%20value%2C%20and%20the%20previous%20value.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"
|
|
7
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var slider = {
|
|
2
2
|
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite1%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22filled-slider%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-transparent%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22button1%22+iconclass%3D%22bind%3Aprops.start_icon%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22slider1Change%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-slider%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-transparent%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22button2%22+iconclass%3D%22bind%3Aprops.end_icon%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
-
"script": "Widget.onReady+%3D+function%28%29+%7B%0A++++const+startIcon+%3D+Widget.props.start_icon%3B+%2F%2F+string%0A++++const+endIcon+%3D+Widget.props.end_icon%3B+%2F%2F+string%0A++++const+showIcons+%3D+Widget.props.show_icons%3B+%2F%2F+boolean+or+string%0A++++const+iconActions+%3D+Widget.props.icon_actions%3B+%2F%2F+boolean+or+string%0A
|
|
3
|
+
"script": "Widget.onReady+%3D+function%28%29+%7B%0A++++%2F%2F+Retrieve+parameters+from+Widget.props%0A++++const+startIcon+%3D+Widget.props.start_icon%3B+%2F%2F+string%0A++++const+endIcon+%3D+Widget.props.end_icon%3B+%2F%2F+string%0A++++const+showIcons+%3D+Widget.props.show_icons%3B+%2F%2F+boolean+or+string%0A++++const+iconActions+%3D+Widget.props.icon_actions%3B+%2F%2F+boolean+or+string%0A++++const+datavalue+%3D+Widget.props.value%3B+%2F%2F+initial+slider+value%0A%0A++++%2F%2F+Convert+showIcons+and+iconActions+to+boolean+values%0A++++const+showIconsBool+%3D+%28showIcons+%3D%3D%3D+true+%7C%7C+showIcons+%3D%3D%3D+%27true%27%29%3B%0A++++const+iconActionsBool+%3D+%28iconActions+%3D%3D%3D+true+%7C%7C+iconActions+%3D%3D%3D+%27true%27%29%3B%0A%0A++++%2F%2F+Set+slider+layout+based+on+the+layout+parameter%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22Vertical%22%29+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+vertical%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D%0A++++%2F%2F+Handle+icon+visibility+and+pointer+events%0A++++if+%28showIconsBool%29+%7B%0A++++++++%2F%2F+Icons+should+be+displayed%0A++++++++if+%28startIcon%29+%7B%0A++++++++++++Widget.Widgets.button1.class+%2B%3D+%27+start-icon%27%3B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.display+%3D+%27inline-block%27%3B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.pointerEvents+%3D+iconActionsBool+%3F+%27auto%27+%3A+%27none%27%3B%0A++++++++%7D%0A++++++++if+%28endIcon%29+%7B%0A++++++++++++Widget.Widgets.button2.class+%2B%3D+%27+end-icon%27%3B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.display+%3D+%27inline-block%27%3B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.pointerEvents+%3D+iconActionsBool+%3F+%27auto%27+%3A+%27none%27%3B%0A++++++++%7D%0A++++%7D+else+%7B%0A++++++++%2F%2F+Icons+should+be+hidden%0A++++++++if+%28startIcon%29+%7B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.display+%3D+%27none%27%3B%0A++++++++%7D%0A++++++++if+%28endIcon%29+%7B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.display+%3D+%27none%27%3B%0A++++++++%7D%0A++++%7D%0A%0A++++%2F%2F+Initialize+slider+value+and+set+the+CSS+property%0A++++if+%28datavalue+%21%3D%3D+undefined%29+%7B%0A++++++++Widget.Widgets.slider1.datavalue+%3D+Number%28datavalue%29%3B%0A++++%7D%0A++++const+initialSliderVal+%3D+%28100+-+Number%28Widget.Widgets.slider1.datavalue%29%29+%2B+%27%25%27%3B%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+initialSliderVal%29%3B%0A%0A++++%2F%2F+Bind+click+events+to+buttons+to+move+the+slider%0A++++Widget.Widgets.button1.%24element%5B0%5D.addEventListener%28%27click%27%2C+function%28%29+%7B%0A++++++++moveSlider%28-1%29%3B+%2F%2F+Move+slider+left%0A++++%7D%29%3B%0A%0A++++Widget.Widgets.button2.%24element%5B0%5D.addEventListener%28%27click%27%2C+function%28%29+%7B%0A++++++++moveSlider%281%29%3B+%2F%2F+Move+slider+right%0A++++%7D%29%3B%0A%7D%3B%0A%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++const+sliderValue+%3D+%28100+-+newVal%29+%2B+%27%25%27%3B%0A++++widget.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+sliderValue%29%3B%0A%7D%3B%0A%0A%2F%2F+Function+to+move+the+slider%0Afunction+moveSlider%28direction%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++let+newValue+%3D+Number%28slider.datavalue%29+%2B+direction%3B%0A%0A++++%2F%2F+Ensure+the+slider+value+stays+within+its+range%0A++++if+%28newValue+%3C+slider.min%29+newValue+%3D+slider.min%3B%0A++++if+%28newValue+%3E+slider.max%29+newValue+%3D+slider.max%3B%0A%0A++++%2F%2F+Update+the+slider+value%0A++++slider.datavalue+%3D+newValue%3B%0A++++Widget.slider1Change%28null%2C+slider%2C+newValue%2C+slider.datavalue%29%3B%0A%7D",
|
|
4
4
|
"styles": ".app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++--start%3A+0%25%3B%0A++++--end%3A+100%25%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center+%21important%3B%0A++++inline-size%3A+auto%3B%0A++++block-size%3A+1.25rem%3B%0A++++margin%3A+1.125rem+0%3B%0A++++flex%3A+none%3B%0A++++direction%3A+ltr%3B%0A++++flex-grow%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.vertical+%7B%0A++++flex-direction%3A+row+%21important%3B%0A++++margin%3A+.5rem+auto+%21important%3B%0A++++padding%3A+50%25+0%3B%0A++++transform%3A+rotate%28-90deg%29%3B%0A++++inline-size%3A+100%25%3B%0A%7D%0A%0A.app-container.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+12px%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A.app-container.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider+.app-button+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.filled-slider.continous-slider+%7B%0A++++display%3A+flex%3B%0A%7D%0A%0A.app-container.filled-slider+.app-button.start-icon%2C%0A.app-container.filled-slider+.app-button.end-icon+%7B%0A++++display%3A+flex%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+none%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++background%3A+none%3B%0A++++z-index%3A+1%3B%0A++++padding%3A+0%3B%0A++++margin%3A+0%3B%0A++++opacity%3A+unset%3B%0A++++color%3A+unset%3B%0A++++height%3A+unset%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-webkit-slider-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-moz-range-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem%3B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A++++clip-path%3A+polygon%28calc%28var%28--start%29+-+0.5rem%29+0%2C+0+0%2C+0+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+0%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%2C+100%25+0%2C+100%25+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Espan.pull-right+%7B%0A++++position%3A+absolute%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem+0+0+1rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++z-index%3A+0%3B%0A++++float%3A+unset%3B%0A++++vertical-align%3A+baseline%3B%0A++++inset%3A+calc%2850%25+-+0.5rem%29+var%28--end%29+auto+var%28--start%29%3B%0A++++clip-path%3A+polygon%280+0%2C+calc%28100%25+-+0.5rem%29+0%2C+calc%28100%25+-+0.5rem%29+100%25%2C+0+100%25%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Espan.pull-right+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider+input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track+%7B%0A++++background%3A+unset%3B%0A++++height%3A+unset%3B%0A++++position%3A+relative%3B%0A%7D",
|
|
5
5
|
"variables": "%7B+%7D",
|
|
6
|
-
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20orientation%20of%20the%20widget.%20%27Vertical%27%20means%20the%20widget%20is%20oriented%20vertically%2C%20while%20%27Horizontal%27%20means%20it%20is%20oriented%20horizontally.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Vertical%22%2C%20%22Horizontal%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20whether%20the%20widget%20is%20interactive%20or%20not.%20%27Enabled%27%20means%20the%20widget%20is%20interactive%20and%20functional%2C%20while%20%27Disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20text%20displayed%20on%20the%20label%20of%20the%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_icons%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20icons%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20icons%20will%20be%20shown.%20When%20false%2C%20icons%20will%20be%20hidden.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22start_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Start%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20start%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22end_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22End%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20end%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon_actions%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Icon%20Actions%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20the%20icons%20on%20the%20widget%20are%20interactive.%20When%20set%20to%20true%2C%20icons%20will%20respond%20to%20user%20actions%20(e.g.%2C%20clicks).%20When%20false%2C%20icons%20will%20be%20displayed%20but%20not%20interactive.%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20default%20value%20for%20the%20slider.%20This%20value%20is%20used%20when%20the%20widget%20is%20initially%20rendered.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22onChange%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Change%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20orientation%20of%20the%20widget.%20%27Vertical%27%20means%20the%20widget%20is%20oriented%20vertically%2C%20while%20%27Horizontal%27%20means%20it%20is%20oriented%20horizontally.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Vertical%22%2C%20%22Horizontal%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20whether%20the%20widget%20is%20interactive%20or%20not.%20%27Enabled%27%20means%20the%20widget%20is%20interactive%20and%20functional%2C%20while%20%27Disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20text%20displayed%20on%20the%20label%20of%20the%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_icons%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20icons%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20icons%20will%20be%20shown.%20When%20false%2C%20icons%20will%20be%20hidden.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22start_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Start%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20start%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22end_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22End%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20end%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon_actions%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Icon%20Actions%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20the%20icons%20on%20the%20widget%20are%20interactive.%20When%20set%20to%20true%2C%20icons%20will%20respond%20to%20user%20actions%20(e.g.%2C%20clicks).%20When%20false%2C%20icons%20will%20be%20displayed%20but%20not%20interactive.%22%2C%0A%20%20%20%20%20%20%22value%22%3A%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20default%20value%20for%20the%20slider.%20This%20value%20is%20used%20when%20the%20widget%20is%20initially%20rendered.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22onChange%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Change%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
Widget.onReady = function () {
|
|
2
|
+
// Retrieve parameters from Widget.props
|
|
2
3
|
var startIcon = Widget.props.start_icon; // string
|
|
3
4
|
var endIcon = Widget.props.end_icon; // string
|
|
4
5
|
var showIcons = Widget.props.show_icons; // boolean or string
|
|
5
6
|
var iconActions = Widget.props.icon_actions; // boolean or string
|
|
7
|
+
var datavalue = Widget.props.value; // initial slider value
|
|
8
|
+
// Convert showIcons and iconActions to boolean values
|
|
9
|
+
var showIconsBool = (showIcons === true || showIcons === 'true');
|
|
10
|
+
var iconActionsBool = (iconActions === true || iconActions === 'true');
|
|
11
|
+
// Set slider layout based on the layout parameter
|
|
6
12
|
if (Widget.props.layout === "Vertical") {
|
|
7
13
|
Widget.Widgets.slider1.class += ' vertical';
|
|
8
14
|
}
|
|
9
15
|
else {
|
|
10
16
|
Widget.Widgets.slider1.class += ' horizontal';
|
|
11
17
|
}
|
|
12
|
-
//
|
|
13
|
-
var showIconsBool = (showIcons === true || showIcons === 'true');
|
|
14
|
-
var iconActionsBool = (iconActions === true || iconActions === 'true');
|
|
15
|
-
// Handle icon visibility and pointer events based on showIcons and iconActions
|
|
18
|
+
// Handle icon visibility and pointer events
|
|
16
19
|
if (showIconsBool) {
|
|
17
20
|
// Icons should be displayed
|
|
18
21
|
if (startIcon) {
|
|
@@ -36,6 +39,9 @@ Widget.onReady = function () {
|
|
|
36
39
|
}
|
|
37
40
|
}
|
|
38
41
|
// Initialize slider value and set the CSS property
|
|
42
|
+
if (datavalue !== undefined) {
|
|
43
|
+
Widget.Widgets.slider1.datavalue = Number(datavalue);
|
|
44
|
+
}
|
|
39
45
|
var initialSliderVal = (100 - Number(Widget.Widgets.slider1.datavalue)) + '%';
|
|
40
46
|
Widget.Widgets.slider1.$element[0].style.setProperty("--end", initialSliderVal);
|
|
41
47
|
// Bind click events to buttons to move the slider
|