@wavemaker-ai/custom-widgets-m3 1.0.0-rc.647469
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-widgets-bundle.cjs.js +421 -0
- package/index.d.ts +12 -0
- package/index.js +12 -0
- package/npm-shrinkwrap.json +2301 -0
- package/package-lock.json +2301 -0
- package/package.json +37 -0
- package/scripts/build.d.ts +1 -0
- package/scripts/build.js +172 -0
- package/scripts/generate-pagemin.d.ts +1 -0
- package/scripts/generate-pagemin.js +111 -0
- package/scripts/update-version.d.ts +1 -0
- package/scripts/update-version.js +20 -0
- package/src/checkbox_set/checkbox_set.d.ts +10 -0
- package/src/checkbox_set/checkbox_set.js +53 -0
- package/src/checkbox_set/page.min.d.ts +7 -0
- package/src/checkbox_set/page.min.js +7 -0
- package/src/discrete_slider/discrete_slider.d.ts +25 -0
- package/src/discrete_slider/discrete_slider.js +219 -0
- package/src/discrete_slider/page.min.d.ts +7 -0
- package/src/discrete_slider/page.min.js +7 -0
- package/src/divider/divider.d.ts +4 -0
- package/src/divider/divider.js +42 -0
- package/src/divider/page.min.d.ts +7 -0
- package/src/divider/page.min.js +7 -0
- package/src/icon_button/icon_button.d.ts +0 -0
- package/src/icon_button/icon_button.js +16 -0
- package/src/icon_button/page.min.d.ts +7 -0
- package/src/icon_button/page.min.js +7 -0
- package/src/icon_button_toggleable/icon_button_toggleable.d.ts +0 -0
- package/src/icon_button_toggleable/icon_button_toggleable.js +17 -0
- package/src/icon_button_toggleable/page.min.d.ts +7 -0
- package/src/icon_button_toggleable/page.min.js +7 -0
- package/src/input_chip/input_chip.d.ts +1 -0
- package/src/input_chip/input_chip.js +29 -0
- package/src/input_chip/page.min.d.ts +7 -0
- package/src/input_chip/page.min.js +7 -0
- package/src/progressbar/page.min.d.ts +7 -0
- package/src/progressbar/page.min.js +7 -0
- package/src/progressbar/progressbar.d.ts +2 -0
- package/src/progressbar/progressbar.js +48 -0
- package/src/radio_set/page.min.d.ts +7 -0
- package/src/radio_set/page.min.js +7 -0
- package/src/radio_set/radio_set.d.ts +9 -0
- package/src/radio_set/radio_set.js +46 -0
- package/src/slider/page.min.d.ts +7 -0
- package/src/slider/page.min.js +7 -0
- package/src/slider/slider.d.ts +16 -0
- package/src/slider/slider.js +128 -0
- package/src/switch_button/page.min.d.ts +7 -0
- package/src/switch_button/page.min.js +7 -0
- package/src/switch_button/switch_button.d.ts +8 -0
- package/src/switch_button/switch_button.js +109 -0
- package/src/textfield/page.min.d.ts +7 -0
- package/src/textfield/page.min.js +7 -0
- package/src/textfield/textfield.d.ts +4 -0
- package/src/textfield/textfield.js +66 -0
- package/src/widget-registry.d.ts +6 -0
- package/src/widget-registry.js +68 -0
- package/src/wm-namespace.d.ts +11 -0
- package/src/wm-namespace.js +12 -0
- package/webpack.config.cjs.d.ts +31 -0
- package/webpack.config.cjs.js +40 -0
- package/webpack.config.d.ts +32 -0
- package/webpack.config.js +41 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export var progressbar = {
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearWrapper%22%20class%3D%22progress-linear-wrapper%22%20conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase()%20%2B%20'%20'%20%2B%20props.color.toLowerCase()%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearEndPoint%22%20conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase()%20%3D%3D%20%26quot%3Bdeterminate%26quot%3B%20%3F%20%26quot%3Bprogress-linear-stop-indicator%26quot%3B%3A%26quot%3Bprogress-linear-track-inactive%26quot%3B%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearTrackActive%22%20class%3D%22progress-linear-track-active%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearTrackInactive%22%20class%3D%22progress-linear-track-inactive%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "%2F*%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%20*%2F%0A%2F*%20perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20%2F*%0A%20%20%20%20%20*%20variables%20can%20be%20accessed%20through%20'Widget.Variables'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20dataSet%20in%20a%20staticVariable%20named%20'loggedInUser'%20use%20following%20script%0A%20%20%20%20%20*%20Widget.Variables.loggedInUser.getData()%0A%20%20%20%20%20*%0A%20%20%20%20%20*%20widgets%20can%20be%20accessed%20through%20'Widget.Widgets'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20value%20of%20text%20widget%20named%20'username'%20use%20following%20script%0A%20%20%20%20%20*%20'Widget.Widgets.username.datavalue'%0A%20%20%20%20%20*%2F%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20progress%2C%0A%20%20%20%20%20%20%20%20transition_duration%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20%2F%2F%20change%20width%20of%20progress%20and%20inactive-tracker%20%0A%20%20%20%20handleProgress(widgetMap%2C%20progress)%3B%0A%0A%20%20%20%20%2F%2F%20change%20transition%20duration%0A%20%20%20%20handleTransitionDuration(widgetMap%2C%20transition_duration)%3B%0A%7D%0A%0AWidget.onPropertyChange%20%3D%20function(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20progress%2C%0A%20%20%20%20%20%20%20%20transition_duration%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22prop-progress%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleProgress(widgetMap%2C%20progress)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-transition_duration%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleTransitionDuration(widgetMap%2C%20transition_duration)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleProgress(widgetMap%2C%20progress)%20%7B%0A%20%20%20%20let%20progressValue%20%3D%20progress%3B%0A%20%20%20%20let%20numericValue%20%3D%20parseFloat(progressValue)%3B%0A%20%20%20%20let%20progressWrapper%20%3D%20widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A%20%20%20%20progressWrapper.style.setProperty(%22gap%22%2C%20%22var(--wm-progress-linear-gap)%22)%3B%0A%20%20%20%20if%20(numericValue%20%3E%3D%20100)%20%7B%0A%20%20%20%20%20%20%20%20progressWrapper.style.setProperty(%22gap%22%2C%200)%3B%0A%20%20%20%20%7D%0A%20%20%20%20progressWrapper.style.setProperty(%22--wm-progress-linear-width-active%22%2C%20progressValue%20%2B%20%22%25%22)%3B%0A%20%20%20%20widgetMap.containerProgressLinearTrackActive.%24element%5B0%5D.setAttribute('title'%2C%20progressValue%20%2B%20%22%25%22)%3B%0A%7D%0A%0Afunction%20handleTransitionDuration(widgetMap%2C%20transition_duration)%20%7B%0A%20%20%20%20let%20transitionDuration%20%3D%20transition_duration%20%3F%20transition_duration%20%3A%201%3B%0A%20%20%20%20let%20progressWrapper%20%3D%20widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A%20%20%20%20let%20transitionValue%20%3D%20%60%24%7BparseFloat(transitionDuration)%7Ds%60%3B%0A%20%20%20%20progressWrapper.style.setProperty(%22--wm-progress-linear-transition-duration%22%2C%20transitionValue)%3B%0A%7D%0A",
|
|
4
|
+
"styles": ".app-container.progress-linear-wrapper%20%7B%0A%20%20%20%20--wm-progress-linear-width%3A%20100%25%3B%0A%20%20%20%20--wm-progress-linear-width-active%3A%200%25%3B%0A%20%20%20%20--wm-progress-linear-height%3A%204px%3B%0A%20%20%20%20--wm-progress-linear-gap%3A%204px%3B%0A%20%20%20%20--wm-progress-linear-radius%3A%208px%3B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-progress-linear-transition-duration%3A%201s%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20gap%3A%20var(--wm-progress-linear-gap)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-width)%3B%0A%20%20%20%20height%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-stop-indicator%20%7B%0A%20%20%20%20height%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background-active)%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20right%3A%200%3B%0A%20%20%20%20z-index%3A%201%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-track-inactive%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background)%3B%0A%20%20%20%20width%3A%20calc(100%25%20-%20var(--wm-progress-linear-width-active))%3B%0A%20%20%20%20%2F*%20Full%20width%20initially%20*%2F%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20transition%3A%20width%20var(--wm-progress-linear-transition-duration)%20ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-track-active%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background-active)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-width-active)%3B%0A%20%20%20%20%2F*%20Width%20controlled%20by%20custom%20property%20*%2F%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20transition%3A%20width%20var(--wm-progress-linear-transition-duration)%20ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20%7B%0A%20%20%20%20transition%3A%20none%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-inactive%3Afirst-child%20%7B%0A%20%20%20%20width%3A%200%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-start%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-inactive%3Alast-child%20%7B%0A%20%20%20%20width%3A%200%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-end%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-active%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-active%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.secondary%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-secondary)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.tertiary%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-tertiary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-tertiary)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.success%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-success-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-success)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.info%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-info-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-info)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.warning%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-warning-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-warning)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.error%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-error-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-error)%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D%0A",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-progress-bar%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22progress%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%22Progress%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20current%20progress%20of%20the%20bar.%20This%20value%20represents%20the%20percentage%20of%20completion.%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%22linear_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%22Progress%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20progress%20bar.%20Options%20include%20'determinate'%20for%20a%20fixed%20progress%20bar%20or%20'indeterminate'%20for%20an%20animated%20progress%20bar%20without%20a%20fixed%20end.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Determinate%22%2C%20%22Indeterminate%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Determinate%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22color%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%22Color%20Variant%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20color%20for%20progress%20indicator.%20Options%20include%20like%20'Success'%20for%20a%20success%20color%20progress%20indicator.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Primary%22%2C%20%22Secondary%22%2C%20%22Tertiary%22%2C%20%22Success%22%2C%20%22Info%22%2C%20%22Warning%22%2C%20%22Error%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Primary%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22transition_duration%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%22Transition%20Duration%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20duration%20of%20the%20progress%20transition%20animation.%20This%20value%20should%20be%20specified%20in%20a%20time%20format%20such%20as%20'500ms'%20or%20'2s'.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220.75s%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
|
|
7
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* * Use App.getDependency for Dependency Injection * eg: var DialogService = App.getDependency('DialogService'); */
|
|
2
|
+
/* perform any action on widgets/variables within this block */
|
|
3
|
+
Widget.onReady = function () {
|
|
4
|
+
/*
|
|
5
|
+
* variables can be accessed through 'Widget.Variables' property here
|
|
6
|
+
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
|
7
|
+
* Widget.Variables.loggedInUser.getData()
|
|
8
|
+
*
|
|
9
|
+
* widgets can be accessed through 'Widget.Widgets' property here
|
|
10
|
+
* e.g. to get value of text widget named 'username' use following script
|
|
11
|
+
* 'Widget.Widgets.username.datavalue'
|
|
12
|
+
*/
|
|
13
|
+
var _a = Widget.props, progress = _a.progress, transition_duration = _a.transition_duration;
|
|
14
|
+
var widgetMap = Widget.Widgets;
|
|
15
|
+
// change width of progress and inactive-tracker
|
|
16
|
+
handleProgress(widgetMap, progress);
|
|
17
|
+
// change transition duration
|
|
18
|
+
handleTransitionDuration(widgetMap, transition_duration);
|
|
19
|
+
};
|
|
20
|
+
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
21
|
+
var _a = Widget.props, progress = _a.progress, transition_duration = _a.transition_duration;
|
|
22
|
+
var widgetMap = Widget.Widgets;
|
|
23
|
+
switch (propname) {
|
|
24
|
+
case "prop-progress":
|
|
25
|
+
handleProgress(widgetMap, progress);
|
|
26
|
+
break;
|
|
27
|
+
case "prop-transition_duration":
|
|
28
|
+
handleTransitionDuration(widgetMap, transition_duration);
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
function handleProgress(widgetMap, progress) {
|
|
33
|
+
var progressValue = progress;
|
|
34
|
+
var numericValue = parseFloat(progressValue);
|
|
35
|
+
var progressWrapper = widgetMap.containerProgressLinearWrapper.$element[0];
|
|
36
|
+
progressWrapper.style.setProperty("gap", "var(--wm-progress-linear-gap)");
|
|
37
|
+
if (numericValue >= 100) {
|
|
38
|
+
progressWrapper.style.setProperty("gap", 0);
|
|
39
|
+
}
|
|
40
|
+
progressWrapper.style.setProperty("--wm-progress-linear-width-active", progressValue + "%");
|
|
41
|
+
widgetMap.containerProgressLinearTrackActive.$element[0].setAttribute('title', progressValue + "%");
|
|
42
|
+
}
|
|
43
|
+
function handleTransitionDuration(widgetMap, transition_duration) {
|
|
44
|
+
var transitionDuration = transition_duration ? transition_duration : 1;
|
|
45
|
+
var progressWrapper = widgetMap.containerProgressLinearWrapper.$element[0];
|
|
46
|
+
var transitionValue = "".concat(parseFloat(transitionDuration), "s");
|
|
47
|
+
progressWrapper.style.setProperty("--wm-progress-linear-transition-duration", transitionValue);
|
|
48
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export var radio_set = {
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite1%22%20captionposition%3D%22top%22%20required%3D%22false%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-label%20class%3D%22control-label%22%20notag%3D%22true%22%20name%3D%22label1%22%20required%3D%22false%22%20caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-radioset%20height%3D%22auto%22%20name%3D%22radioset%22%20disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%20readonly%3D%22false%22%20dataset%3D%22bind%3Aprops.data_set%22%20datafield%3D%22All%20Fields%22%20required%3D%22bind%3Aprops.required%22%20usekeys%3D%22false%22%20datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-radioset%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0A%0AWidget.onPropertyChange%20%3D%20function(propName%2C%20newValue%2C%20oldValue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20layout%2C%0A%20%20%20%20%20%20%20%20label_placement%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20const%20propertyHandlers%20%3D%20%7B%0A%20%20%20%20%20%20%20%20'prop-required'%3A%20()%20%3D%3E%20handleRequiredChange(widgetMap%2C%20required)%2C%0A%20%20%20%20%20%20%20%20'prop-layout'%3A%20()%20%3D%3E%20handleLayoutChange(widgetMap%2C%20layout)%2C%0A%20%20%20%20%20%20%20%20'prop-label_placement'%3A%20()%20%3D%3E%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%0A%0A%20%20%20%20%7D%3B%0A%0A%20%20%20%20if%20(propertyHandlers%5BpropName%5D)%20%7B%0A%20%20%20%20%20%20%20%20propertyHandlers%5BpropName%5D()%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20layout%2C%0A%20%20%20%20%20%20%20%20label_placement%2C%0A%20%20%20%20%20%20%20%20default_value%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20handleLayoutChange(widgetMap%2C%20layout)%3B%0A%20%20%20%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%0A%20%20%20%20handleRequiredChange(widgetMap%2C%20required)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.default_value%3B%0A%7D%3B%0A%0A%2F%2F%20Utility%20function%20to%20manage%20class%20additions%20and%20removals%0Afunction%20updateClasses(element%2C%20classMap)%20%7B%0A%20%20%20%20Object.keys(classMap).forEach((className)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20element.classList.toggle(className%2C%20classMap%5BclassName%5D)%3B%0A%20%20%20%20%7D)%3B%0A%7D%0A%0A%0Afunction%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%20%7B%0A%20%20%20%20updateClasses(widgetMap.radioset.nativeElement%2C%20%7B%0A%20%20%20%20%20%20%20%20'top-placement'%3A%20label_placement%20%3D%3D%3D%20%22top%22%2C%0A%20%20%20%20%20%20%20%20'bottom-placement'%3A%20label_placement%20%3D%3D%3D%20%22bottom%22%2C%0A%20%20%20%20%20%20%20%20'start-placement'%3A%20label_placement%20%3D%3D%3D%20%22start%22%0A%20%20%20%20%7D)%3B%0A%7D%0A%0A%0A%0Afunction%20handleLayoutChange(widgetMap%2C%20layout)%20%7B%0A%20%20%20%20updateClasses(widgetMap.radioset.nativeElement%2C%20%7B%0A%20%20%20%20%20%20%20%20'horizontal'%3A%20layout%20%3D%3D%3D%20%22horizontal%22%2C%0A%20%20%20%20%20%20%20%20'vertical'%3A%20layout%20%3D%3D%3D%20%22vertical%22%0A%20%20%20%20%7D)%3B%0A%7D%0A%0Afunction%20handleRequiredChange(widgetMap%2C%20required)%20%7B%0A%20%20%20%20widgetMap.composite1.required%20%3D%20required%3B%0A%7D%0A",
|
|
4
|
+
"styles": ".app-radioset.list-group.inline%2C%0A.app-radioset.list-group%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%7D%0A%0A.wm-app%20.app-radio.radio%20%7B%0A%20%20%20%20width%3A%20auto%3B%0A%7D%0A%0A.app-radioset.list-group.inline.horizontal%2C%0A.app-radioset.list-group.horizontal%20%7B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%7D%0A%0A%0A%2F*%20start%20label%20placement%20styles%20%20*%2F%0A%0A.app-radioset.horizontal.start-placement%20.app-radioset-label%3E.caption%2C%0A.app-radioset.vertical.start-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-right%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.radio%3Elabel%20.caption%3Abefore%2C%0A.app-radioset.vertical.start-placement%20.radio%3Elabel%20.caption%3Abefore%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20right%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.radio%3Elabel%20.caption%3Aafter%2C%0A.app-radioset.vertical.start-placement%20.radio%3Elabel%20.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-size)%20*%200.25))%3B%0A%20%20%20%20right%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-size)%20*%200.25))%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical.start-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20right%3A%200px%3B%0A%7D%0A%0A%0A%2F*%20top%20label%20placement%20styles%20%20*%2F%0A%0A.app-radioset.top-placement%20%7B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-bottom%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%20%20%20%20min-width%3A%2020px%3B%0A%20%20%20%20padding-top%3A%20unset%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap)))%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20top%3A%20calc(calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap)))%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.wm-app%20.app-radioset.top-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20*%200.5)%20%2B%20calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap))%20%2B%20calc(var(--wm-radiobutton-size)*%200.25))%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%200px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unsetal%3B%0A%7D%0A%0A%0A%2F*%20bottom%20label%20placement%20style%20%20*%2F%0A%0A.app-radioset.top-placement%20%7B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-bottom%3A%20unset%3B%0A%20%20%20%20padding-top%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20%7B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20min-width%3A%2040px%3B%0A%20%20%20%20max-width%3A%20max-content%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.wm-app%20.app-radioset.bottom-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%200px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radio.radio%3Elabel%20.caption%3Aafter%20%7B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-top%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%20%20%20%20min-width%3A%2020px%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20margin-top%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%205px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%200px%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D",
|
|
6
|
+
"config": "%7B%0A%09%22widgetType%22%20%3A%20%22wm-radioset%22%2C%0A%09%22properties%22%20%3A%20%7B%0A%09%20%20%22layout%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Layout%22%2C%0A%09%09%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20'horizontal'%20indicates%20that%20the%20element's%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20'vertical'%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%09%09%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22horizontal%22%0A%09%20%20%7D%2C%0A%09%20%20%22state%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22State%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20'disabled'%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%09%09%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22Enabled%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_placement%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20Placement%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20the%20label's%20position%20relative%20to%20the%20component.%20Options%3A%20'top'%20(Label%20appears%20above%20the%20component)%2C%20'bottom'%20(Label%20appears%20below%20the%20component)%2C%20'start'%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%09%09%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%2C%20%22end%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22end%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_text%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%09%09%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20RadioSet%22%2C%0A%09%09%22value%22%20%3A%20%22Label%20Text%22%0A%09%20%20%7D%2C%0A%09%20%20%22data_set%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Data%20Set%20Values%22%2C%0A%09%09%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20'Option1'%2C%20'Option2'%2C%20'Option3'%22%2C%0A%09%09%22value%22%20%3A%20%22Option1%2COption2%2COption3%22%0A%09%20%20%7D%2C%0A%09%20%20%22default_value%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20'Option1'%22%2C%0A%09%09%22value%22%20%3A%20%22%22%0A%09%20%20%7D%2C%0A%09%20%20%22required%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22boolean%22%2C%0A%09%09%22displayName%22%20%3A%20%22Required%22%2C%0A%09%09%22description%22%20%3A%20%22Indicates%20whether%20the%20RadioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%09%09%22value%22%20%3A%20false%0A%09%20%20%7D%0A%09%7D%2C%0A%09%22events%22%20%3A%20%7B%20%7D%0A%20%20%7D%0A%20%20"
|
|
7
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
2
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
3
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
4
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
5
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
6
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
7
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
8
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
9
|
+
declare function handleRequiredChange(required: any, widgetMap: any): void;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Use App.getDependency for Dependency Injection
|
|
3
|
+
* eg: var DialogService = App.getDependency('DialogService');
|
|
4
|
+
*/
|
|
5
|
+
Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
|
6
|
+
var _a = Widget.props, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
|
|
7
|
+
var widgetMap = Widget.Widgets;
|
|
8
|
+
var propertyHandlers = {
|
|
9
|
+
'prop-required': function () { return handleRequiredChange(widgetMap, required); },
|
|
10
|
+
'prop-layout': function () { return handleLayoutChange(widgetMap, layout); },
|
|
11
|
+
'prop-label_placement': function () { return handleLabelPlacementChange(widgetMap, label_placement); }
|
|
12
|
+
};
|
|
13
|
+
if (propertyHandlers[propName]) {
|
|
14
|
+
propertyHandlers[propName]();
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
Widget.onReady = function () {
|
|
18
|
+
var _a = Widget.props, required = _a.required, layout = _a.layout, label_placement = _a.label_placement, default_value = _a.default_value;
|
|
19
|
+
var widgetMap = Widget.Widgets;
|
|
20
|
+
handleLayoutChange(widgetMap, layout);
|
|
21
|
+
handleLabelPlacementChange(widgetMap, label_placement);
|
|
22
|
+
handleRequiredChange(widgetMap, required);
|
|
23
|
+
Widget.getDatavalue = function () { return Widget.props.default_value; };
|
|
24
|
+
};
|
|
25
|
+
// Utility function to manage class additions and removals
|
|
26
|
+
function updateClasses(element, classMap) {
|
|
27
|
+
Object.keys(classMap).forEach(function (className) {
|
|
28
|
+
element.classList.toggle(className, classMap[className]);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function handleLabelPlacementChange(widgetMap, label_placement) {
|
|
32
|
+
updateClasses(widgetMap.radioset.nativeElement, {
|
|
33
|
+
'top-placement': label_placement === "top",
|
|
34
|
+
'bottom-placement': label_placement === "bottom",
|
|
35
|
+
'start-placement': label_placement === "start"
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function handleLayoutChange(widgetMap, layout) {
|
|
39
|
+
updateClasses(widgetMap.radioset.nativeElement, {
|
|
40
|
+
'horizontal': layout === "horizontal",
|
|
41
|
+
'vertical': layout === "vertical"
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function handleRequiredChange(widgetMap, required) {
|
|
45
|
+
widgetMap.composite1.required = required;
|
|
46
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export var slider = {
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite1%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%20class%3D%22filled-slider%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22decrementButton%22%20iconclass%3D%22bind%3Aprops.start_icon%22%20on-click%3D%22decrementButtonClick(%24event%2C%20widget)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-slider%20name%3D%22slider1%22%20class%3D%22cst-slider%22%20minvalue%3D%22bind%3Aprops.min_value%22%20maxvalue%3D%22bind%3Aprops.max_value%22%20datavalue%3D%22bind%3Aprops.value%22%20on-change%3D%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%3E%3C%2Fwm-slider%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22incrementButton%22%20iconclass%3D%22bind%3Aprops.end_icon%22%20on-click%3D%22incrementButtonClick(%24event%2C%20widget)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "Widget.onPropertyChange%20%3D%20function(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20show_icons%2C%0A%20%20%20%20%20%20%20%20icon_actions%2C%0A%20%20%20%20%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20showIconsBool%20%3D%20convertToBoolean(show_icons)%3B%0A%20%20%20%20const%20showLabelsBool%20%3D%20convertToBoolean(show_labels)%3B%0A%20%20%20%20const%20iconActionsBool%20%3D%20convertToBoolean(icon_actions)%3B%0A%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22prop-show_icons%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20toggleIconsVisibility(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widgetMap%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20showIconsBool%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20start_icon%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-start_icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-end_icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-show_labels%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-max_value%22%3A%0A%20%20%20%20%20%20%20%20case%20%22prop-min_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20show_icons%2C%0A%20%20%20%20%20%20%20%20icon_actions%2C%0A%20%20%20%20%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20const%20showIconsBool%20%3D%20convertToBoolean(show_icons)%3B%0A%20%20%20%20const%20showLabelsBool%20%3D%20convertToBoolean(show_labels)%3B%0A%20%20%20%20const%20iconActionsBool%20%3D%20convertToBoolean(icon_actions)%3B%0A%20%20%20%20toggleIconsVisibility(%0A%20%20%20%20%20%20%20%20widgetMap%2C%0A%20%20%20%20%20%20%20%20showIconsBool%2C%0A%20%20%20%20%20%20%20%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20)%3B%0A%20%20%20%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%3B%0A%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%3B%0A%20%20%20%20activeSliderElement(widgetMap)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.value%3B%0A%7D%3B%0A%0Afunction%20convertToBoolean(value)%20%7B%0A%20%20%20%20return%20value%20%3D%3D%3D%20true%20%7C%7C%20value%20%3D%3D%3D%20%22true%22%3B%0A%7D%0A%0Afunction%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20decrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20decrementButton.nativeElement.style.pointerEvents%20%3D%20iconActionsBool%20%3F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22auto%22%20%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%22none%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20false%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20incrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20incrementButton.nativeElement.style.pointerEvents%20%3D%20iconActionsBool%20%3F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22auto%22%20%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%22none%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20false%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20updateSliderValue(widgetMap%2C%20datavalue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20if%20(datavalue%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20slider1.datavalue%20%3D%20Number(datavalue)%3B%0A%20%20%20%20%7D%0A%20%20%20%20slider1.nativeElement.style.setProperty(%22--end%22%2C%20(100%20-%20getSliderPercentage(slider1.datavalue))%20%2B%20'%25')%3B%0A%7D%0A%0Afunction%20toggleIconsVisibility(%0A%20%20%20%20widgetMap%2C%0A%20%20%20%20showIconsBool%2C%0A%20%20%20%20startIcon%2C%0A%20%20%20%20endIcon%2C%0A%20%20%20%20iconActionsBool%2C%0A%0A)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20decrementButton%2C%0A%20%20%20%20%20%20%20%20incrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20false%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%20%7B%0A%20%20%20%20if%20(showLabelsBool)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider1.nativeElement.classList.remove(%22hide-labels%22)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider1.nativeElement.classList.add(%22hide-labels%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20activeSliderElement(widgetMap)%20%7B%0A%20%20%20%20const%20activeSlider%20%3D%20widgetMap.slider1.nativeElement%3B%20%2F%2F%20Get%20the%20slider%20element%0A%20%20%20%20if%20(activeSlider)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20new%20div%20element%0A%20%20%20%20%20%20%20%20const%20newDiv%20%3D%20document.createElement(%22p%22)%3B%0A%20%20%20%20%20%20%20%20newDiv.className%20%3D%20%22active-slider%22%3B%20%2F%2F%20Set%20a%20class%20for%20styling%0A%20%20%20%20%20%20%20%20%2F%2F%20Append%20the%20new%20element%20to%20slider%20container%0A%20%20%20%20%20%20%20%20activeSlider.appendChild(newDiv)%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%2F*%0A%20*%20Convert%20slider%20value%20to%20percentage%20based%20on%20min%20and%20max%0A%20*%2F%0Afunction%20getSliderPercentage(value)%20%7B%0A%20%20%20%20const%20minValue%20%3D%20parseInt(Widget.props.min_value%2C%2010)%3B%0A%20%20%20%20const%20maxValue%20%3D%20parseInt(Widget.props.max_value%2C%2010)%3B%0A%20%20%20%20return%20((value%20-%20minValue)%20%2F%20(maxValue%20-%20minValue))%20*%20100%3B%0A%7D%0A%0AWidget.slider1Change%20%3D%20function(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%20%7B%0A%20%20%20%20const%20sliderValue%20%3D%0A%20%20%20%20%20%20%20%20100%20-%20getSliderPercentage(newVal)%20%2B%20%22%25%22%3B%0A%20%20%20%20widget.nativeElement.style.setProperty(%22--end%22%2C%20sliderValue)%3B%0A%7D%3B%0A%0Afunction%20moveSlider(widgetMap%2C%20direction)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20let%20newValue%20%3D%20Number(slider1.datavalue)%20%2B%20direction%3B%0A%20%20%20%20newValue%20%3D%20Math.max(Math.min(newValue%2C%20slider1.maxvalue)%2C%20slider1.minvalue)%3B%0A%20%20%20%20slider1.datavalue%20%3D%20newValue%3B%0A%20%20%20%20Widget.slider1Change(null%2C%20slider1%2C%20newValue%2C%20slider1.datavalue)%3B%0A%7D%0A%0AWidget.decrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%20-1)%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%201)%3B%0A%7D%3B%0A",
|
|
4
|
+
"styles": ".filled-slider%20%7B%0A%20%20%20%20--wm-slider-gap%3A%20var(--wm-space-3)%3B%0A%20%20%20%20--wm-slider-height%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-slider-border-radius%3A%20var(--wm-radius-lg)%3B%0A%20%20%20%20--wm-slider-filled-active-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-slider-filled-active-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-slider-filled-background-disabled%3A%20var(--wm-color-on-surface-focus)%3B%0A%20%20%20%20--wm-slider-filled-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-slider-filled-disabled-opacity%3A%200.38%3B%0A%20%20%20%20--wm-slider-filled-thumb-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-slider-filled-thumb-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-slider-filled-thumb-width%3A%20var(--wm-space-1)%3B%0A%20%20%20%20--wm-slider-filled-thumb-height%3A%20var(--wm-space-11)%3B%0A%20%20%20%20--wm-slider-filled-thumb-border-radius%3A%20var(%20--wm-radius-xs)%3B%0A%7D%0A%0A.app-composite-widget.form-group%3Ahas(.filled-slider)%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20align-items%3A%20start%3B%0A%7D%0A%0A.app-container.filled-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20gap%3A%20var(--wm-slider-gap)%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%20%7B%0A%20%20%20%20--start%3A%200%25%3B%0A%20%20%20%20--end%3A%20100%25%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20inline-size%3A%20auto%3B%0A%20%20%20%20block-size%3A%20calc(var(--wm-slider-height)%20%2B%20var(--wm-space-1))%3B%0A%20%20%20%20margin%3A%20calc(var(--wm-slider-height)%20%2B%202px)%200%3B%0A%20%20%20%20flex%3A%20none%3B%0A%20%20%20%20direction%3A%20ltr%3B%0A%20%20%20%20flex-grow%3A%201%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider.vertical%20%7B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20margin%3A%20var(--wm-space-2)%20auto%3B%0A%20%20%20%20padding%3A%2050%25%200%3B%0A%20%20%20%20transform%3A%20rotate(-90deg)%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%7D%0A%0A.app-container.filled-slider%3Ahas(.app-slider.slider.cst-slider.vertical)%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%7D%0A%0A.app-container.filled-slider.continous-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D%20.app-container.filled-slider%20.app-slider.slider.cst-slider%20%7B%0A%20%20%20%20transform%3A%20scaleX(-1)%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-height)%3B%0A%20%20%20%20background%3A%20none%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20opacity%3A%20unset%3B%0A%20%20%20%20color%3A%20unset%3B%0A%20%20%20%20height%3A%20unset%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Aonly-of-type%20%7B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%2Binput%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-slider-filled-thumb-background)%3B%0A%20%20%20%20cursor%3A%20grab%3B%0A%20%20%20%20margin%3A%200%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-slider-filled-thumb-background)%3B%0A%20%20%20%20cursor%3A%20grab%3B%0A%20%20%20%20margin%3A%200%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive%20%7B%0A%20%20%20%20cursor%3A%20grabbing%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive%20%7B%0A%20%20%20%20cursor%3A%20grabbing%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Anot(%3Adisabled)%3Ais(%3Afocus)%3A%3A-webkit-slider-thumb%20%7B%0A%20%20%20%20transform%3A%20scaleX(0.6)%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Anot(%3Adisabled)%3Ais(%3Afocus)%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20transform%3A%20scaleX(0.6)%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Adisabled%20%7B%0A%20%20%20%20cursor%3A%20not-allowed%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20cursor%3A%20not-allowed%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3A%3Abefore%20%7B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-slider-filled-background)%3B%0A%20%20%20%20clip-path%3A%20polygon(calc(var(--start)%20-%200.5rem)%200%2C%200%200%2C%200%20100%25%2C%20calc(var(--start)%20-%200.5rem)%20100%25%2C%20calc(var(--start)%20-%200.5rem)%200%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%200%2C%20100%25%200%2C%20100%25%20100%25%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%20100%25%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%200)%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%20input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track%20%7B%0A%20%20%20%20background%3A%20unset%3B%0A%20%20%20%20height%3A%20unset%3B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3E.active-slider%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%200px%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-border-radius)%200%200%20var(--wm-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-slider-filled-active-background)%3B%0A%20%20%20%20z-index%3A%200%3B%0A%20%20%20%20float%3A%20unset%3B%0A%20%20%20%20vertical-align%3A%20baseline%3B%0A%20%20%20%20inset%3A%20calc(50%25%20-%200.5rem)%20var(--end)%20auto%20var(--start)%3B%0A%20%20%20%20clip-path%3A%20polygon(0%200%2C%20calc(100%25%20-%200.5rem)%200%2C%20calc(100%25%20-%200.5rem)%20100%25%2C%200%20100%25)%3B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%20var(--wm-space-6)%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value.pull-left%20%7B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value.pull-right%20%7B%0A%20%20%20%20right%3A%200%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-left%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.app-container.filled-slider%20.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-slider%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'Enabled'%20means%20the%20widget%20is%20interactive%20and%20functional%2C%20while%20'Disabled'%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%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%20labels%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20lables%20will%20be%20shown.%20When%20false%2C%20labels%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%22wi%20wi-minus%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%22wi%20wi-plus%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%20decreased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%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%20increased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%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
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare function convertToBoolean(value: any): boolean;
|
|
2
|
+
declare function convertToBoolean(value: any): boolean;
|
|
3
|
+
declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
4
|
+
declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
5
|
+
declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
6
|
+
declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
7
|
+
declare function updateSliderValue(widgetMap: any, datavalue: any): void;
|
|
8
|
+
declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, iconActionsBool: any): void;
|
|
9
|
+
declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any): void;
|
|
10
|
+
declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
|
|
11
|
+
declare function toggleLabelVisibilty(widgetMap: any, showLabelsBool: any): void;
|
|
12
|
+
declare function activeSliderElement(widgetMap: any): void;
|
|
13
|
+
declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
|
|
14
|
+
declare function getSliderPercentage(value: any): number;
|
|
15
|
+
declare function moveSlider(direction: any, widgetMap: any): void;
|
|
16
|
+
declare function moveSlider(widgetMap: any, direction: any): void;
|
|
@@ -0,0 +1,128 @@
|
|
|
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(widgetMap, showIconsBool, start_icon, end_icon, iconActionsBool);
|
|
10
|
+
break;
|
|
11
|
+
case "prop-start_icon":
|
|
12
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
13
|
+
break;
|
|
14
|
+
case "prop-end_icon":
|
|
15
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
16
|
+
break;
|
|
17
|
+
case "prop-value":
|
|
18
|
+
updateSliderValue(widgetMap, datavalue);
|
|
19
|
+
break;
|
|
20
|
+
case "prop-show_labels":
|
|
21
|
+
toggleLabelVisibilty(widgetMap, showLabelsBool);
|
|
22
|
+
break;
|
|
23
|
+
case "prop-max_value":
|
|
24
|
+
case "prop-min_value":
|
|
25
|
+
updateSliderValue(widgetMap, datavalue);
|
|
26
|
+
break;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
Widget.onReady = function () {
|
|
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(widgetMap, showIconsBool, start_icon, end_icon, iconActionsBool);
|
|
36
|
+
toggleLabelVisibilty(widgetMap, showLabelsBool);
|
|
37
|
+
updateSliderValue(widgetMap, datavalue);
|
|
38
|
+
activeSliderElement(widgetMap);
|
|
39
|
+
Widget.getDatavalue = function () { return Widget.props.value; };
|
|
40
|
+
};
|
|
41
|
+
function convertToBoolean(value) {
|
|
42
|
+
return value === true || value === "true";
|
|
43
|
+
}
|
|
44
|
+
function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
45
|
+
var decrementButton = widgetMap.decrementButton;
|
|
46
|
+
if (showIconsBool) {
|
|
47
|
+
decrementButton.show = true;
|
|
48
|
+
decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
49
|
+
"auto" :
|
|
50
|
+
"none";
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
decrementButton.show = false;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
57
|
+
var incrementButton = widgetMap.incrementButton;
|
|
58
|
+
if (showIconsBool) {
|
|
59
|
+
incrementButton.show = true;
|
|
60
|
+
incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
61
|
+
"auto" :
|
|
62
|
+
"none";
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
incrementButton.show = false;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
function updateSliderValue(widgetMap, datavalue) {
|
|
69
|
+
var slider1 = widgetMap.slider1;
|
|
70
|
+
if (datavalue !== undefined) {
|
|
71
|
+
slider1.datavalue = Number(datavalue);
|
|
72
|
+
}
|
|
73
|
+
slider1.nativeElement.style.setProperty("--end", (100 - getSliderPercentage(slider1.datavalue)) + '%');
|
|
74
|
+
}
|
|
75
|
+
function toggleIconsVisibility(widgetMap, showIconsBool, startIcon, endIcon, iconActionsBool) {
|
|
76
|
+
var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
|
|
77
|
+
if (showIconsBool) {
|
|
78
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
79
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
decrementButton.show = false;
|
|
83
|
+
incrementButton.show = false;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
function toggleLabelVisibilty(widgetMap, showLabelsBool) {
|
|
87
|
+
if (showLabelsBool) {
|
|
88
|
+
widgetMap.slider1.nativeElement.classList.remove("hide-labels");
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
widgetMap.slider1.nativeElement.classList.add("hide-labels");
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
function activeSliderElement(widgetMap) {
|
|
95
|
+
var activeSlider = widgetMap.slider1.nativeElement; // Get the slider element
|
|
96
|
+
if (activeSlider) {
|
|
97
|
+
// Create a new div element
|
|
98
|
+
var newDiv = document.createElement("p");
|
|
99
|
+
newDiv.className = "active-slider"; // Set a class for styling
|
|
100
|
+
// Append the new element to slider container
|
|
101
|
+
activeSlider.appendChild(newDiv);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
/*
|
|
105
|
+
* Convert slider value to percentage based on min and max
|
|
106
|
+
*/
|
|
107
|
+
function getSliderPercentage(value) {
|
|
108
|
+
var minValue = parseInt(Widget.props.min_value, 10);
|
|
109
|
+
var maxValue = parseInt(Widget.props.max_value, 10);
|
|
110
|
+
return ((value - minValue) / (maxValue - minValue)) * 100;
|
|
111
|
+
}
|
|
112
|
+
Widget.slider1Change = function ($event, widget, newVal, oldVal) {
|
|
113
|
+
var sliderValue = 100 - getSliderPercentage(newVal) + "%";
|
|
114
|
+
widget.nativeElement.style.setProperty("--end", sliderValue);
|
|
115
|
+
};
|
|
116
|
+
function moveSlider(widgetMap, direction) {
|
|
117
|
+
var slider1 = widgetMap.slider1;
|
|
118
|
+
var newValue = Number(slider1.datavalue) + direction;
|
|
119
|
+
newValue = Math.max(Math.min(newValue, slider1.maxvalue), slider1.minvalue);
|
|
120
|
+
slider1.datavalue = newValue;
|
|
121
|
+
Widget.slider1Change(null, slider1, newValue, slider1.datavalue);
|
|
122
|
+
}
|
|
123
|
+
Widget.decrementButtonClick = function ($event, widget) {
|
|
124
|
+
moveSlider(Widget.Widgets, -1);
|
|
125
|
+
};
|
|
126
|
+
Widget.incrementButtonClick = function ($event, widget) {
|
|
127
|
+
moveSlider(Widget.Widgets, 1);
|
|
128
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export var switch_button = {
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite%22%20required%3D%22false%22%20captionposition%3D%22top%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-label%20class%3D%22%20control-label%22%20notag%3D%22true%22%20name%3D%22label1%22%20caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%20class%3D%22switch-wrapper%22%20conditionalclass%3D%22bind%3A%7B'filled-switch-wrapper'%3A%20props.switch_type%20%3D%3D%3D%20%26quot%3BFilled%26quot%3B%2C%0A'condensed-switch-wrapper'%3A%20props.switch_type%20%3D%3D%3D%20%26quot%3BCondensed%26quot%3B%2C%20%20%20%20%0A'ios-switch-wrapper'%3Aprops.switch_type%20%20%3D%3D%3D%20%26quot%3BIOS%26quot%3B%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-checkbox%20caption%3D%22Toggle%22%20type%3D%22toggle%22%20name%3D%22toggle%22%20disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22%20datavalue%3D%22bind%3Aprops.selected%22%20class%3D%22switch%22%20checkedvalue%3D%22true%22%20uncheckedvalue%3D%22false%22%20required%3D%22bind%3Aprops.required%22%20show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container2%22%20class%3D%22icon-container%22%20show%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22icon1%22%20iconclass%3D%22bind%3Aprops.unselected_icon%22%20show%3D%22bind%3Aprops.unselected_icon%22%20class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22icon2%22%20iconclass%3D%22bind%3Aprops.selected_icon%22%20show%3D%22bind%3Aprops.selected_icon%22%20class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20Example%3A%0A%20*%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0AWidget.onPropertyChange%20%3D%20function(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20switch_type%2C%0A%20%20%20%20%20%20%20%20icon%2C%0A%20%20%20%20%20%20%20%20unselected_icon%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20unchecked_value%2C%0A%20%20%20%20%20%20%20%20checked_value%2C%0A%20%20%20%20%20%20%20%20selected%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22prop-switch_type%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-required%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleRequiredChange(required%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-selected%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-checked_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-unchecked_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleIconVisibiltyChange(icon%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0A%2F*%20Perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20switch_type%2C%0A%20%20%20%20%20%20%20%20icon%2C%0A%20%20%20%20%20%20%20%20unselected_icon%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20unchecked_value%2C%0A%20%20%20%20%20%20%20%20checked_value%2C%0A%20%20%20%20%20%20%20%20selected%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%3B%0A%20%20%20%20handleRequiredChange(required%2C%20widgetMap)%3B%0A%20%20%20%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%20%20%20%20handleIconVisibiltyChange(icon%2C%20widgetMap)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.selected%3B%0A%7D%3B%0A%0Afunction%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%20%7B%0A%20%20%20%20widgetMap.toggle.nativeElement.classList.remove(%0A%20%20%20%20%20%20%20%20%22filled-switch%22%2C%0A%20%20%20%20%20%20%20%20%22icon%22%2C%0A%20%20%20%20%20%20%20%20%22unselected-icon%22%2C%0A%20%20%20%20%20%20%20%20%22condensed-switch%22%2C%0A%20%20%20%20%20%20%20%20%22ios-switch%22%0A%20%20%20%20)%3B%0A%20%20%20%20%2F%2F%20Set%20CSS%20classes%20for%20the%20toggle%20widget%20based%20on%20the%20switch%20type%0A%20%20%20%20if%20(switch_type%20%3D%3D%3D%20%22Filled%22)%20%7B%0A%20%20%20%20%20%20%20%20if%20(icon.toString().toLowerCase()%20%3D%3D%3D%20%22true%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22filled-switch%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22filled-switch%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'unselected-icon'%20class%20if%20no%20unselected_icon%20is%20specified%0A%20%20%20%20%20%20%20%20if%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%20null%20%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%3D%20%22%22%20%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%3D%20%22%20%22%0A%20%20%20%20%20%20%20%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22filled-switch%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22unselected-icon%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%20else%20if%20(switch_type%20%3D%3D%3D%20%22Condensed%22)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'condensed-switch'%20class%0A%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22condensed-switch%22)%3B%0A%20%20%20%20%7D%20else%20if%20(switch_type%20%3D%3D%3D%20%22IOS%22)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'iOS-switch'%20class%0A%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22ios-switch%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleRequiredChange(required%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Set%20the%20'required'%20property%20for%20the%20composite%20widget%0A%20%20%20%20widgetMap.composite.required%20%3D%20required%3B%0A%7D%0A%0Afunction%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Set%20the%20'checkedvalue'%20and%20'uncheckedvalue'%20properties%20for%20the%20toggle%20widget%0A%20%20%20%20widgetMap.toggle.checkedvalue%20%3D%20checked_value%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%7D%0A%0Afunction%20handleIconVisibiltyChange(icon%2C%20widgetMap)%20%7B%0A%20%20%20%20if%20(icon.toString().toLowerCase()%20%3D%3D%3D%20%22true%22)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.remove(%22icon%22)%3B%0A%0A%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%20%7B%0A%20%20%20%20widgetMap.toggle.uncheckedvalue%20%3D%20unchecked_value%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%7D%0A%0Afunction%20handleSelectedValueChange(selected%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Retrieve%20the%20selected%20value%20from%20page%20parameters%0A%20%20%20%20var%20selectedValue%20%3D%20selected%3B%0A%0A%20%20%20%20%2F%2F%20Determine%20the%20correct%20'datavalue'%20based%20on%20the%20selected%20value%0A%20%20%20%20if%20(selectedValue%20%3D%3D%3D%20widgetMap.toggle.checkedvalue)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20selected%20value%20matches%20the%20checked%20value%2C%20set%20datavalue%20to%20checked%20value%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.checkedvalue%3B%0A%20%20%20%20%7D%20else%20if%20(selectedValue%20%3D%3D%3D%20widgetMap.toggle.uncheckedvalue)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20selected%20value%20matches%20the%20unchecked%20value%2C%20set%20datavalue%20to%20unchecked%20value%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.uncheckedvalue%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Log%20a%20warning%20if%20the%20selected%20value%20does%20not%20match%20known%20values%0A%20%20%20%20%20%20%20%20console.warn(%22Selected%20value%20does%20not%20match%20any%20known%20value%22)%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20Optionally%20set%20to%20a%20default%20value%20or%20handle%20the%20error%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.uncheckedvalue%3B%20%2F%2F%20Default%20to%20unchecked%0A%20%20%20%20%7D%0A%7D%0A",
|
|
4
|
+
"styles": ".switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-height%3A%2032px%3B%0A%20%20%20%20--wm-switch-width%3A%2052px%3B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-switch-border-color%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-switch-active-border-color%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-switch-border-style%3A%20solid%3B%0A%20%20%20%20--wm-switch-border-width%3A%202px%3B%0A%20%20%20%20--wm-switch-border-radius%3A%20100px%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-tranistion%3A%200.25s%20ease-in%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20calc(var(--wm-switch-height)%20-%20var(--wm-space-2))%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20calc(var(--wm-switch-height)%20-%20var(--wm-space-2))%3B%0A%20%20%20%20--wm-switch-caption-icon-size%3A%2016px%3B%0A%20%20%20%20--wm-switch-caption-state-layer-color%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-switch-condensed-height%3A%2014px%3B%0A%20%20%20%20--wm-switch-condensed-width%3A%2034px%3B%0A%20%20%20%20--wm-switch-condensed-background%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-condensed-caption-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-condensed-active-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-switch-condensed-caption-active-background%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-switch-condensed-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-condensed-caption-icon-width%3A%20var(--wm-space-5)%3B%0A%20%20%20%20--wm-switch-condensed-caption-icon-height%3A%20var(--wm-space-5)%3B%0A%20%20%20%20--wm-switch-condensed-shadow%3A%20var(--wm-elevation-shadow-1)%3B%0A%20%20%20%20--wm-switch-ios-height%3A%2026px%3B%0A%20%20%20%20--wm-switch-ios-width%3A%2042px%3B%0A%20%20%20%20--wm-switch-ios-background%3A%20%23E9E9EA%3B%0A%20%20%20%20--wm-switch-ios-border-color%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-ios-active-background%3A%20%2365C466%3B%0A%20%20%20%20--wm-switch-ios-border-radius%3A%20100px%3B%0A%20%20%20%20--wm-switch-ios-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-ios-caption-width%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-height%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-ios-caption-active-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-ios-tranistion%3A%200.25s%20ease-in%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-width%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-height%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-size%3A%2016px%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%2C%0A.condensed-switch-wrapper%20.app-checkbox%2C%0A.ios-switch-wrapper%20.app-checkbox%20%7B%0A%20%20%20%20margin%3A%200px%3B%0A%7D%0A%0A.switch-wrapper%20%7B%0A%20%20%20%20margin%3A%208px%3B%0A%7D%0A%0A.switch-wrapper%20.switch%20label%20input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper%20.switch%20label%20span.caption%2C%0A.switch-wrapper%20.switch%20label%20span.caption%3A%3Abefore%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.switch-wrapper%20.switch%20label%20%7B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20border%3A%20var(--wm-switch-border-width)%20var(--wm-switch-border-style)%20var(--wm-switch-border-color)%3B%0A%20%20%20%20background%3A%20var(--wm-switch-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-border-radius)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-height)%3B%0A%20%20%20%20min-height%3A%20var(--wm-switch-height)%3B%0A%20%20%20%20width%3A%20var(--wm-switch-width)%3B%0A%20%20%20%20user-select%3A%20none%3B%0A%20%20%20%20-webkit-tap-highlight-color%3A%20transparent%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20box-shadow%3A%20unset%3B%0A%20%20%20%20overflow%3A%20visible%3B%0A%20%20%20%20margin-block%3A%208px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.switch%20label%20%7B%0A%20%20%20%20border%3A%20var(--wm-switch-border-width)%20var(--wm-switch-border-style)%20var(--wm-switch-active-background)%3B%0A%20%20%20%20background%3A%20var(--wm-switch-active-background)%3B%0A%7D%0A%0A.switch-wrapper.icon%20.switch%20label%20%7B%0A%20%20%20%20padding%3A%200px%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-caption-border-radius)%3B%0A%20%20%20%20width%3A%20var(--wm-switch-caption-width)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-caption-height)%3B%0A%20%20%20%20min-height%3A%20var(--wm-switch-caption-height)%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20left%3A%208px%3B%0A%20%20%20%20top%3A%2016px%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20justify-content%3A%20space-between%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20padding%3A%200px%3B%0A%20%20%20%20transition%3A%20transform%200.3s%20ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%2012px%3B%0A%20%20%20%20left%3A%204px%3B%0A%20%20%20%20width%3A%20var(--wm-switch-caption-icon-width)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-caption-icon-height)%3B%0A%20%20%20%20font-size%3A%20var(--wm-switch-caption-icon-size)%3B%0A%20%20%20%20max-width%3A%20var(--wm-switch-caption-icon-width)%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-width)%20-%20var(--wm-switch-caption-width)%20-%20var(--wm-space-4)))%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Anot(%3Achecked))%20.icon-container%20span.start-icon%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20span.end-icon%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-active-background)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20min-height%3A%20100%25%3B%0A%20%20%20%20min-width%3A%20100%25%3B%0A%20%20%20%20color%3A%20var(--wm-switch-background)%3B%0A%20%20%20%20overflow%3A%20visible%3B%0A%20%20%20%20z-index%3A%2010%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20font-size%3A%20var(--wm-switch-caption-icon-size)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20color%3A%20var(--wm-switch-active-background)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%20.switch-wrapper%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20-webkit-appearance%3A%20none%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20left%3A%20-12px%3B%0A%20%20%20%20top%3A%20-12px%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20width%3A%20calc(var(--wm-switch-caption-icon-width)%20%2B%20var(--wm-space-4))%3B%0A%20%20%20%20height%3A%20calc(var(--wm-switch-caption-icon-height)%20%2B%20var(--wm-space-4))%3B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-state-layer-color)%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20transform%3A%20scale(1)%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%3A%3Abefore%2C%0A.switch-wrapper.icon%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Ahover~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-hover)%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Afocus~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-focus)%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Aactive~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-focus)%3B%0A%7D%0A%0A%0A%2F*%20condensed%20styles%20*%2F%0A%0A.condensed-switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-switch-condensed-background)%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20var(--wm-switch-condensed-caption-icon-width)%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20var(--wm-switch-condensed-caption-icon-height)%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-switch-condensed-caption-icon-width)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-switch-condensed-caption-icon-height)%3B%0A%20%20%20%20--wm-switch-caption-icon-size%3A%20var(--wm-switch-condensed-caption-icon-size)%3B%0A%20%20%20%20--wm-switch-height%3A%20var(--wm-switch-condensed-height)%3B%0A%20%20%20%20--wm-switch-width%3A%20var(--wm-switch-condensed-width)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-switch-condensed-active-background)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-switch-condensed-caption-background)%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%20var(--wm-switch-condensed-caption-border-radius)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-switch-condensed-caption-active-background)%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.condensed-switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.condensed-switch%20label%2C%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.condensed-switch%20label%20%7B%0A%20%20%20%20border%3A%200px%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20%7B%0A%20%20%20%20left%3A%20-4px%3B%0A%20%20%20%20top%3A%205px%3B%0A%20%20%20%20box-shadow%3A%20var(--wm-switch-condensed-shadow)%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%205px%3B%0A%20%20%20%20left%3A%20-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-condensed-width)%20-%20var(--wm-switch-condensed-caption-icon-width)%20%2B%208px))%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20.start-icon%2C%0A.condensed-switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-condensed-caption-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-condensed-caption-border-radius)%3B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.icon-container%20.start-icon%2C%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-condensed-caption-active-background)%3B%0A%7D%0A%0A%0A%2F*%20ios%20styles%20*%2F%0A%0A.ios-switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-switch-ios-background)%3B%0A%20%20%20%20--wm-switch-border-radius%3A%20var(--wm-switch-ios-border-radius)%3B%0A%20%20%20%20--wm-switch-height%3A%20var(--wm-switch-ios-height)%3B%0A%20%20%20%20--wm-switch-width%3A%20var(--wm-switch-ios-width)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-switch-ios-active-background)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-switch-ios-caption-background)%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%20var(--wm-switch-ios-caption-border-radius)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-switch-ios-caption-height)%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-switch-ios-caption-width)%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20var(--wm-switch-ios-caption-height)%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20var(--wm-switch-ios-caption-width)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-switch-ios-caption-active-background)%3B%0A%7D%0A%0A.ios-switch-wrapper%20.ios-switch%20label%2C%0A.ios-switch-wrapper%3Ahas(.app-toggle.checkbox.ios-switch%20label%3Einput%3Achecked)%20.ios-switch%20label%20%7B%0A%20%20%20%20border%3A%200px%3B%0A%7D%0A%0A.ios-switch-wrapper.icon%3Ahas(.app-toggle.checkbox.ios-switch)%20.ios-switch%20label%20%7B%0A%20%20%20%20padding%3A%200px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper%20.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%2010px%3B%0A%20%20%20%20left%3A%202px%3B%0A%20%20%20%20box-shadow%3A%20var(--wm-switch-condensed-shadow)%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20top%3A%2010px%3B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-width)%20-%20var(--wm-switch-caption-width)%20-%206px))%3B%0A%7D%0A%0A.ios-switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.ios-switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.ios-switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D",
|
|
6
|
+
"config": "%7B%0A%09%22widgetType%22%3A%20%22wm-checkbox%22%2C%0A%09%22properties%22%3A%20%7B%0A%09%09%22switch_type%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Switch%20Type%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20style%20of%20the%20switch.%20Options%20include%20'filled'%2C%20'condensed'%2C%20and%20'iOS'.%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Filled%22%2C%20%22Condensed%22%2C%20%22IOS%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Filled%22%0A%09%09%7D%2C%0A%09%09%22state%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22State%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20'disabled'%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Enabled%22%2C%20%22Disabled%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Enabled%22%0A%09%09%7D%2C%0A%09%09%22label_text%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Label%20Text%22%2C%0A%09%09%09%22description%22%3A%20%22Sets%20the%20text%20displayed%20on%20the%20label%20of%20the%20switch.%22%2C%0A%09%09%09%22value%22%3A%20%22%22%0A%09%09%7D%2C%0A%09%09%22icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22boolean%22%2C%0A%09%09%09%22displayName%22%3A%20%22Switch%20Icons%22%2C%0A%09%09%09%22description%22%3A%20%22Enables%20or%20disables%20icon%20options%20for%20the%20switch.%20If%20true%2C%20you%20can%20select%20icons%20for%20the%20switch.%22%2C%0A%09%09%09%22value%22%3A%20false%0A%09%09%7D%2C%0A%09%09%22selected_icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Selected%20Icon%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20selected%20state.%22%2C%0A%09%09%09%22value%22%3A%20%22fa%20fa-check%22%2C%0A%09%09%09%22widget%22%3A%20%22select-icon%22%0A%09%09%7D%2C%0A%09%09%22unselected_icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Unselected%20Icon%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20unselected%20state.%22%2C%0A%09%09%09%22value%22%3A%20%22fa%20fa-close%22%2C%0A%09%09%09%22widget%22%3A%20%22select-icon%22%0A%09%09%7D%2C%0A%09%09%22selected%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Default%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20default%20value%20of%20the%20switch.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20switch.%20For%20example%2C%20'true'%20for%20checked%20and%20'false'%20for%20unchecked.%22%2C%0A%09%09%09%22value%22%3A%20%22false%22%0A%09%09%7D%2C%0A%09%09%22checked_value%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Checked%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20checked.%22%2C%0A%09%09%09%22value%22%3A%20%22true%22%0A%09%09%7D%2C%0A%09%09%22unchecked_value%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Unchecked%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20unchecked.%22%2C%0A%09%09%09%22value%22%3A%20%22false%22%0A%09%09%7D%2C%0A%09%09%22required%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22boolean%22%2C%0A%09%09%09%22displayName%22%3A%20%22Required%22%2C%0A%09%09%09%22description%22%3A%20%22Indicates%20whether%20the%20switch%20is%20required.%20Set%20to%20true%20to%20make%20it%20a%20required%20field.%22%2C%0A%09%09%09%22value%22%3A%20false%0A%09%09%7D%0A%09%7D%2C%0A%09%22events%22%3A%20%7B%7D%0A%7D%0A"
|
|
7
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
declare function handleTypeChange(switch_type: any, icon: any, unselected_icon: any, widgetMap: any): void;
|
|
2
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
3
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
4
|
+
declare function handleRequiredChange(required: any, widgetMap: any): void;
|
|
5
|
+
declare function handleCheckedValueChange(checked_value: any, selected: any, widgetMap: any): void;
|
|
6
|
+
declare function handleIconVisibiltyChange(icon: any, widgetMap: any): void;
|
|
7
|
+
declare function handleUnCheckedValueChange(unchecked_value: any, selected: any, widgetMap: any): void;
|
|
8
|
+
declare function handleSelectedValueChange(selected: any, widgetMap: any): void;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Use App.getDependency for Dependency Injection
|
|
3
|
+
* Example:
|
|
4
|
+
* var DialogService = App.getDependency('DialogService');
|
|
5
|
+
*/
|
|
6
|
+
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
7
|
+
var widgetMap = Widget.Widgets;
|
|
8
|
+
var _a = Widget.props, switch_type = _a.switch_type, icon = _a.icon, unselected_icon = _a.unselected_icon, required = _a.required, unchecked_value = _a.unchecked_value, checked_value = _a.checked_value, selected = _a.selected;
|
|
9
|
+
switch (propname) {
|
|
10
|
+
case "prop-switch_type":
|
|
11
|
+
handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
|
|
12
|
+
break;
|
|
13
|
+
case "prop-required":
|
|
14
|
+
handleRequiredChange(required, widgetMap);
|
|
15
|
+
break;
|
|
16
|
+
case "prop-selected":
|
|
17
|
+
handleSelectedValueChange(selected, widgetMap);
|
|
18
|
+
break;
|
|
19
|
+
case "prop-checked_value":
|
|
20
|
+
handleCheckedValueChange(checked_value, selected, widgetMap);
|
|
21
|
+
break;
|
|
22
|
+
case "prop-unchecked_value":
|
|
23
|
+
handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
|
|
24
|
+
break;
|
|
25
|
+
case "prop-icon":
|
|
26
|
+
handleIconVisibiltyChange(icon, widgetMap);
|
|
27
|
+
break;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
/* Perform any action on widgets/variables within this block */
|
|
31
|
+
Widget.onReady = function () {
|
|
32
|
+
var widgetMap = Widget.Widgets;
|
|
33
|
+
var _a = Widget.props, switch_type = _a.switch_type, icon = _a.icon, unselected_icon = _a.unselected_icon, required = _a.required, unchecked_value = _a.unchecked_value, checked_value = _a.checked_value, selected = _a.selected;
|
|
34
|
+
handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
|
|
35
|
+
handleRequiredChange(required, widgetMap);
|
|
36
|
+
handleCheckedValueChange(checked_value, selected, widgetMap);
|
|
37
|
+
handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
|
|
38
|
+
handleSelectedValueChange(selected, widgetMap);
|
|
39
|
+
handleIconVisibiltyChange(icon, widgetMap);
|
|
40
|
+
Widget.getDatavalue = function () { return Widget.props.selected; };
|
|
41
|
+
};
|
|
42
|
+
function handleTypeChange(switch_type, icon, unselected_icon, widgetMap) {
|
|
43
|
+
widgetMap.toggle.nativeElement.classList.remove("filled-switch", "icon", "unselected-icon", "condensed-switch", "ios-switch");
|
|
44
|
+
// Set CSS classes for the toggle widget based on the switch type
|
|
45
|
+
if (switch_type === "Filled") {
|
|
46
|
+
if (icon.toString().toLowerCase() === "true") {
|
|
47
|
+
widgetMap.toggle.nativeElement.classList.add("filled-switch");
|
|
48
|
+
widgetMap.container1.nativeElement.classList.add("icon");
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
widgetMap.toggle.nativeElement.classList.add("filled-switch");
|
|
52
|
+
}
|
|
53
|
+
// Add 'unselected-icon' class if no unselected_icon is specified
|
|
54
|
+
if (unselected_icon == null ||
|
|
55
|
+
unselected_icon === "" ||
|
|
56
|
+
unselected_icon === " ") {
|
|
57
|
+
widgetMap.toggle.nativeElement.classList.add("filled-switch", "unselected-icon");
|
|
58
|
+
widgetMap.container1.nativeElement.classList.add("icon");
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
else if (switch_type === "Condensed") {
|
|
62
|
+
// Add 'condensed-switch' class
|
|
63
|
+
widgetMap.toggle.nativeElement.classList.add("condensed-switch");
|
|
64
|
+
}
|
|
65
|
+
else if (switch_type === "IOS") {
|
|
66
|
+
// Add 'iOS-switch' class
|
|
67
|
+
widgetMap.toggle.nativeElement.classList.add("ios-switch");
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function handleRequiredChange(required, widgetMap) {
|
|
71
|
+
// Set the 'required' property for the composite widget
|
|
72
|
+
widgetMap.composite.required = required;
|
|
73
|
+
}
|
|
74
|
+
function handleCheckedValueChange(checked_value, selected, widgetMap) {
|
|
75
|
+
// Set the 'checkedvalue' and 'uncheckedvalue' properties for the toggle widget
|
|
76
|
+
widgetMap.toggle.checkedvalue = checked_value;
|
|
77
|
+
handleSelectedValueChange(selected, widgetMap);
|
|
78
|
+
}
|
|
79
|
+
function handleIconVisibiltyChange(icon, widgetMap) {
|
|
80
|
+
if (icon.toString().toLowerCase() === "true") {
|
|
81
|
+
widgetMap.container1.nativeElement.classList.add("icon");
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
widgetMap.container1.nativeElement.classList.remove("icon");
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function handleUnCheckedValueChange(unchecked_value, selected, widgetMap) {
|
|
88
|
+
widgetMap.toggle.uncheckedvalue = unchecked_value;
|
|
89
|
+
handleSelectedValueChange(selected, widgetMap);
|
|
90
|
+
}
|
|
91
|
+
function handleSelectedValueChange(selected, widgetMap) {
|
|
92
|
+
// Retrieve the selected value from page parameters
|
|
93
|
+
var selectedValue = selected;
|
|
94
|
+
// Determine the correct 'datavalue' based on the selected value
|
|
95
|
+
if (selectedValue === widgetMap.toggle.checkedvalue) {
|
|
96
|
+
// If selected value matches the checked value, set datavalue to checked value
|
|
97
|
+
widgetMap.toggle.datavalue = widgetMap.toggle.checkedvalue;
|
|
98
|
+
}
|
|
99
|
+
else if (selectedValue === widgetMap.toggle.uncheckedvalue) {
|
|
100
|
+
// If selected value matches the unchecked value, set datavalue to unchecked value
|
|
101
|
+
widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue;
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
// Log a warning if the selected value does not match known values
|
|
105
|
+
console.warn("Selected value does not match any known value");
|
|
106
|
+
// Optionally set to a default value or handle the error
|
|
107
|
+
widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue; // Default to unchecked
|
|
108
|
+
}
|
|
109
|
+
}
|