@wavemaker/custom-widgets-m3 12.0.0-next.45050 → 12.0.0-next.45055
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 -1
- custom-widgets-m3/index.js +1 -1
- custom-widgets-m3/package.json +1 -1
- custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +2 -0
- custom-widgets-m3/src/discrete_slider/discrete_slider.js +3 -1
- custom-widgets-m3/src/discrete_slider/page.min.js +1 -1
- custom-widgets-m3/src/input_chip/page.min.js +1 -1
- custom-widgets-m3/src/progressbar/page.min.js +1 -1
- custom-widgets-m3/src/slider/page.min.js +4 -4
- custom-widgets-m3/src/slider/slider.d.ts +11 -1
- custom-widgets-m3/src/slider/slider.js +110 -60
- custom-widgets-m3/src/textfield/page.min.js +3 -3
- custom-widgets-m3/src/textfield/textfield.d.ts +4 -4
- custom-widgets-m3/src/textfield/textfield.js +33 -26
- custom-widgets-m3/src/switch/switch.d.ts +0 -0
- custom-widgets-m3/src/switch/switch.js +0 -61
- /custom-widgets-m3/src/{switch → switch_button}/page.min.d.ts +0 -0
- /custom-widgets-m3/src/{switch → switch_button}/page.min.js +0 -0
- /custom-widgets-m3/src/{switch → switch_button}/switch_button.d.ts +0 -0
- /custom-widgets-m3/src/{switch → switch_button}/switch_button.js +0 -0
custom-widgets-m3/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export * from './src/icon_button/page.min';
|
|
|
5
5
|
export * from './src/input_chip/page.min';
|
|
6
6
|
export * from './src/payee_list/page.min';
|
|
7
7
|
export * from './src/radio_set/page.min';
|
|
8
|
-
export * from './src/
|
|
8
|
+
export * from './src/switch_button/page.min';
|
|
9
9
|
export * from './src/slider/page.min';
|
|
10
10
|
export * from './src/progressbar/page.min';
|
|
11
11
|
export * from './src/discrete_slider/page.min';
|
custom-widgets-m3/index.js
CHANGED
|
@@ -5,7 +5,7 @@ export * from './src/icon_button/page.min';
|
|
|
5
5
|
export * from './src/input_chip/page.min';
|
|
6
6
|
export * from './src/payee_list/page.min';
|
|
7
7
|
export * from './src/radio_set/page.min';
|
|
8
|
-
export * from './src/
|
|
8
|
+
export * from './src/switch_button/page.min';
|
|
9
9
|
export * from './src/slider/page.min';
|
|
10
10
|
export * from './src/progressbar/page.min';
|
|
11
11
|
export * from './src/discrete_slider/page.min';
|
custom-widgets-m3/package.json
CHANGED
|
@@ -2,7 +2,9 @@ declare function handleValueChange(): void;
|
|
|
2
2
|
declare function handleStepValueChange(): void;
|
|
3
3
|
declare function handleRequiredChange(): void;
|
|
4
4
|
declare function activeSliderElement(): void;
|
|
5
|
+
declare function activeSliderElement(widgetMap: any): void;
|
|
5
6
|
declare function configureDiscreteSlider(): void;
|
|
6
7
|
declare function updateSteps(): void;
|
|
7
8
|
declare function updateLabelVisibility(): void;
|
|
8
9
|
declare function getSliderPercentage(value: any): number;
|
|
10
|
+
declare function getSliderPercentage(value: any): number;
|
|
@@ -17,6 +17,8 @@ function handleRequiredChange() {
|
|
|
17
17
|
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
18
18
|
switch (propname) {
|
|
19
19
|
case 'prop-value':
|
|
20
|
+
case 'prop-min_value':
|
|
21
|
+
case 'prop-max_value':
|
|
20
22
|
handleValueChange();
|
|
21
23
|
break;
|
|
22
24
|
case 'prop-step_value':
|
|
@@ -30,9 +32,9 @@ Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
|
30
32
|
Widget.onReady = function () {
|
|
31
33
|
Widget.Widgets.container1.class += ' filled-slider discrete-slider';
|
|
32
34
|
handleValueChange();
|
|
33
|
-
handleStepValueChange();
|
|
34
35
|
handleRequiredChange();
|
|
35
36
|
configureDiscreteSlider();
|
|
37
|
+
handleStepValueChange();
|
|
36
38
|
updateSteps();
|
|
37
39
|
activeSliderElement();
|
|
38
40
|
updateLabelVisibility(); // Update label visibility based on initial value
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var discrete_slider = {
|
|
2
2
|
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+class%3D%22slider-composite%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": "function+handleValueChange%28%29+%7B%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++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleStepValueChange%28%29+%7B%0A++++Widget.Widgets.slider1.step+%3D+Widget.props.step_value%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28%29+%7B%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-value%27%3A%0A++++++++++++handleValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++handleStepValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++Widget.Widgets.container1.class+%2B%3D+%27+filled-slider+discrete-slider%27%3B%0A++++handleValueChange%28%29%0A++++handleRequiredChange%28%29%0A++++configureDiscreteSlider%28%29%3B%0A++++handleStepValueChange%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%7D%3B%0A%0A%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++++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++++++++%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++++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",
|
|
3
|
+
"script": "function+handleValueChange%28%29+%7B%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++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleStepValueChange%28%29+%7B%0A++++Widget.Widgets.slider1.step+%3D+Widget.props.step_value%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28%29+%7B%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-value%27%3A%0A++++++++case+%27prop-min_value%27%3A%0A++++++++case+%27prop-max_value%27%3A%0A++++++++++++handleValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++handleStepValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++Widget.Widgets.container1.class+%2B%3D+%27+filled-slider+discrete-slider%27%3B%0A++++handleValueChange%28%29%0A++++handleRequiredChange%28%29%0A++++configureDiscreteSlider%28%29%3B%0A++++handleStepValueChange%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%7D%3B%0A%0A%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++++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++++++++%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++++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
4
|
"styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%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++++width%3A+100%25%3B%0A%7D%0A%0A.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++++width%3A+100%25%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%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%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-color-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.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
5
|
"variables": "%7B+%7D",
|
|
6
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%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%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%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%22Defines%20the%20text%20that%20appears%20on%20the%20widget%E2%80%99s%20label.%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%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%20initial%20value%20of%20the%20slider%20when%20the%20widget%20is%20first%20displayed.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22step_value%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%22Step%20Value%22%2C%0A%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%22value%22%20%3A%20%2210%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22min_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Minimum%20Value%22%2C%0A%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%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22max_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Maximum%20Value%22%2C%0A%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%22value%22%20%3A%20%22100%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%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%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"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var input_chip = {
|
|
2
2
|
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22chip%22+class%3D%22input-chip%22+on-click%3D%22chipClick%28%24event%2C+widget%29%22%3E%0A++++++++%3Cwm-container+name%3D%22state-layer%22+class%3D%22state-layer%22%3E%0A++++++++++++%3Cwm-icon+name%3D%22displayIcon%22+iconclass%3D%22bind%3Aprops.configuration.toLowerCase%28%29.includes%28%26quot%3Bicon%26quot%3B%29+%3F+props.leading_icon_class+%3A+%26quot%3Bfa+fa-user%26quot%3B%22+show%3D%22bind%3Aprops.configuration.toLowerCase%28%29.includes%28%26quot%3Bicon%26quot%3B%29%22+class%3D%22leading_icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3Cwm-container+name%3D%22monogramContent%22+show%3D%22bind%3Aprops.configuration.toLowerCase%28%29.includes%28%26quot%3Bavatar%26quot%3B%29%22%3E%0A++++++++++++++++%3Cwm-picture+name%3D%22pictureCase%22+class%3D%22avatarDisplay%22+picturesource%3D%22bind%3Aprops.picture_source%22%3E%3C%2Fwm-picture%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-label+padding%3D%22unset%22+class%3D%22p+main-label%22+type%3D%22p%22+name%3D%22displayLabel%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++++++%3Cwm-button+class%3D%22icon-button%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22closeIcon%22+iconclass%3D%22fa+fa-close%22+show%3D%22bind%3Aprops.show_closing_icon%22+on-click%3D%22button1Click%28%24event%2C+widget%29%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
3
|
script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A%0A++++if+%28Widget.props.selected.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%22true%22%29+%7B%0A++++++++Widget.Widgets.chip.class+%2B%3D+%22+selected%22%3B%0A++++%7D%0A%0A++++if+%28Widget.props.configuration.toString%28%29.toLowerCase%28%29.includes%28%22avatar%22%29%29+%7B%0A++++++++Widget.Widgets.chip.class+%2B%3D+%22+rounded%22%3B%0A++++%7D%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A%7D%3B%0AWidget.button1Click+%3D+function%28%24event%2C+widget%29+%7B%0A++++Widget.Widgets.chip.class+%2B%3D+%22+clear%22%3B%0A%7D%3B%0AWidget.chipClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++const+isSelected+%3D+Widget.Widgets.chip.class.split%28%22+%22%29.includes%28%22selected%22%29%3B%0A++++if+%28%21isSelected%29+%7B%0A++++++++Widget.Widgets.chip.class+%2B%3D+%22+selected%22%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.chip.class+%3D+Widget.Widgets.chip.class.split%28%22+%22%29.filter%28%28val%29+%3D%3E+val+%21%3D%3D+%22selected%22%29.join%28%22+%22%29%3B%0A++++%7D%0A%7D%3B",
|
|
4
|
-
styles: ".input-chip
|
|
4
|
+
styles: ".input-chip%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20border-radius%3A%20var(--wm-radius-sm)%3B%0A%20%20%20%20border%3A%201px%20solid%20var(--wm-color-outline)%3B%0A%20%20%20%20color%3A%20var(--wm-on-surface-variant)%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20max-width%3A%20fit-content%3B%0A%7D%0A%0Ap.main-label%20%7B%0A%20%20%20%20font-family%3A%20var(--wm-label-large-font-family)%3B%0A%20%20%20%20font-size%3A%20var(--wm-label-large-font-size)%3B%0A%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20font-weight%3A%20var(--wm-label-large-font-weight)%3B%0A%20%20%20%20line-height%3A%20var(--wm-label-large-line-height)%3B%0A%20%20%20%20letter-spacing%3A%20var(--wm-label-large-letter-spacing)%3B%0A%20%20%20%20margin%3A%20var(--wm-space-0)%3B%0A%7D%0A%0A.input-chip%3Ahover%20%7B%0A%20%20%20%20background%3A%20var(--wm-color-surface)%3B%0A%7D%0A%0A.input-chip.selected%20%7B%0A%20%20%20%20background%3A%20var(--wm-color-secondary-container)%3B%0A%7D%0A%0A.state-layer%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20border-radius%3A%20var(--wm-radius-sm)%3B%0A%20%20%20%20padding%3A%20calc(var(--wm-rule-space)%20*%201.5)%20var(--wm-space-2)%3B%0A%20%20%20%20gap%3A%20var(--wm-space-2)%3B%0A%7D%0A%0A.state-layer%3Ahover%20%7B%0A%20%20%20%20background%3A%20var(--wm-state-on-surface-variant-hover)%3B%0A%7D%0A%0A.rounded%20.state-layer%20%7B%0A%20%20%20%20border-radius%3A%2030px%3B%0A%7D%0A%0A.selected%20%7B%0A%20%20%20%20border%3A%201px%20solid%20transparent%3B%0A%20%20%20%20border-radius%3A%20var(--wm-radius-sm)%3B%0A%20%20%20%20background%3A%20var(--wm-color-secondary-container)%3B%0A%7D%0A%0A.rounded%20%7B%0A%20%20%20%20border-radius%3A%2030px%3B%0A%7D%0A%0A.input-chip.clear%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.input-chip%20.state-layer%20.icon-button%20%7B%0A%20%20%20%20background-color%3A%20transparent%3B%0A%20%20%20%20border%3A%20var(--wm-radius-none)%3B%0A%20%20%20%20padding%3A%20var(--wm-space-0)%3B%0A%20%20%20%20min-height%3A%20fit-content%3B%0A%20%20%20%20min-width%3A%20fit-content%3B%0A%20%20%20%20font-family%3A%20var(--wm-label-large-font-family)%3B%0A%20%20%20%20font-size%3A%20var(--wm-label-large-font-size)%3B%0A%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20font-weight%3A%20var(--wm-label-large-font-weight)%3B%0A%20%20%20%20line-height%3A%20var(--wm-label-large-line-height)%3B%0A%20%20%20%20letter-spacing%3A%20var(--wm-label-large-letter-spacing)%3B%0A%20%20%20%20margin%3A%20var(--wm-space-0)%3B%0A%7D%0A%0A.input-chip%20.app-icon-wrapper%20%7B%0A%20%20%20%20overflow%3A%20visible%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.input-chip.selected%20.leading_icon%20%7B%0A%20%20%20%20color%3A%20var(--wm-color-primary)%3B%0A%7D%0A%0A.avatarDisplay%20%7B%0A%20%20%20%20height%3A%20var(--wm-space-6)%3B%0A%20%20%20%20width%3A%20var(--wm-space-6)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-radius-full)%3B%0A%20%20%20%20vertical-align%3A%20bottom%3B%0A%7D%0A",
|
|
5
5
|
variables: "%7B+%7D",
|
|
6
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%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%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22enabled%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%22configuration%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%22options%22%20%3A%20%5B%20%22Label%20only%22%2C%20%22Label%20and%20Leading%20icon%22%2C%20%22Label%20%26%20avatar%22%20%5D%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Configuration%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20only%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_closing_icon%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%20Closing%20icon%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected%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%22Selected%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%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%22%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%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%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-user%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%22picture_source%22%3A%20%7B%0A%20%20%20%20%20%20%22type%22%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%3A%20%22source%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22%22%2C%0A%20%20%20%20%20%20%22value%22%3A%20%22resources%2Fimages%2Fimagelists%2Fdefault-image.png%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%22onRender%22%20%3A%20%7B%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%20%20%20%20%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var progressbar = {
|
|
2
2
|
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22container1%22+class%3D%22progress-wrapper%22%3E%0A++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22progress-track%22%3E%0A++++++++++++%3Cwm-container+name%3D%22container3%22+class%3D%22dot%22%3E%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-container+name%3D%22container4%22+class%3D%22progress%22%3E%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-container+name%3D%22container5%22+class%3D%22progress-inactive-track%22%3E%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
3
|
script: "%2F*+*+Use+App.getDependency+for+Dependency+Injection+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B+*%2F%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A++++setTimeout%28function%28%29+%7B%0A++++++++%2F%2F+Extract+the+numeric+value+and+unit+from+progress_value++++%0A++++++++let+progressValue+%3D+Widget.props.progress%3B%0A++++++++let+numericValue+%3D+parseFloat%28progressValue%29%3B%0A++++++++let+unit+%3D+progressValue.slice%28-1%29%3B%0A%0A++++++++%2F%2F+This+will+be+%22%25%22+or+%22p%22+++++++%0A%0A++++++++%2F%2F+Check+if+the+value+is+in+percentage+or+pixels++++++++%0A%0A++++++++if+%28unit+%3D%3D%3D+%22%25%22%29+%7B%0A++++++++++++%2F%2F+Compare+if+the+percentage+value+is+equal+to+or+greater+than+100++%0A++++++++++++if+%28numericValue+%3E%3D+100%29+%7B%0A++++++++++++++++Widget.Widgets.container4.class+%2B%3D+%22+full-width%22%3B%0A++++++++++++%7D%0A++++++++%7D+else+if+%28unit+%3D%3D%3D+%22p%22%29+%7B%0A++++++++++++%2F%2F+Assume+%22px%22+value%2C+convert+to+numeric+and+compare+if+it%27s+%3E%3D+100+pixels+++%0A++++++++++++if+%28numericValue+%3E%3D+100%29+%7B%0A++++++++++++++++Widget.Widgets.container4.class+%2B%3D+%22%22%3B%0A++++++++++++%7D%0A++++++++%7D%0A++++++++%2F%2F+Apply+indeterminate+or+determinate+class+based+on+progress_type++++%0A++++++++if+%28Widget.props.progress_type+%3D%3D%3D+%22Indeterminate%22%29+%7B%0A++++++++++++Widget.Widgets.container1.class+%2B%3D+%22+indeterminate%22%3B%0A++++++++%7D+else+%7B%0A++++++++++++Widget.Widgets.container1.class+%2B%3D+%22+determinate%22%3B%0A++++++++%7D%0A++++++++%2F%2F+Set+the+progress+width+based+on+progress_value%0A++++++++Widget.Variables.staticVariable1.dataSet.dataValue+%3D+progressValue+%2B+%22%25%22%3B%0A++++++++Widget.Widgets.container2.%24element%5B0%5D.style.setProperty%28%22--progress-width%22%2C+progressValue+%2B+%22%25%22%29%3B%0A%0A++++++++let+transitionDuration+%3D+Widget.props.transition_duration+%3F+Widget.props.transition_duration+%3A+1%3B%0A++++++++console.log%28transitionDuration%29%3B%0A++++++++%2F%2F+debugger%3B%0A++++++++let+progressTrack+%3D+Widget.Widgets.container4.%24element%5B0%5D%3B%0A++++++++let+progress+%3D+Widget.Widgets.container2.%24element%5B0%5D%3B%0A++++++++let+transitionValue+%3D+%60%24%7BparseFloat%28transitionDuration%29%7Ds%60%3B%0A++++++++progress.style.setProperty%28%22--transition-duration%22%2C+transitionValue%29%3B%0A++++++++progressTrack.style.setProperty%28%22--transition-duration%22%2C+transitionValue%29%3B+%2F%2F+Apply+to+the+track+as+well%0A++++++++console.log%28%27transition+%3A%27%2C+transitionValue%29%3B%0A++++%7D%2C+500%29%3B%0A%0A%7D",
|
|
4
|
-
styles: ".app-container.progress-wrapper+%7B%0A++++display%3A+block%3B%0A
|
|
4
|
+
styles: ".app-container.progress-wrapper+%7B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+%7B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A++++gap%3A+6px%3B%0A++++height%3A+10px%3B%0A++++width%3A+100%25%3B%0A++++border-radius%3A+8px%3B%0A++++position%3A+relative%3B%0A++++overflow%3A+hidden%3B%0A++++--progress-width%3A+0%25%3B%0A++++--transition-duration%3A+0.6%25%3B%0A++++%2F*+Default+width+of+progress+*%2F%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.progress+%7B%0A++++animation%3A+progressAnimation+3s+linear+infinite%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track.app-container%3E.app-container.progress.full-width+%7B%0A++++border-top-right-radius%3A+0px%3B%0A++++border-bottom-right-radius%3A+0px%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.dot+%7B%0A++++height%3A+100%25%3B%0A++++width%3A+10px%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A++++background-color%3A+%236750A4%3B%0A++++position%3A+absolute%3B%0A++++right%3A+0%3B%0A++++z-index%3A+1%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.progress-inactive-track+%7B%0A++++background-color%3A+%23FEF7FF%3B%0A++++height%3A+100%25%3B%0A++++width%3A+calc%28100%25+-+var%28--progress-width%29%29%3B%0A++++%2F*+Full+width+initially+*%2F%0A++++border-radius%3A+8px%3B%0A++++position%3A+relative%3B%0A++++transition%3A+width+var%28--transition-duration%29+ease%3B%0A++++%2F*+transition%3A+width+0.6+ease%3B+*%2F%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.progress+%7B%0A++++background-color%3A+%236750A4%3B%0A++++height%3A+100%25%3B%0A++++width%3A+var%28--progress-width%29%3B%0A++++%2F*+Width+controlled+by+custom+property+*%2F%0A++++border-radius%3A+8px%3B%0A++++transition%3A+width+var%28--transition-duration%29+ease%3B%0A++++%2F*+transition%3A+width+0.6+ease%3B+*%2F%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.app-container.progress-track+.app-container.progress+%7B%0A++++width%3A+var%28--progress-width%29+%21important%3B%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.app-container.progress-track+.app-container.progress-inactive-track+%7B%0A++++width%3A+calc%28100%25+-+var%28--progress-width%29%29+%21important%3B%0A%7D%0A%0A%40keyframes+progressAnimation+%7B%0A++++0%25+%7B%0A++++++++width%3A+0%25%3B%0A++++%7D%0A++++20%25+%7B%0A++++++++width%3A+30%25%3B%0A++++%7D%0A++++50%25+%7B%0A++++++++width%3A+100%25%3B%0A++++%7D%0A++++60%25+%7B%0A++++++++width%3A+700%25%3B%0A++++%7D%0A++++70%25+%7B%0A++++++++width%3A+1000%25%3B%0A++++%7D%0A++++100%25+%7B%0A++++++++width%3A+50000%25%3B%0A++++%7D%0A%7D",
|
|
5
5
|
variables: "%7B%0A++%22staticVariable1%22+%3A+%7B%0A++++%22_id%22+%3A+%22wm-staticVariable1-wm.Variable-1722513387770%22%2C%0A++++%22name%22+%3A+%22staticVariable1%22%2C%0A++++%22owner%22+%3A+%22Page%22%2C%0A++++%22category%22+%3A+%22wm.Variable%22%2C%0A++++%22dataBinding%22+%3A+%5B+%7B%0A++++++%22target%22+%3A+%22dataValue%22%2C%0A++++++%22value%22+%3A+%220%25%22%0A++++%7D+%5D%2C%0A++++%22dataSet%22+%3A+%7B%0A++++++%22dataValue%22+%3A+%22%22%0A++++%7D%2C%0A++++%22type%22+%3A+%22string%22%2C%0A++++%22isList%22+%3A+false%2C%0A++++%22twoWayBinding%22+%3A+false%2C%0A++++%22saveInPhonegap%22+%3A+false%0A++%7D%2C%0A++%22staticVariable2%22+%3A+%7B%0A++++%22_id%22+%3A+%22wm-staticVariable2-wm.Variable-1722940540972%22%2C%0A++++%22name%22+%3A+%22staticVariable2%22%2C%0A++++%22owner%22+%3A+%22Page%22%2C%0A++++%22category%22+%3A+%22wm.Variable%22%2C%0A++++%22dataBinding%22+%3A+%5B+%7B%0A++++++%22target%22+%3A+%22dataValue%22%2C%0A++++++%22value%22+%3A+%220%22%0A++++%7D+%5D%2C%0A++++%22dataSet%22+%3A+%5B+%7B%0A++++++%22dataValue%22+%3A+%22%22%0A++++%7D+%5D%2C%0A++++%22type%22+%3A+%22string%22%2C%0A++++%22isList%22+%3A+true%2C%0A++++%22twoWayBinding%22+%3A+false%2C%0A++++%22saveInPhonegap%22+%3A+false%0A++%7D%0A%7D",
|
|
6
6
|
config: "%7B%0A%09%22widgetType%22%3A%20%22wm-custom-widget%22%2C%0A%09%22properties%22%3A%20%7B%0A%09%09%22progress%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Progress%22%2C%0A%09%09%09%22description%22%3A%20%22Sets%20the%20current%20progress%20of%20the%20bar.%20This%20value%20represents%20the%20percentage%20of%20completion.%22%2C%0A%09%09%09%22value%22%3A%20%220%22%0A%09%09%7D%2C%0A%09%09%22progress_type%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Progress%20Type%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20type%20of%20progress%20bar.%20Options%20include%20%27determinate%27%20for%20a%20fixed%20progress%20bar%20or%20%27indeterminate%27%20for%20an%20animated%20progress%20bar%20without%20a%20fixed%20end.%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Determinate%22%2C%20%22Indeterminate%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Determinate%22%0A%09%09%7D%2C%0A%09%09%22transition_duration%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Transition%20Duration%22%2C%0A%09%09%09%22description%22%3A%20%22Defines%20the%20duration%20of%20the%20progress%20transition%20animation.%20This%20value%20should%20be%20specified%20in%20a%20time%20format%20such%20as%20%27500ms%27%20or%20%272s%27.%22%2C%0A%09%09%09%22value%22%3A%20%223s%22%0A%09%09%7D%0A%09%7D%2C%0A%09%22events%22%3A%20%7B%7D%0A%7D%0A",
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var slider = {
|
|
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-
|
|
3
|
-
"script": "Widget.
|
|
4
|
-
"styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%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++++width%3A+100%25%3B%0A%7D%0A%0A.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%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%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-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22decrementButton%22+iconclass%3D%22bind%3Aprops.start_icon%22+on-click%3D%22decrementButtonClick%28%24event%2C+widget%29%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%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-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22incrementButton%22+iconclass%3D%22bind%3Aprops.end_icon%22+on-click%3D%22incrementButtonClick%28%24event%2C+widget%29%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.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+%7B%0A++++++++start_icon%2C%0A++++++++end_icon%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++value%3A+datavalue%2C%0A++++++++show_labels%2C%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A%0A++++switch+%28propname%29+%7B%0A++++++++case+%22prop-show_icons%22%3A%0A++++++++++++toggleIconsVisibility%28%0A++++++++++++++++showIconsBool%2C%0A++++++++++++++++start_icon%2C%0A++++++++++++++++end_icon%2C%0A++++++++++++++++iconActionsBool%2C%0A++++++++++++++++widgetMap%0A++++++++++++%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-start_icon%22%3A%0A++++++++++++updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-end_icon%22%3A%0A++++++++++++updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-value%22%3A%0A++++++++++++updateSliderValue%28datavalue%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-show_labels%22%3A%0A++++++++++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-max_value%22%3A%0A++++++++case+%22prop-min_value%22%3A%0A++++++++++++updateSliderValue%28datavalue%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++start_icon%2C%0A++++++++end_icon%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++value%3A+datavalue%2C%0A++++++++show_labels%2C%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A++++toggleIconsVisibility%28%0A++++++++showIconsBool%2C%0A++++++++start_icon%2C%0A++++++++end_icon%2C%0A++++++++iconActionsBool%2C%0A++++++++widgetMap%0A++++%29%3B%0A++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++updateSliderValue%28datavalue%2C+widgetMap%29%3B%0A++++activeSliderElement%28widgetMap%29%3B%0A%7D%3B%0A%0Afunction+convertToBoolean%28value%29+%7B%0A++++return+value+%3D%3D%3D+true+%7C%7C+value+%3D%3D%3D+%22true%22%3B%0A%7D%0A%0Afunction+updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++decrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++decrementButton.show+%3D+true%3B%0A++++decrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++incrementButton.show+%3D+true%3B%0A++++incrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+updateSliderValue%28datavalue%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++slider1%0A++++%7D+%3D+widgetMap%3B%0A%0A++++if+%28datavalue+%21%3D%3D+undefined%29+%7B%0A++++++++slider1.datavalue+%3D+Number%28datavalue%29%3B%0A++++%7D%0A++++slider1.nativeElement.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28slider1.datavalue%29%29+%2B+%27%25%27%29%3B%0A%7D%0A%0Afunction+toggleIconsVisibility%28%0A++++showIconsBool%2C%0A++++startIcon%2C%0A++++endIcon%2C%0A++++iconActionsBool%2C%0A++++widgetMap%0A%29+%7B%0A++++const+%7B%0A++++++++decrementButton%2C%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A%0A++++if+%28showIconsBool%29+%7B%0A++++++++if+%28startIcon%29+updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++if+%28endIcon%29+updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++%7D+else+%7B%0A++++++++if+%28startIcon%29+decrementButton.show+%3D+false%3B%0A++++++++if+%28endIcon%29+incrementButton.show+%3D+false%3B%0A++++%7D%0A%7D%0A%0Afunction+toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29+%7B%0A++++if+%28showLabelsBool%29+%7B%0A++++++++widgetMap.slider1.nativeElement.classList.remove%28%22hide-labels%22%29%3B%0A++++%7D+else+%7B%0A++++++++widgetMap.slider1.nativeElement.classList.add%28%22hide-labels%22%29%3B%0A++++%7D%0A%7D%0A%0Afunction+activeSliderElement%28widgetMap%29+%7B%0A++++const+activeSlider+%3D+widgetMap.slider1.nativeElement%3B+%2F%2F+Get+the+slider+element%0A++++if+%28activeSlider%29+%7B%0A++++++++%2F%2F+Create+a+new+div+element%0A++++++++const+newDiv+%3D+document.createElement%28%22p%22%29%3B%0A++++++++newDiv.className+%3D+%22active-slider%22%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+*+Convert+slider+value+to+percentage+based+on+min+and+max%0A+*%2F%0Afunction+getSliderPercentage%28value%29+%7B%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++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++const+sliderValue+%3D%0A++++++++100+-+getSliderPercentage%28newVal%29+%2B+%22%25%22%3B%0A++++widget.nativeElement.style.setProperty%28%22--end%22%2C+sliderValue%29%3B%0A%7D%3B%0A%0Afunction+moveSlider%28direction%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++slider1%0A++++%7D+%3D+widgetMap%3B%0A%0A++++let+newValue+%3D+Number%28slider1.datavalue%29+%2B+direction%3B%0A++++newValue+%3D+Math.max%28Math.min%28newValue%2C+slider1.maxvalue%29%2C+slider1.minvalue%29%3B%0A++++slider1.datavalue+%3D+newValue%3B%0A++++Widget.slider1Change%28null%2C+slider1%2C+newValue%2C+slider1.datavalue%29%3B%0A%7D%0A%0AWidget.decrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%28-1%2C+Widget.Widgets%29%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%281%2C+Widget.Widgets%29%3B%0A%7D%3B",
|
|
4
|
+
"styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%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++++width%3A+100%25%3B%0A%7D%0A%0A.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%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.continous-slider+%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%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28+--wm-color-on-surface-focus%29%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.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.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%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+24px%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.hide-labels%3E.app-slider-value.pull-left+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right+%7B%0A++++display%3A+none%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%
|
|
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%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%20%22show_labels%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%20Labels%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%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%20%3A%20%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%2C%0A%20%20%20%20%22min_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Minimum%20Value%22%2C%0A%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%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22max_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Maximum%20Value%22%2C%0A%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%22value%22%20%3A%20%22100%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%2C%0A%20%20%20%20%22onDecrement%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%20Decrement%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%22decrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22onIncrement%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%20Increment%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%22incrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
declare function
|
|
1
|
+
declare function convertToBoolean(value: any): boolean;
|
|
2
|
+
declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
|
3
|
+
declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
|
4
|
+
declare function updateSliderValue(datavalue: any, widgetMap: any): void;
|
|
5
|
+
declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
|
|
6
|
+
declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
|
|
7
|
+
declare function activeSliderElement(): void;
|
|
8
|
+
declare function activeSliderElement(widgetMap: any): void;
|
|
9
|
+
declare function getSliderPercentage(value: any): number;
|
|
10
|
+
declare function getSliderPercentage(value: any): number;
|
|
11
|
+
declare function moveSlider(direction: any, widgetMap: any): void;
|
|
@@ -1,71 +1,121 @@
|
|
|
1
|
+
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
2
|
+
var _a = Widget.props, start_icon = _a.start_icon, end_icon = _a.end_icon, show_icons = _a.show_icons, icon_actions = _a.icon_actions, datavalue = _a.value, show_labels = _a.show_labels;
|
|
3
|
+
var widgetMap = Widget.Widgets;
|
|
4
|
+
var showIconsBool = convertToBoolean(show_icons);
|
|
5
|
+
var showLabelsBool = convertToBoolean(show_labels);
|
|
6
|
+
var iconActionsBool = convertToBoolean(icon_actions);
|
|
7
|
+
switch (propname) {
|
|
8
|
+
case "prop-show_icons":
|
|
9
|
+
toggleIconsVisibility(showIconsBool, start_icon, end_icon, iconActionsBool, widgetMap);
|
|
10
|
+
break;
|
|
11
|
+
case "prop-start_icon":
|
|
12
|
+
updateStartIconVisibility(iconActionsBool, widgetMap);
|
|
13
|
+
break;
|
|
14
|
+
case "prop-end_icon":
|
|
15
|
+
updateEndIconVisibility(iconActionsBool, widgetMap);
|
|
16
|
+
break;
|
|
17
|
+
case "prop-value":
|
|
18
|
+
updateSliderValue(datavalue, widgetMap);
|
|
19
|
+
break;
|
|
20
|
+
case "prop-show_labels":
|
|
21
|
+
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
|
22
|
+
break;
|
|
23
|
+
case "prop-max_value":
|
|
24
|
+
case "prop-min_value":
|
|
25
|
+
updateSliderValue(datavalue, widgetMap);
|
|
26
|
+
break;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
1
29
|
Widget.onReady = function () {
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
30
|
+
var _a = Widget.props, start_icon = _a.start_icon, end_icon = _a.end_icon, show_icons = _a.show_icons, icon_actions = _a.icon_actions, datavalue = _a.value, show_labels = _a.show_labels;
|
|
31
|
+
var widgetMap = Widget.Widgets;
|
|
32
|
+
var showIconsBool = convertToBoolean(show_icons);
|
|
33
|
+
var showLabelsBool = convertToBoolean(show_labels);
|
|
34
|
+
var iconActionsBool = convertToBoolean(icon_actions);
|
|
35
|
+
toggleIconsVisibility(showIconsBool, start_icon, end_icon, iconActionsBool, widgetMap);
|
|
36
|
+
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
|
37
|
+
updateSliderValue(datavalue, widgetMap);
|
|
38
|
+
activeSliderElement(widgetMap);
|
|
39
|
+
};
|
|
40
|
+
function convertToBoolean(value) {
|
|
41
|
+
return value === true || value === "true";
|
|
42
|
+
}
|
|
43
|
+
function updateStartIconVisibility(iconActionsBool, widgetMap) {
|
|
44
|
+
var decrementButton = widgetMap.decrementButton;
|
|
45
|
+
decrementButton.show = true;
|
|
46
|
+
decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
47
|
+
"auto" :
|
|
48
|
+
"none";
|
|
49
|
+
}
|
|
50
|
+
function updateEndIconVisibility(iconActionsBool, widgetMap) {
|
|
51
|
+
var incrementButton = widgetMap.incrementButton;
|
|
52
|
+
incrementButton.show = true;
|
|
53
|
+
incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
54
|
+
"auto" :
|
|
55
|
+
"none";
|
|
56
|
+
}
|
|
57
|
+
function updateSliderValue(datavalue, widgetMap) {
|
|
58
|
+
var slider1 = widgetMap.slider1;
|
|
59
|
+
if (datavalue !== undefined) {
|
|
60
|
+
slider1.datavalue = Number(datavalue);
|
|
61
|
+
}
|
|
62
|
+
slider1.nativeElement.style.setProperty("--end", (100 - getSliderPercentage(slider1.datavalue)) + '%');
|
|
63
|
+
}
|
|
64
|
+
function toggleIconsVisibility(showIconsBool, startIcon, endIcon, iconActionsBool, widgetMap) {
|
|
65
|
+
var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
|
|
66
|
+
if (showIconsBool) {
|
|
67
|
+
if (startIcon)
|
|
68
|
+
updateStartIconVisibility(iconActionsBool, widgetMap);
|
|
69
|
+
if (endIcon)
|
|
70
|
+
updateEndIconVisibility(iconActionsBool, widgetMap);
|
|
14
71
|
}
|
|
15
72
|
else {
|
|
16
|
-
|
|
73
|
+
if (startIcon)
|
|
74
|
+
decrementButton.show = false;
|
|
75
|
+
if (endIcon)
|
|
76
|
+
incrementButton.show = false;
|
|
17
77
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Widget.Widgets.button1.class += ' start-icon';
|
|
23
|
-
Widget.Widgets.button1.$element[0].style.display = 'inline-block';
|
|
24
|
-
Widget.Widgets.button1.$element[0].style.pointerEvents = iconActionsBool ? 'auto' : 'none';
|
|
25
|
-
}
|
|
26
|
-
if (endIcon) {
|
|
27
|
-
Widget.Widgets.button2.class += ' end-icon';
|
|
28
|
-
Widget.Widgets.button2.$element[0].style.display = 'inline-block';
|
|
29
|
-
Widget.Widgets.button2.$element[0].style.pointerEvents = iconActionsBool ? 'auto' : 'none';
|
|
30
|
-
}
|
|
78
|
+
}
|
|
79
|
+
function toggleLabelVisibilty(showLabelsBool, widgetMap) {
|
|
80
|
+
if (showLabelsBool) {
|
|
81
|
+
widgetMap.slider1.nativeElement.classList.remove("hide-labels");
|
|
31
82
|
}
|
|
32
83
|
else {
|
|
33
|
-
|
|
34
|
-
if (startIcon) {
|
|
35
|
-
Widget.Widgets.button1.$element[0].style.display = 'none';
|
|
36
|
-
}
|
|
37
|
-
if (endIcon) {
|
|
38
|
-
Widget.Widgets.button2.$element[0].style.display = 'none';
|
|
39
|
-
}
|
|
84
|
+
widgetMap.slider1.nativeElement.classList.add("hide-labels");
|
|
40
85
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
86
|
+
}
|
|
87
|
+
function activeSliderElement(widgetMap) {
|
|
88
|
+
var activeSlider = widgetMap.slider1.nativeElement; // Get the slider element
|
|
89
|
+
if (activeSlider) {
|
|
90
|
+
// Create a new div element
|
|
91
|
+
var newDiv = document.createElement("p");
|
|
92
|
+
newDiv.className = "active-slider"; // Set a class for styling
|
|
93
|
+
// Append the new element to slider container
|
|
94
|
+
activeSlider.appendChild(newDiv);
|
|
44
95
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
Widget.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
96
|
+
}
|
|
97
|
+
/*
|
|
98
|
+
* Convert slider value to percentage based on min and max
|
|
99
|
+
*/
|
|
100
|
+
function getSliderPercentage(value) {
|
|
101
|
+
var minValue = parseInt(Widget.props.min_value, 10);
|
|
102
|
+
var maxValue = parseInt(Widget.props.max_value, 10);
|
|
103
|
+
return ((value - minValue) / (maxValue - minValue)) * 100;
|
|
104
|
+
}
|
|
55
105
|
Widget.slider1Change = function ($event, widget, newVal, oldVal) {
|
|
56
|
-
var sliderValue =
|
|
57
|
-
widget
|
|
106
|
+
var sliderValue = 100 - getSliderPercentage(newVal) + "%";
|
|
107
|
+
widget.nativeElement.style.setProperty("--end", sliderValue);
|
|
58
108
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
newValue = slider.min;
|
|
66
|
-
if (newValue > slider.max)
|
|
67
|
-
newValue = slider.max;
|
|
68
|
-
// Update the slider value
|
|
69
|
-
slider.datavalue = newValue;
|
|
70
|
-
Widget.slider1Change(null, slider, newValue, slider.datavalue);
|
|
109
|
+
function moveSlider(direction, widgetMap) {
|
|
110
|
+
var slider1 = widgetMap.slider1;
|
|
111
|
+
var newValue = Number(slider1.datavalue) + direction;
|
|
112
|
+
newValue = Math.max(Math.min(newValue, slider1.maxvalue), slider1.minvalue);
|
|
113
|
+
slider1.datavalue = newValue;
|
|
114
|
+
Widget.slider1Change(null, slider1, newValue, slider1.datavalue);
|
|
71
115
|
}
|
|
116
|
+
Widget.decrementButtonClick = function ($event, widget) {
|
|
117
|
+
moveSlider(-1, Widget.Widgets);
|
|
118
|
+
};
|
|
119
|
+
Widget.incrementButtonClick = function ($event, widget) {
|
|
120
|
+
moveSlider(1, Widget.Widgets);
|
|
121
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var textfield = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+captionposition%3D%22floating%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22labelCaption%22+caption%3D%22bind%3Aprops.label_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+class%3D%22form-field-wrapper%22+name%3D%22container2%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-leading-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonLeadingIcon%22+iconclass%3D%22bind%3Aprops.leading_icon_class%22+show%3D%22bind%3Aprops.leading_icon%22+deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-text+name%3D%22textField%22+updateon%3D%22default%22+placeholder%3D%22bind%3Aprops.placeholder_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22+disabled%3D%22bind%3Aprops.state.toLowerCase%28%29+%3D%3D+%26quot%3Bdisabled%26quot%3B%22+datavalue%3D%22bind%3Aprops.input_text%22%3E%3C%2Fwm-text%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-trailing-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonTrailingIcon%22+iconclass%3D%22bind%3Aprops.trailing_icon_class%22+on-click%3D%
|
|
3
|
-
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+captionposition%3D%22floating%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22labelCaption%22+caption%3D%22bind%3Aprops.label_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+class%3D%22form-field-wrapper%22+name%3D%22container2%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-leading-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonLeadingIcon%22+iconclass%3D%22bind%3Aprops.leading_icon_class%22+show%3D%22bind%3Aprops.leading_icon%22+deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-text+name%3D%22textField%22+updateon%3D%22default%22+placeholder%3D%22bind%3Aprops.placeholder_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22+disabled%3D%22bind%3Aprops.state.toLowerCase%28%29+%3D%3D+%26quot%3Bdisabled%26quot%3B%22+datavalue%3D%22bind%3Aprops.input_text%22%3E%3C%2Fwm-text%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-trailing-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonTrailingIcon%22+iconclass%3D%22bind%3Aprops.trailing_icon_class%22+on-click%3D%22buttonTrailingIconClick%28%24event%2C+widget%29%22+show%3D%22bind%3Aprops.trailing_icon%22+deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+class%3D%22help-wrapper%22+name%3D%22containerSupportingWrapper%22%3E%0A++++++++++++%3Cwm-label+padding%3D%22unset%22+class%3D%22p+help-block%22+type%3D%22p%22+name%3D%22labelSupportingText%22+caption%3D%22bind%3Aprops.supporting_text%22+show%3D%22bind%3Aprops.show_supporting_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
+
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27widgetMap%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27widgetMap.username.datavalue%27%0A+++++*%2F%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++leading_icon%2C%0A++++++++trailing_icon%2C%0A++++++++input_type%2C%0A++++++++required%0A++++%7D+%3D+Widget.props%0A++++handleLeadingIcon%28widgetMap%2C+leading_icon%29%3B%0A++++handleTrailingIcon%28widgetMap%2C+trailing_icon%29%3B%0A++++handleinputType%28widgetMap%2C+input_type%29%3B%0A++++handleRequired%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++leading_icon%2C%0A++++++++trailing_icon%2C%0A++++++++input_type%2C%0A++++++++required%0A++++%7D+%3D+Widget.props%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-leading_icon%27%3A%0A++++++++++++handleLeadingIcon%28widgetMap%2C+leading_icon%29%3B%0A++++++++++++break%0A++++++++case+%27prop-trailing_icon%27%3A%0A++++++++++++handleTrailingIcon%28widgetMap%2C+trailing_icon%29%3B%0A++++++++++++break%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequired%28widgetMap%2C+required%29%3B%0A++++++++++++break%0A++++++++case+%27prop-input_type%27%3A%0A++++++++++++handleinputType%28widgetMap%2C+input_type%29%3B%0A++++++++++++break%0A++++%7D%0A%7D%0A%0Afunction+handleLeadingIcon%28widgetMap%2C+leading_icon%29+%7B%0A++++widgetMap.textField.nativeElement.classList.remove%28%27with-leading-icon%27%29%3B%0A++++widgetMap.labelCaption.nativeElement.classList.remove%28%27with-leading-icon%27%29%3B%0A++++if+%28leading_icon+%3D%3D+true%29+%7B%0A++++++++widgetMap.labelCaption.class+%2B%3D+%27+with-leading-icon%27%3B%0A++++++++widgetMap.textField.class+%2B%3D+%27+with-leading-icon%27%3B%0A++++%7D%0A%7D%0A%0Afunction+handleTrailingIcon%28widgetMap%2C+trailing_icon%29+%7B%0A++++widgetMap.textField.nativeElement.classList.remove%28%27with-trailing-icon%27%29%3B%0A++++widgetMap.labelCaption.nativeElement.classList.remove%28%27with-trailing-icon%27%29%3B%0A++++if+%28trailing_icon+%3D%3D+true%29+%7B%0A++++++++widgetMap.labelCaption.class+%2B%3D+%27+with-trailing-icon%27%3B%0A++++++++widgetMap.textField.class+%2B%3D+%27+with-trailing-icon%27%3B%0A++++%7D%0A%7D%0A%0Afunction+handleRequired%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+handleinputType%28widgetMap%2C+input_type%29+%7B%0A++++widgetMap.textField.type+%3D+input_type%3B%0A%7D%0A%0AWidget.buttonTrailingIconClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++%2F%2F+Widget.invokeEvent%28%27trailingIconButtonOnClick%27%29%3B%0A%7D%3B",
|
|
4
4
|
"styles": ".wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-leading-icon+%7B%0A++++padding-left%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-trailing-icon+%7B%0A++++padding-right%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled+%7B%0A++++--wm-form-control-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++border-width%3A+0+0+1px+0%3B%0A++++border-radius%3A+var%28--wm-form-control-radius%29+var%28--wm-form-control-radius%29+0+0%3B%0A++++padding-bottom%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-focus%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled.ng-touched.ng-invalid%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+%7B%0A++++padding%3A+0%3B%0A++++background%3A+none%3B%0A++++border%3A+none%3B%0A++++min-height%3A+auto%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+.app-icon+%7B%0A++++font-size%3A+var%28--wm-icon-size-md%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-leading-icon%2C%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++position%3A+absolute%3B%0A++++z-index%3A+1%3B%0A++++top%3A+calc%28calc%28var%28--wm-form-control-height%29+-+var%28--wm-btn-icon-height%29+-+var%28--wm-btn-icon-margin%29+-+var%28--wm-btn-icon-margin%29%29+%2F+2%29%3B%0A++++left%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++left%3A+auto%3B%0A++++right%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+%7B%0A++++width%3A+100%25%3B%0A++++margin-top%3A+4px%3B%0A++++padding%3A+0+var%28--wm-form-control-padding%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block+%7B%0A++++margin%3A+0%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block.required%3Aafter+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget%3Ahas%28.form-control.ng-touched.ng-invalid%29+.help-wrapper+.help-block+%7B%0A++++--wm-help-block-color%3A+var%28--wm-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+var%28--wm-form-control-padding%29%29%3B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled+%7B%0A++++left%3A+var%28--wm-form-control-padding%29%3B%0A++++top%3A+calc%28var%28--wm-form-control-height%29*0.15%29%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled%3Abefore+%7B%0A++++background%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled.with-leading-icon+%7B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*+2.5%29+%2B+var%28--wm-icon-size-md%29%29%29%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%22style%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%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20variant%20between%20outlined%20and%20filled.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Outlined%22%2C%20%22Filled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Outlined%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%22Specifies%20whether%20the%20TextField%20is%20interactive(enabled)%20or%20non-interactive(disabled)%20state.%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%22text_configurations%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%22Text%20configurations%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Input%20text%22%2C%20%22Label%20text%22%2C%20%22Placeholder%20text%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Input%20text%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon%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%22Leading%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Leading%20Icon%2FButton.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon%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%22Trailing%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Trailing%20Icon%2FButton.%20%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_supporting_text%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%20supporting%20text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Supporting%20text(help%20text).%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%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%22Caption%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22placeholder_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%22Placeholder%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20text%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enter%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_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%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22supporting_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%22Supporting%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20supporting%20text(helper%20text)%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Supporting%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%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%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Leading%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-search%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%22trailing_icon_class%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%22Trailing%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Trailing%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%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%22input_type%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%22Input%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20input%20type%20between%20text%2C%20password%20and%20tel.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22text%22%2C%20%22password%22%2C%20%22tel%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%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%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20textfiled%20to%20be%20mandatory%20while%20submittion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%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%
|
|
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%22style%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%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20variant%20between%20outlined%20and%20filled.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Outlined%22%2C%20%22Filled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Outlined%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%22Specifies%20whether%20the%20TextField%20is%20interactive(enabled)%20or%20non-interactive(disabled)%20state.%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%22text_configurations%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%22Text%20configurations%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Input%20text%22%2C%20%22Label%20text%22%2C%20%22Placeholder%20text%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Input%20text%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon%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%22Leading%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Leading%20Icon%2FButton.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon%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%22Trailing%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Trailing%20Icon%2FButton.%20%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_supporting_text%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%20supporting%20text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Supporting%20text(help%20text).%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%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%22Caption%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22placeholder_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%22Placeholder%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20text%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enter%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_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%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22supporting_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%22Supporting%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20supporting%20text(helper%20text)%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Supporting%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%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%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Leading%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-search%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%22trailing_icon_class%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%22Trailing%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Trailing%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%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%22input_type%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%22Input%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20input%20type%20between%20text%2C%20password%20and%20tel.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22text%22%2C%20%22password%22%2C%20%22tel%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%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%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20textfiled%20to%20be%20mandatory%20while%20submittion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%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%22trailingIconButtonOnClick%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22event%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Button%20onClick%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%22buttonTrailingIconClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare function handleLeadingIcon(): void;
|
|
2
|
-
declare function handleTrailingIcon(): void;
|
|
3
|
-
declare function handleRequired(): void;
|
|
4
|
-
declare function handleinputType(): void;
|
|
1
|
+
declare function handleLeadingIcon(widgetMap: any, leading_icon: any): void;
|
|
2
|
+
declare function handleTrailingIcon(widgetMap: any, trailing_icon: any): void;
|
|
3
|
+
declare function handleRequired(widgetMap: any, required: any): void;
|
|
4
|
+
declare function handleinputType(widgetMap: any, input_type: any): void;
|
|
@@ -9,50 +9,57 @@ Widget.onReady = function () {
|
|
|
9
9
|
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
|
10
10
|
* Widget.Variables.loggedInUser.getData()
|
|
11
11
|
*
|
|
12
|
-
* widgets can be accessed through '
|
|
12
|
+
* widgets can be accessed through 'widgetMap' property here
|
|
13
13
|
* e.g. to get value of text widget named 'username' use following script
|
|
14
|
-
* '
|
|
14
|
+
* 'widgetMap.username.datavalue'
|
|
15
15
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
var widgetMap = Widget.Widgets;
|
|
17
|
+
var _a = Widget.props, leading_icon = _a.leading_icon, trailing_icon = _a.trailing_icon, input_type = _a.input_type, required = _a.required;
|
|
18
|
+
handleLeadingIcon(widgetMap, leading_icon);
|
|
19
|
+
handleTrailingIcon(widgetMap, trailing_icon);
|
|
20
|
+
handleinputType(widgetMap, input_type);
|
|
21
|
+
handleRequired(widgetMap, required);
|
|
20
22
|
};
|
|
21
23
|
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
24
|
+
var widgetMap = Widget.Widgets;
|
|
25
|
+
var _a = Widget.props, leading_icon = _a.leading_icon, trailing_icon = _a.trailing_icon, input_type = _a.input_type, required = _a.required;
|
|
22
26
|
switch (propname) {
|
|
23
27
|
case 'prop-leading_icon':
|
|
24
|
-
handleLeadingIcon();
|
|
28
|
+
handleLeadingIcon(widgetMap, leading_icon);
|
|
25
29
|
break;
|
|
26
30
|
case 'prop-trailing_icon':
|
|
27
|
-
handleTrailingIcon();
|
|
31
|
+
handleTrailingIcon(widgetMap, trailing_icon);
|
|
28
32
|
break;
|
|
29
33
|
case 'prop-required':
|
|
30
|
-
handleRequired();
|
|
34
|
+
handleRequired(widgetMap, required);
|
|
31
35
|
break;
|
|
32
36
|
case 'prop-input_type':
|
|
33
|
-
handleinputType();
|
|
37
|
+
handleinputType(widgetMap, input_type);
|
|
34
38
|
break;
|
|
35
39
|
}
|
|
36
40
|
};
|
|
37
|
-
function handleLeadingIcon() {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
function handleLeadingIcon(widgetMap, leading_icon) {
|
|
42
|
+
widgetMap.textField.nativeElement.classList.remove('with-leading-icon');
|
|
43
|
+
widgetMap.labelCaption.nativeElement.classList.remove('with-leading-icon');
|
|
44
|
+
if (leading_icon == true) {
|
|
45
|
+
widgetMap.labelCaption.class += ' with-leading-icon';
|
|
46
|
+
widgetMap.textField.class += ' with-leading-icon';
|
|
43
47
|
}
|
|
44
48
|
}
|
|
45
|
-
function handleTrailingIcon() {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
function handleTrailingIcon(widgetMap, trailing_icon) {
|
|
50
|
+
widgetMap.textField.nativeElement.classList.remove('with-trailing-icon');
|
|
51
|
+
widgetMap.labelCaption.nativeElement.classList.remove('with-trailing-icon');
|
|
52
|
+
if (trailing_icon == true) {
|
|
53
|
+
widgetMap.labelCaption.class += ' with-trailing-icon';
|
|
54
|
+
widgetMap.textField.class += ' with-trailing-icon';
|
|
51
55
|
}
|
|
52
56
|
}
|
|
53
|
-
function handleRequired() {
|
|
54
|
-
|
|
57
|
+
function handleRequired(widgetMap, required) {
|
|
58
|
+
widgetMap.composite.required = required;
|
|
55
59
|
}
|
|
56
|
-
function handleinputType() {
|
|
57
|
-
|
|
60
|
+
function handleinputType(widgetMap, input_type) {
|
|
61
|
+
widgetMap.textField.type = input_type;
|
|
58
62
|
}
|
|
63
|
+
Widget.buttonTrailingIconClick = function ($event, widget) {
|
|
64
|
+
// Widget.invokeEvent('trailingIconButtonOnClick');
|
|
65
|
+
};
|
|
File without changes
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Use App.getDependency for Dependency Injection
|
|
3
|
-
* Example:
|
|
4
|
-
* var DialogService = App.getDependency('DialogService');
|
|
5
|
-
*/
|
|
6
|
-
/* Perform any action on widgets/variables within this block */
|
|
7
|
-
Widget.onReady = function () {
|
|
8
|
-
/*
|
|
9
|
-
* Access variables through 'Widget.Variables'
|
|
10
|
-
* Example: To get data from a static variable named 'loggedInUser', use:
|
|
11
|
-
* Widget.Variables.loggedInUser.getData()
|
|
12
|
-
*
|
|
13
|
-
* Access widgets through 'Widget.Widgets'
|
|
14
|
-
* Example: To get the value of a text widget named 'username', use:
|
|
15
|
-
* Widget.Widgets.username.datavalue
|
|
16
|
-
*/
|
|
17
|
-
// Set CSS classes for the toggle widget based on the switch type
|
|
18
|
-
if (Widget.props.switch_type === "Filled") {
|
|
19
|
-
// Add 'filled-switch' and possibly 'icon' class
|
|
20
|
-
if (Widget.props.icon.toString().toLowerCase() === 'true') {
|
|
21
|
-
Widget.Widgets.toggle.class += ' filled-switch icon';
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
Widget.Widgets.toggle.class += ' filled-switch';
|
|
25
|
-
}
|
|
26
|
-
// Add 'unselected-icon' class if no unselected_icon is specified
|
|
27
|
-
if (Widget.props.unselected_icon == null || Widget.props.unselected_icon === "" || Widget.props.unselected_icon === " ") {
|
|
28
|
-
Widget.Widgets.toggle.class += ' filled-switch icon unselected-icon';
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
else if (Widget.props.switch_type === "Condensed") {
|
|
32
|
-
// Add 'condensed-switch' class
|
|
33
|
-
Widget.Widgets.toggle.class += ' condensed-switch';
|
|
34
|
-
}
|
|
35
|
-
else if (Widget.props.switch_type === "IOS") {
|
|
36
|
-
// Add 'iOS-switch' class
|
|
37
|
-
Widget.Widgets.toggle.class += ' iOS-switch';
|
|
38
|
-
}
|
|
39
|
-
// Set the 'required' property for the composite widget
|
|
40
|
-
Widget.Widgets.composite.required = Widget.props.required;
|
|
41
|
-
// Set the 'checkedvalue' and 'uncheckedvalue' properties for the toggle widget
|
|
42
|
-
Widget.Widgets.toggle.checkedvalue = Widget.props.checked_value;
|
|
43
|
-
Widget.Widgets.toggle.uncheckedvalue = Widget.props.unchecked_value;
|
|
44
|
-
// Retrieve the selected value from page parameters
|
|
45
|
-
var selectedValue = Widget.props.selected;
|
|
46
|
-
// Determine the correct 'datavalue' based on the selected value
|
|
47
|
-
if (selectedValue === Widget.Widgets.toggle.checkedvalue) {
|
|
48
|
-
// If selected value matches the checked value, set datavalue to checked value
|
|
49
|
-
Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.checkedvalue;
|
|
50
|
-
}
|
|
51
|
-
else if (selectedValue === Widget.Widgets.toggle.uncheckedvalue) {
|
|
52
|
-
// If selected value matches the unchecked value, set datavalue to unchecked value
|
|
53
|
-
Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.uncheckedvalue;
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
// Log a warning if the selected value does not match known values
|
|
57
|
-
console.warn('Selected value does not match any known value');
|
|
58
|
-
// Optionally set to a default value or handle the error
|
|
59
|
-
Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.uncheckedvalue; // Default to unchecked
|
|
60
|
-
}
|
|
61
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|