@wavemaker/custom-widgets-m3 12.0.0-next.45067 → 12.0.0-next.45070

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.
Files changed (20) hide show
  1. custom-widgets-m3/custom-widgets-bundle.cjs.js +27 -27
  2. custom-widgets-m3/package.json +1 -1
  3. custom-widgets-m3/src/checkbox_set/checkbox_set.d.ts +10 -0
  4. custom-widgets-m3/src/checkbox_set/checkbox_set.js +46 -32
  5. custom-widgets-m3/src/checkbox_set/page.min.js +5 -5
  6. custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +8 -8
  7. custom-widgets-m3/src/discrete_slider/discrete_slider.js +29 -19
  8. custom-widgets-m3/src/icon_button/icon_button.js +0 -8
  9. custom-widgets-m3/src/icon_button/page.min.js +5 -5
  10. custom-widgets-m3/src/progressbar/page.min.js +5 -5
  11. custom-widgets-m3/src/progressbar/progressbar.d.ts +2 -0
  12. custom-widgets-m3/src/progressbar/progressbar.js +35 -39
  13. custom-widgets-m3/src/radio_set/page.min.js +4 -4
  14. custom-widgets-m3/src/radio_set/radio_set.d.ts +9 -0
  15. custom-widgets-m3/src/radio_set/radio_set.js +39 -29
  16. custom-widgets-m3/src/slider/slider.d.ts +9 -9
  17. custom-widgets-m3/src/slider/slider.js +37 -31
  18. custom-widgets-m3/src/switch_button/page.min.js +2 -2
  19. custom-widgets-m3/src/switch_button/switch_button.d.ts +2 -0
  20. custom-widgets-m3/src/switch_button/switch_button.js +23 -18
custom-widgets-m3/src/radio_set/page.min.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export var radio_set = {
2
- "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22container1%22%3E%0A++++++++%3Cwm-composite+name%3D%22composite%22+required%3D%22false%22%3E%0A++++++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22label1%22+required%3D%22false%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22%3E%0A++++++++++++++++%3Cwm-radioset+height%3D%22auto%22+name%3D%22radioset%22+disabled%3D%22bind%3Aprops.state+%3D%3D+%26quot%3BDisabled%26quot%3B%22+readonly%3D%22false%22+dataset%3D%22bind%3Aprops.data_set%22+datafield%3D%22All+Fields%22+required%3D%22bind%3Aprops.required%22+usekeys%3D%22false%22+datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-radioset%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-composite%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
- "script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+Partials%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+Partials+can+be+accessed+through+%27Widget.Partials%27+property+here%0A+++++*+e.g.+to+get+value+of+text+Partial+named+%27username%27+use+following+script%0A+++++*+%27Widget.Partials.username.datavalue%27%0A+++++*%2F%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22horizontal%22%29+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27+vertical%27%3B%0A++++%7D%0A++++if+%28Widget.props.label_placement+%3D%3D%3D+%22top%22%29+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27+top-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22bottom%22%29+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27+bottom-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22start%22%29+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27+start-placement%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.radioset.class+%2B%3D+%27%27%3B%0A++++%7D%0A%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%3B",
4
- "styles": ".app-label.control-label+%7B%0A++++margin-bottom%3A+8px%3B%0A%7D%0A%0A.app-radioset.inline.list-group.horizontal+%7B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A++++gap%3A+20px+32px%3B%0A++++overflow%3A+visible%3B%0A++++flex-wrap%3A+wrap%3B%0A++++padding-left%3A+10px%3B%0A%7D%0A%0A.app-radioset.inline.list-group.vertical+%7B%0A++++display%3A+flex%3B%0A++++flex-direction%3A+column%3B%0A++++gap%3A+20px%3B%0A++++padding-left%3A+10px%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.wm-app+.form-group+.app-radioset.horizontal+.radio%2B.radio%2C%0A.wm-app+.form-group+.app-radioset.vertical+.radio%2B.radio+%7B%0A++++margin-top%3A+0px%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radio.radio%2C%0A.app-radioset.vertical+.app-radio.radio+%7B%0A++++width%3A+auto%3B%0A++++vertical-align%3A+unset%3B%0A++++display%3A+unset%3B%0A++++margin-top%3A+unset%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radio.radio+input%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical+.app-radio.radio+input%5Btype%3D%22radio%22%5D+%7B%0A++++margin-right%3A+-12px%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radio.radio+input%5Btype%3D%22radio%22%5D%3Afocus%2C%0A.app-radioset.vertical+.app-radio.radio+input%5Btype%3D%22radio%22%5D%3Afocus+%7B%0A++++outline%3A+none+%21important%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%2C%0A.app-radioset.vertical+.app-radioset-label+%7B%0A++++z-index%3A+0%3B%0A++++position%3A+relative%3B%0A++++display%3A+inline-block%3B%0A++++color%3A+var%28--wm-color-on-background%29%3B%0A++++font-size%3A+16px%3B%0A++++line-height%3A+1.5%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+-1%3B%0A++++position%3A+absolute%3B%0A++++left%3A+-8px%3B%0A++++top%3A+-7px%3B%0A++++margin%3A+0%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+40px%3B%0A++++height%3A+40px%3B%0A%7D%0A%0A.app-radioset.horizontal+.radio.app-radio+.caption%2C%0A.app-radioset.vertical+.radio.app-radio+.caption+%7B%0A++++position%3A+relative%3B%0A++++width%3A+100%25%3B%0A++++cursor%3A+pointer%3B%0A++++padding-left%3A+32px%3B%0A++++display%3A+inline-flex%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.horizontal+.radio.app-radio+.caption%3A%3Abefore%2C%0A.app-radioset.vertical+.radio.app-radio+.caption%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++display%3A+inline-block%3B%0A++++box-sizing%3A+border-box%3B%0A++++margin%3A+3px+14px+3px+1px%3B%0A++++border%3A+solid+2px%3B%0A++++border-color%3A+var%28--wm-color-on-surface%29%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+22px%3B%0A++++height%3A+22px%3B%0A++++vertical-align%3A+top%3B%0A++++transition%3A+border-color+0.2s%3B%0A++++position%3A+absolute%3B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-radioset.horizontal+.radio.app-radio+.caption%3A%3Aafter%2C%0A.app-radioset.vertical+.radio.app-radio+.caption%3A%3Aafter+%7B%0A++++height%3A+12px%3B%0A++++width%3A+12px%3B%0A++++box-sizing%3A+border-box%3B%0A++++position%3A+absolute%3B%0A++++content%3A+%22%22%3B%0A++++border-radius%3A+50%25%3B%0A++++background%3A+transparent%3B%0A++++top%3A+6px%3B%0A++++left%3A+6px%3B%0A++++-webkit-transition%3A+all+0.2s+ease%3B%0A++++transition%3A+all+0.2s+ease%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Ahover%3Einput%2C%0A.app-radioset.vertical+.app-radioset-label%3Ahover%3Einput+%7B%0A++++background%3A+var%28--wm-color-on-surface-hover%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter%2C%0A.app-radioset.vertical+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-color-on-surface%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Afocus%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Afocus+%7B%0A++++background%3A+var%28--wm-color-primary-focus%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Ahover%3Einput%5Btype%3D%22radio%22%5D%3Achecked%3Ahover%2C%0A.app-radioset.vertical+.app-radioset-label%3Ahover%3Einput%5Btype%3D%22radio%22%5D%3Achecked%3Ahover+%7B%0A++++background%3A+var%28--wm-color-primary-hover%29%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Ahover+input%3Adisabled%2C%0A.app-radioset.vertical+.app-radioset-label%3Ahover+input%3Adisabled+%7B%0A++++opacity%3A+0%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label.disabled+.caption%2C%0A.app-radioset.vertical+.app-radioset-label.disabled+.caption+%7B%0A++++cursor%3A+not-allowed%3B%0A%7D%0A%0A.app-radioset.horizontal+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%3Achecked%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-radioset.horizontal.app-radioset-label%3Einput%3Adisabled%2C%0A.app-radioset.vertical+.app-radioset-label%3Einput%3Adisabled+%7B%0A++++opacity%3A+0%3B%0A%7D%0A%0A%0A%2F*+%23%23%23%23%23%23%23%23%23+top+placement+styles+%23%23%23%23%23%23%23%23%23+*%2F%0A%0A.app-radioset.inline.list-group.vertical.top-placement+%7B%0A++++max-width%3A+max-content%3B%0A++++min-width%3A+40px%3B%0A++++padding%3A+0%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.inline.list-group.horizontal.top-placement+%7B%0A++++padding-left%3A+0%3B%0A%7D%0A%0A.app-radioset.vertical.top-placement+.app-radio.radio+%7B%0A++++padding-bottom%3A+32px%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radio.radio+%7B%0A++++padding-bottom%3A+40px%3B%0A++++padding-inline%3A+10px%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radioset-label%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+%7B%0A++++display%3A+inline%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radioset-label+.caption%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+.caption+%7B%0A++++padding-left%3A+0%3B%0A++++display%3A+inline%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+21px%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.app-radioset.horizontal.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+26px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++margin%3A+3px+1px+3px+0px%3B%0A%7D%0A%0A.app-radioset.horizontal.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.app-radioset.horizontal.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.app-radioset.vertical.top-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++margin-top%3A+28px%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A%0A%2F*+%23%23%23%23%23%23%23%23%23+bottom+placement+styles+%23%23%23%23%23%23%23%23%23+*%2F%0A%0A.app-radioset.vertical.bottom-placement+.app-radio+.app-radioset-label+%7B%0A++++width%3A+auto%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radio.radio+%7B%0A++++padding-inline%3A+10px%3B%0A%7D%0A%0A.app-radioset.inline.list-group.horizontal.bottom-placement+%7B%0A++++padding-left%3A+0%3B%0A%7D%0A%0A.app-radioset.inline.list-group.vertical.bottom-placement+%7B%0A++++max-width%3A+max-content%3B%0A++++min-width%3A+40px%3B%0A++++padding%3A+0%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label+.caption%2C%0A.app-radioset.vertical.bottom-placement+.app-radioset-label+.caption+%7B%0A++++padding-top%3A+30px%3B%0A++++padding-bottom%3A+0px%3B%0A++++overflow%3A+visible%3B%0A++++display%3A+inline-block%3B%0A++++padding-left%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++padding-top%3A+40px%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+-6px%3B%0A%7D%0A%0A.app-radioset.vertical.bottom-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++padding-top%3A+40px%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+-8px%3B%0A%7D%0A%0A.bottom-placement.app-radioset.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.bottom-placement.app-radioset.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+0%3B%0A++++margin%3A+3px+1px+1px+1px%3B%0A++++margin-inline%3A+0%3B%0A%7D%0A%0A.bottom-placement.app-radioset.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.bottom-placement.app-radioset.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+8px%3B%0A%7D%0A%0A.bottom-placement.app-radioset.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.bottom-placement.app-radioset.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+unset%3B%0A++++bottom%3A+28px%3B%0A++++margin-inline%3A+0%3B%0A%7D%0A%0A.bottom-placement.app-radioset.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.bottom-placement.app-radioset.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A++++top%3A+6px%3B%0A%7D%0A%0A%0A%2F*+%23%23%23%23%23%23%23%23%23+start+placement+styles+%23%23%23%23%23%23%23%23%23+*%2F%0A%0A.app-radioset.inline.list-group.horizontal.start-placement%2C%0A.app-radioset.inline.list-group.vertical.start-placement+%7B%0A++++padding-left%3A+0%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.app-radioset-label+.caption%2C%0A.app-radioset.vertical.start-placement+.app-radioset-label+.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.app-radioset-label+.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+28px%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.app-radioset.inline.list-group.horizontal.start-placement+%7B%0A++++padding-left%3A+unset%3B%0A%7D%0A%0A.app-radioset.start-placement.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.app-radioset.start-placement.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+0px%3B%0A++++margin%3A+2px+11px+2px+2px%3B%0A%7D%0A%0A.app-radioset.start-placement.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.app-radioset.start-placement.vertical+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++right%3A+16px%3B%0A%7D%0A%0A.app-radioset.start-placement.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Adisabled%29%2B.caption%3A%3Abefore%2C%0A.app-radioset.start-placement.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+-4px%3B%0A++++margin%3A+1px%3B%0A%7D%0A%0A.app-radioset.start-placement.horizontal+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Anot%28%3Achecked%29%2B.caption%3A%3Aafter%2C%0A.start-placement.horizontal.app-radioset+.app-radioset-label+input%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++right%3A+2px%3B%0A%7D%0A%0A.app-radioset.app-radioset.horizontal.start-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++right%3A+0%3B%0A++++left%3A+unset%3B%0A%7D%0A%0A.app-radioset.vertical.start-placement+.app-radioset-label+input%5Btype%3D%22radio%22%5D+%7B%0A++++right%3A+14px%3B%0A++++left%3A+unset%3B%0A%7D%0A%0A.wm-app+.app-container%3Ahas%28.start-placement%29+%7B%0A++++width%3A+100%25%3B%0A%7D",
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+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%0AWidget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+propertyHandlers+%3D+%7B%0A++++++++%27prop-required%27%3A+%28%29+%3D%3E+handleRequiredChange%28widgetMap%2C+required%29%2C%0A++++++++%27prop-layout%27%3A+%28%29+%3D%3E+handleLayoutChange%28widgetMap%2C+layout%29%2C%0A++++++++%27prop-label_placement%27%3A+%28%29+%3D%3E+handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A%0A++++%7D%3B%0A%0A++++if+%28propertyHandlers%5BpropName%5D%29+%7B%0A++++++++propertyHandlers%5BpropName%5D%28%29%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++handleLayoutChange%28widgetMap%2C+layout%29%3B%0A++++handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A++++handleRequiredChange%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0A%2F%2F+Utility+function+to+manage+class+additions+and+removals%0Afunction+updateClasses%28element%2C+classMap%29+%7B%0A++++Object.keys%28classMap%29.forEach%28%28className%29+%3D%3E+%7B%0A++++++++element.classList.toggle%28className%2C+classMap%5BclassName%5D%29%3B%0A++++%7D%29%3B%0A%7D%0A%0A%0Afunction+handleLabelPlacementChange%28widgetMap%2C+label_placement%29+%7B%0A++++updateClasses%28widgetMap.radioset.nativeElement%2C+%7B%0A++++++++%27top-placement%27%3A+label_placement+%3D%3D%3D+%22top%22%2C%0A++++++++%27bottom-placement%27%3A+label_placement+%3D%3D%3D+%22bottom%22%2C%0A++++++++%27start-placement%27%3A+label_placement+%3D%3D%3D+%22start%22%0A++++%7D%29%3B%0A%7D%0A%0A%0A%0Afunction+handleLayoutChange%28widgetMap%2C+layout%29+%7B%0A++++updateClasses%28widgetMap.radioset.nativeElement%2C+%7B%0A++++++++%27horizontal%27%3A+layout+%3D%3D%3D+%22horizontal%22%2C%0A++++++++%27vertical%27%3A+layout+%3D%3D%3D+%22vertical%22%0A++++%7D%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite1.required+%3D+required%3B%0A%7D",
4
+ "styles": ".app-radioset.list-group.inline+%7B%0A++++flex-direction%3A+column%3B%0A++++display%3A+inline-flex%3B%0A%7D%0A%0A.wm-app+.app-radio.radio+%7B%0A++++width%3A+auto%3B%0A%7D%0A%0A.app-radioset.list-group.inline.horizontal.horizontal+%7B%0A++++flex-direction%3A+row%3B%0A++++display%3A+flex%3B%0A%7D%0A%0A%0A%2F*+start+label+placement+styles++*%2F%0A%0A.app-radioset.horizontal.start-placement+.app-radioset-label%3E.caption%2C%0A.app-radioset.vertical.start-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.radio%3Elabel+.caption%3Abefore%2C%0A.app-radioset.vertical.start-placement+.radio%3Elabel+.caption%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.radio%3Elabel+.caption%3Aafter%2C%0A.app-radioset.vertical.start-placement+.radio%3Elabel+.caption%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-size%29+*+0.25%29%29%3B%0A++++right%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-size%29+*+0.25%29%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical.start-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+unset%3B%0A++++right%3A+0px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-radioset.top-placement+%7B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++padding-top%3A+unset%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29%29%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++top%3A+calc%28calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-radioset.top-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+*+0.5%29+%2B+calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29+%2B+calc%28var%28--wm-radiobutton-size%29*+0.25%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-50%25%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unsetal%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%0A%0A.app-radioset.top-placement+%7B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A%7D%0A%0A.app-radioset.bottom-placement+%7B%0A++++display%3A+flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-radioset.bottom-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-50%25%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radio.radio%3Elabel+.caption%3Aafter+%7B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A++++transform%3A+translate%28-50%25%2C+5px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+0px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-radioset.intermediate-radio+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%2B.caption%3A%3Abefore%2C%0A.app-radioset+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-radioset.intermediate-radio+.app-radioset-label.disabled%3Einput%5Btype%3D%22radio%22%5D%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-radiobutton-border-color%29%3B%0A++++background-color%3A+var%28--wm-radiobutton-border-color%29%3B%0A%7D",
5
5
  "variables": "%7B+%7D",
6
- "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20%27horizontal%27%20indicates%20that%20the%20element%27s%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20%27vertical%27%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_placement%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%22Label%20Placement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20label%27s%20position%20relative%20to%20the%20component.%20Options%3A%20%27top%27%20(Label%20appears%20above%20the%20component)%2C%20%27bottom%27%20(Label%20appears%20below%20the%20component)%2C%20%27start%27%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22top%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20RadioSet%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22data_set%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%22Data%20Set%20Values%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20%27yes%27%2C%20%27no%27%2C%20%27maybe%27%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22yes%22%2C%20%22no%22%2C%20%22maybe%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20%27yes%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20RadioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%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"
6
+ "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20%27horizontal%27%20indicates%20that%20the%20element%27s%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20%27vertical%27%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_placement%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%22Label%20Placement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20label%27s%20position%20relative%20to%20the%20component.%20Options%3A%20%27top%27%20(Label%20appears%20above%20the%20component)%2C%20%27bottom%27%20(Label%20appears%20below%20the%20component)%2C%20%27start%27%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%2C%22end%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22end%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20RadioSet%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22data_set%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%22Data%20Set%20Values%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20%27Option1%27%2C%20%27Option2%27%2C%20%27Option3%27%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Option1%22%2C%20%22Option2%22%2C%20%22Option3%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20%27Option1%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Option1%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20RadioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%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
7
  };
custom-widgets-m3/src/radio_set/radio_set.d.ts CHANGED
@@ -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;
custom-widgets-m3/src/radio_set/radio_set.js CHANGED
@@ -2,34 +2,44 @@
2
2
  * Use App.getDependency for Dependency Injection
3
3
  * eg: var DialogService = App.getDependency('DialogService');
4
4
  */
5
- /* perform any action on Partials/variables within this block */
6
- Widget.onReady = function () {
7
- /*
8
- * variables can be accessed through 'Widget.Variables' property here
9
- * e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
10
- * Widget.Variables.loggedInUser.getData()
11
- *
12
- * Partials can be accessed through 'Widget.Partials' property here
13
- * e.g. to get value of text Partial named 'username' use following script
14
- * 'Widget.Partials.username.datavalue'
15
- */
16
- if (Widget.props.layout === "horizontal") {
17
- Widget.Widgets.radioset.class += ' horizontal';
18
- }
19
- else {
20
- Widget.Widgets.radioset.class += ' vertical';
21
- }
22
- if (Widget.props.label_placement === "top") {
23
- Widget.Widgets.radioset.class += ' top-placement';
24
- }
25
- else if (Widget.props.label_placement === "bottom") {
26
- Widget.Widgets.radioset.class += ' bottom-placement';
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]();
27
15
  }
28
- else if (Widget.props.label_placement === "start") {
29
- Widget.Widgets.radioset.class += ' start-placement';
30
- }
31
- else {
32
- Widget.Widgets.radioset.class += '';
33
- }
34
- Widget.Widgets.composite.required = Widget.props.required;
35
16
  };
17
+ Widget.onReady = function () {
18
+ var _a = Widget.props, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
19
+ var widgetMap = Widget.Widgets;
20
+ handleLayoutChange(widgetMap, layout);
21
+ handleLabelPlacementChange(widgetMap, label_placement);
22
+ handleRequiredChange(widgetMap, required);
23
+ };
24
+ // Utility function to manage class additions and removals
25
+ function updateClasses(element, classMap) {
26
+ Object.keys(classMap).forEach(function (className) {
27
+ element.classList.toggle(className, classMap[className]);
28
+ });
29
+ }
30
+ function handleLabelPlacementChange(widgetMap, label_placement) {
31
+ updateClasses(widgetMap.radioset.nativeElement, {
32
+ 'top-placement': label_placement === "top",
33
+ 'bottom-placement': label_placement === "bottom",
34
+ 'start-placement': label_placement === "start"
35
+ });
36
+ }
37
+ function handleLayoutChange(widgetMap, layout) {
38
+ updateClasses(widgetMap.radioset.nativeElement, {
39
+ 'horizontal': layout === "horizontal",
40
+ 'vertical': layout === "vertical"
41
+ });
42
+ }
43
+ function handleRequiredChange(widgetMap, required) {
44
+ widgetMap.composite1.required = required;
45
+ }
custom-widgets-m3/src/slider/slider.d.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  declare function convertToBoolean(value: any): boolean;
2
2
  declare function convertToBoolean(value: any): boolean;
3
- declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
4
- declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
5
- declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
6
- declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
7
- declare function updateSliderValue(datavalue: any, widgetMap: any): void;
8
- declare function toggleIconsVisibility(showIconsBool: any, iconActionsBool: any, widgetMap: any): void;
9
- declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
10
- declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
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;
11
10
  declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
11
+ declare function toggleLabelVisibilty(widgetMap: any, showLabelsBool: any): void;
12
12
  declare function activeSliderElement(widgetMap: any): void;
13
13
  declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
14
14
  declare function getSliderPercentage(value: any): number;
15
15
  declare function moveSlider(direction: any, widgetMap: any): void;
16
- declare function moveSlider(direction: any, widgetMap: any): void;
16
+ declare function moveSlider(widgetMap: any, direction: any): void;
custom-widgets-m3/src/slider/slider.js CHANGED
@@ -6,23 +6,23 @@ Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
6
6
  var iconActionsBool = convertToBoolean(icon_actions);
7
7
  switch (propname) {
8
8
  case "prop-show_icons":
9
- toggleIconsVisibility(showIconsBool, start_icon, end_icon, iconActionsBool, widgetMap);
9
+ toggleIconsVisibility(widgetMap, showIconsBool, start_icon, end_icon, iconActionsBool);
10
10
  break;
11
11
  case "prop-start_icon":
12
- updateStartIconVisibility(iconActionsBool, widgetMap);
12
+ updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
13
13
  break;
14
14
  case "prop-end_icon":
15
- updateEndIconVisibility(iconActionsBool, widgetMap);
15
+ updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
16
16
  break;
17
17
  case "prop-value":
18
- updateSliderValue(datavalue, widgetMap);
18
+ updateSliderValue(widgetMap, datavalue);
19
19
  break;
20
20
  case "prop-show_labels":
21
- toggleLabelVisibilty(showLabelsBool, widgetMap);
21
+ toggleLabelVisibilty(widgetMap, showLabelsBool);
22
22
  break;
23
23
  case "prop-max_value":
24
24
  case "prop-min_value":
25
- updateSliderValue(datavalue, widgetMap);
25
+ updateSliderValue(widgetMap, datavalue);
26
26
  break;
27
27
  }
28
28
  };
@@ -32,51 +32,57 @@ Widget.onReady = function () {
32
32
  var showIconsBool = convertToBoolean(show_icons);
33
33
  var showLabelsBool = convertToBoolean(show_labels);
34
34
  var iconActionsBool = convertToBoolean(icon_actions);
35
- toggleIconsVisibility(showIconsBool, start_icon, end_icon, iconActionsBool, widgetMap);
36
- toggleLabelVisibilty(showLabelsBool, widgetMap);
37
- updateSliderValue(datavalue, widgetMap);
35
+ toggleIconsVisibility(widgetMap, showIconsBool, start_icon, end_icon, iconActionsBool);
36
+ toggleLabelVisibilty(widgetMap, showLabelsBool);
37
+ updateSliderValue(widgetMap, datavalue);
38
38
  activeSliderElement(widgetMap);
39
39
  };
40
40
  function convertToBoolean(value) {
41
41
  return value === true || value === "true";
42
42
  }
43
- function updateStartIconVisibility(iconActionsBool, widgetMap) {
43
+ function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
44
44
  var decrementButton = widgetMap.decrementButton;
45
- decrementButton.show = true;
46
- decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
47
- "auto" :
48
- "none";
45
+ if (showIconsBool) {
46
+ decrementButton.show = true;
47
+ decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
48
+ "auto" :
49
+ "none";
50
+ }
51
+ else {
52
+ decrementButton.show = false;
53
+ }
49
54
  }
50
- function updateEndIconVisibility(iconActionsBool, widgetMap) {
55
+ function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
51
56
  var incrementButton = widgetMap.incrementButton;
52
- incrementButton.show = true;
53
- incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
54
- "auto" :
55
- "none";
57
+ if (showIconsBool) {
58
+ incrementButton.show = true;
59
+ incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
60
+ "auto" :
61
+ "none";
62
+ }
63
+ else {
64
+ incrementButton.show = false;
65
+ }
56
66
  }
57
- function updateSliderValue(datavalue, widgetMap) {
67
+ function updateSliderValue(widgetMap, datavalue) {
58
68
  var slider1 = widgetMap.slider1;
59
69
  if (datavalue !== undefined) {
60
70
  slider1.datavalue = Number(datavalue);
61
71
  }
62
72
  slider1.nativeElement.style.setProperty("--end", (100 - getSliderPercentage(slider1.datavalue)) + '%');
63
73
  }
64
- function toggleIconsVisibility(showIconsBool, startIcon, endIcon, iconActionsBool, widgetMap) {
74
+ function toggleIconsVisibility(widgetMap, showIconsBool, startIcon, endIcon, iconActionsBool) {
65
75
  var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
66
76
  if (showIconsBool) {
67
- if (startIcon)
68
- updateStartIconVisibility(iconActionsBool, widgetMap);
69
- if (endIcon)
70
- updateEndIconVisibility(iconActionsBool, widgetMap);
77
+ updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
78
+ updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
71
79
  }
72
80
  else {
73
- if (startIcon)
74
- decrementButton.show = false;
75
- if (endIcon)
76
- incrementButton.show = false;
81
+ decrementButton.show = false;
82
+ incrementButton.show = false;
77
83
  }
78
84
  }
79
- function toggleLabelVisibilty(showLabelsBool, widgetMap) {
85
+ function toggleLabelVisibilty(widgetMap, showLabelsBool) {
80
86
  if (showLabelsBool) {
81
87
  widgetMap.slider1.nativeElement.classList.remove("hide-labels");
82
88
  }
@@ -106,7 +112,7 @@ Widget.slider1Change = function ($event, widget, newVal, oldVal) {
106
112
  var sliderValue = 100 - getSliderPercentage(newVal) + "%";
107
113
  widget.nativeElement.style.setProperty("--end", sliderValue);
108
114
  };
109
- function moveSlider(direction, widgetMap) {
115
+ function moveSlider(widgetMap, direction) {
110
116
  var slider1 = widgetMap.slider1;
111
117
  var newValue = Number(slider1.datavalue) + direction;
112
118
  newValue = Math.max(Math.min(newValue, slider1.maxvalue), slider1.minvalue);
custom-widgets-m3/src/switch_button/page.min.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export var switch_button = {
2
2
  "markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22switch-wrapper%22+conditionalclass%3D%22bind%3A%7B%27filled-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BFilled%26quot%3B%2C%0A%27condensed-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BCondensed%26quot%3B%2C++++%0A%27ios-switch-wrapper%27%3Aprops.switch_type++%3D%3D%3D+%26quot%3BIOS%26quot%3B%7D%22%3E%0A++++++++++++%3Cwm-checkbox+caption%3D%22Toggle%22+type%3D%22toggle%22+name%3D%22toggle%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22+datavalue%3D%22bind%3Aprops.selected%22+class%3D%22switch%22+checkedvalue%3D%22true%22+uncheckedvalue%3D%22false%22+required%3D%22bind%3Aprops.required%22+show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22icon-container%22+show%3D%22true%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22bind%3Aprops.unselected_icon%22+show%3D%22bind%3Aprops.unselected_icon%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon2%22+iconclass%3D%22bind%3Aprops.selected_icon%22+show%3D%22bind%3Aprops.selected_icon%22+class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
- "script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+Example%3A%0A+*+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%0A++++%7D+%3D+Widget.props%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-switch_type%27%3A%0A++++++++++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-selected%27%3A%0A++++++++++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-checked_value%27%3A%0A++++++++++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-unchecked_value%27%3A%0A++++++++++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-icon%27%3A%0A++++++++++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0A%2F*+Perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%0A++++%7D+%3D+Widget.props%0A++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%0A%7D%0A%0Afunction+handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.nativeElement.classList.remove%28%27filled-switch%27%2C+%27icon%27%2C+%27unselected-icon%27%2C+%27condensed-switch%27%2C+%27ios-switch%27%29%0A++++%2F%2F+Set+CSS+classes+for+the+toggle+widget+based+on+the+switch+type%0A++++if+%28switch_type+%3D%3D%3D+%22Filled%22%29+%7B%0A++++++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%2C+%27icon%27%29%0A++++++++%7D+else+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%29%0A%0A++++++++%7D%0A++++++++%2F%2F+Add+%27unselected-icon%27+class+if+no+unselected_icon+is+specified%0A++++++++if+%28unselected_icon+%3D%3D+null+%7C%7C+unselected_icon+%3D%3D%3D+%22%22+%7C%7C+unselected_icon+%3D%3D%3D+%22+%22%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%2C+%27icon%27%2C+%27unselected-icon%27%29%0A%0A++++++++%7D%0A%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22Condensed%22%29+%7B%0A++++++++%2F%2F+Add+%27condensed-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27condensed-switch%27%29%0A%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22IOS%22%29+%7B%0A++++++++%2F%2F+Add+%27iOS-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27ios-switch%27%29%0A%0A++++%7D%0A%7D%0A%0Afunction+handleRequiredChange%28required%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27required%27+property+for+the+composite+widget%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0A%0Afunction+handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27checkedvalue%27+and+%27uncheckedvalue%27+properties+for+the+toggle+widget%0A++++widgetMap.toggle.checkedvalue+%3D+checked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0A%0Afunction+handleIconVisibiltyChange%28icon%2C+widgetMap%29+%7B%0A++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27icon%27%29%0A%0A++++%7D+else+%7B%0A++++++++widgetMap.toggle.nativeElement.classList.remove%28%27icon%27%29%0A%0A++++%7D%0A%7D%0A%0A%0Afunction+handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.uncheckedvalue+%3D+unchecked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleSelectedValueChange%28selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Retrieve+the+selected+value+from+page+parameters%0A++++var+selectedValue+%3D+selected%3B%0A%0A++++%2F%2F+Determine+the+correct+%27datavalue%27+based+on+the+selected+value%0A++++if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.checkedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+checked+value%2C+set+datavalue+to+checked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.checkedvalue%3B%0A++++%7D+else+if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.uncheckedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+unchecked+value%2C+set+datavalue+to+unchecked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B%0A++++%7D+else+%7B%0A++++++++%2F%2F+Log+a+warning+if+the+selected+value+does+not+match+known+values%0A++++++++console.warn%28%27Selected+value+does+not+match+any+known+value%27%29%3B%0A++++++++%2F%2F+Optionally+set+to+a+default+value+or+handle+the+error%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B+%2F%2F+Default+to+unchecked%0A++++%7D%0A%0A%7D",
4
- "styles": ".switch-wrapper+%7B%0A++++--wm-switch-padding%3A+2px+8px%3B%0A++++--wm-switch-active-padding%3A+2px+4px%3B%0A++++--wm-switch-height%3A+32px%3B%0A++++--wm-switch-width%3A+52px%3B%0A++++--wm-switch-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++--wm-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-active-border-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-switch-border-style%3A+solid%3B%0A++++--wm-switch-border-width%3A+2px%3B%0A++++--wm-switch-border-radius%3A+100px%3B%0A++++--wm-switch-caption-border-radius%3A+24px%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-caption-icon-width%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-height%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-size%3A+16px%3B%0A++++--wm-switch-caption-state-layer-color%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-condensed-switch-height%3A+14px%3B%0A++++--wm-condensed-switch-width%3A+34px%3B%0A++++--wm-condensed-switch-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-condensed-switch-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-condensed-switch-active-background%3A+var%28--wm-color-primary-active%29%3B%0A++++--wm-condensed-switch-caption-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-condensed-switch-caption-border-radius%3A+24px%3B%0A++++--wm-condensed-switch-caption-icon-width%3A+var%28--wm-space-5%29%3B%0A++++--wm-condensed-switch-caption-icon-height%3A+var%28--wm-space-5%29%3B%0A++++--wm-ios-switch-padding%3A+2px+2px%3B%0A++++--wm-ios-switch-active-padding%3A+2px+2px%3B%0A++++--wm-ios-switch-height%3A+26px%3B%0A++++--wm-ios-switch-width%3A+42px%3B%0A++++--wm-ios-switch-background%3A+%23E9E9EA%3B%0A++++--wm-ios-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-ios-switch-active-background%3A+%2365C466%3B%0A++++--wm-ios-switch-border-radius%3A+100px%3B%0A++++--wm-ios-switch-caption-border-radius%3A+24px%3B%0A++++--wm-ios-switch-caption-width%3A+22px%3B%0A++++--wm-ios-switch-caption-height%3A+22px%3B%0A++++--wm-ios-switch-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-ios-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-ios-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-ios-switch-caption-icon-width%3A+22px%3B%0A++++--wm-ios-switch-caption-icon-height%3A+22px%3B%0A++++--wm-ios-switch-caption-icon-size%3A+16px%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%2C%0A.condensed-switch-wrapper+.app-checkbox%2C%0A.ios-switch-wrapper+.app-checkbox+%7B%0A++++margin%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+%7B%0A++++margin%3A+8px%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper+.switch+label+span.caption%2C%0A.switch-wrapper+.switch+label+span.caption%3A%3Abefore+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+%7B%0A++++cursor%3A+pointer%3B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-border-color%29%3B%0A++++background%3A+var%28--wm-switch-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++padding%3A+var%28--wm-switch-padding%29%3B%0A++++height%3A+var%28--wm-switch-height%29%3B%0A++++min-height%3A+var%28--wm-switch-height%29%3B%0A++++width%3A+var%28--wm-switch-width%29%3B%0A++++user-select%3A+none%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++display%3A+block%3B%0A++++position%3A+relative%3B%0A++++box-shadow%3A+unset%3B%0A++++overflow%3A+visible%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.switch+label+%7B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-active-background%29%3B%0A++++background%3A+var%28--wm-switch-active-background%29%3B%0A++++padding%3A+var%28--wm-switch-active-padding%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch.icon%29+.switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+%7B%0A++++background%3A+transparent%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++width%3A+var%28--wm-switch-caption-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-height%29%3B%0A++++min-height%3A+var%28--wm-switch-caption-height%29%3B%0A++++position%3A+absolute%3B%0A++++left%3A+4px%3B%0A++++top%3A+18px%3B%0A++++display%3A+flex%3B%0A++++justify-content%3A+space-between%3B%0A++++align-items%3A+center%3B%0A++++z-index%3A+1%3B%0A++++pointer-events%3A+none%3B%0A++++padding%3A+0px%3B%0A++++transition%3A+transform+0.3s+ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+12px%3B%0A++++left%3A+4px%3B%0A++++width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-icon-height%29%3B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A++++max-width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+20px%29%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-caption-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++width%3A+100%25%3B%0A++++height%3A+100%25%3B%0A++++min-height%3A+100%25%3B%0A++++min-width%3A+100%25%3B%0A++++color%3A+var%28--wm-switch-background%29%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+span.end-icon%5Bhidden%5D+%7B%0A++++display%3A+block+%21important%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++color%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label.unchecked%29+.icon-container.app-container+.app-icon-wrapper.start-icon%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container.app-container+.app-icon-wrapper.end-icon+%7B%0A++++display%3A+block+%21important%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.switch-wrapper+%7B%0A++++position%3A+relative%3B%0A%7D%0A%0A.switch-wrapper%3Anot%28%3Ahas%28.icon%29%29+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.switch-wrapper%3Anot%28%3Ahas%28.icon%29%29+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D%0A%0A.switch-wrapper+.icon-container%3A%3Abefore+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+1%3B%0A++++position%3A+absolute%3B%0A++++content%3A+%22%22%3B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+calc%28100%25+%2B+16px%29%3B%0A++++height%3A+calc%28100%25+%2B+16px%29%3B%0A++++background%3A+var%28--wm-switch-caption-state-layer-color%29%3B%0A++++box-shadow%3A+none%3B%0A++++outline%3A+none%3B%0A++++opacity%3A+0%3B%0A++++transform%3A+scale%281%29%3B%0A++++pointer-events%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahover+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-hover%29%3B%0A%7D%0A%0A.switch-wrapper%3Afocus+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A.switch-wrapper%3Aactive+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A%0A%2F*+condensed+styles+*%2F%0A%0A.condensed-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-condensed-switch-background%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-condensed-switch-caption-icon-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-condensed-switch-caption-icon-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-condensed-switch-caption-icon-width%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-condensed-switch-caption-icon-height%29%3B%0A++++--wm-switch-caption-icon-size%3A+var%28--wm-condensed-switch-caption-icon-size%29%3B%0A++++--wm-switch-height%3A+var%28--wm-condensed-switch-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-condensed-switch-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-condensed-switch-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-condensed-switch-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-condensed-switch-caption-border-radius%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.condensed-switch+label%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.condensed-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+%7B%0A++++left%3A+-4px%3B%0A++++top%3A+5px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+5px%3B%0A++++left%3A+-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-condensed-switch-width%29+-+var%28--wm-condensed-switch-caption-icon-width%29+%2B+8px%29%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-condensed-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-condensed-switch-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A++++box-shadow%3A+0px+2px+1px+-1px+rgba%280%2C+0%2C+0%2C+0.2%29%2C+0px+1px+1px+0px+rgba%280%2C+0%2C+0%2C+0.14%29%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-condensed-switch-caption-active-background%29%3B%0A%7D%0A%0A%0A%2F*+ios+styles+*%2F%0A%0A.ios-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-ios-switch-background%29%3B%0A++++--wm-switch-border-radius%3A+var%28--wm-ios-switch-border-radius%29%3B%0A++++--wm-switch-padding%3A+var%28--wm-ios-switch-padding%29%3B%0A++++--wm-switch-height%3A+var%28--wm-ios-switch-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-ios-switch-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-ios-switch-active-background%29%3B%0A++++--wm-switch-active-padding%3A+var%28--wm-ios-switch-active-padding%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-ios-switch-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-ios-switch-caption-border-radius%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-ios-switch-caption-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-ios-switch-caption-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-ios-switch-caption-height%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-ios-switch-caption-width%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-ios-switch-caption-active-background%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.ios-switch+label%2C%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch+label%3Einput%3Achecked%29+.ios-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch.icon%29+.ios-switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++left%3A+2px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+6px%29%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.ios-switch-wrapper+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D",
3
+ "script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+Example%3A%0A+*+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%2C%0A++++%7D+%3D+Widget.props%3B%0A++++switch+%28propname%29+%7B%0A++++++++case+%22prop-switch_type%22%3A%0A++++++++++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-required%22%3A%0A++++++++++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-selected%22%3A%0A++++++++++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-checked_value%22%3A%0A++++++++++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-unchecked_value%22%3A%0A++++++++++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-icon%22%3A%0A++++++++++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%3B%0A%0A%2F*+Perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%2C%0A++++%7D+%3D+Widget.props%3B%0A++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A%7D%3B%0A%0Afunction+handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.nativeElement.classList.remove%28%0A++++++++%22filled-switch%22%2C%0A++++++++%22icon%22%2C%0A++++++++%22unselected-icon%22%2C%0A++++++++%22condensed-switch%22%2C%0A++++++++%22ios-switch%22%0A++++%29%3B%0A++++%2F%2F+Set+CSS+classes+for+the+toggle+widget+based+on+the+switch+type%0A++++if+%28switch_type+%3D%3D%3D+%22Filled%22%29+%7B%0A++++++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%22true%22%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%22filled-switch%22%29%3B%0A++++++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A++++++++%7D+else+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%22filled-switch%22%29%3B%0A++++++++%7D%0A++++++++%2F%2F+Add+%27unselected-icon%27+class+if+no+unselected_icon+is+specified%0A++++++++if+%28%0A++++++++++++unselected_icon+%3D%3D+null+%7C%7C%0A++++++++++++unselected_icon+%3D%3D%3D+%22%22+%7C%7C%0A++++++++++++unselected_icon+%3D%3D%3D+%22+%22%0A++++++++%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%0A++++++++++++++++%22filled-switch%22%2C%0A++++++++++++++++%22unselected-icon%22%0A++++++++++++%29%3B%0A++++++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A%0A++++++++%7D%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22Condensed%22%29+%7B%0A++++++++%2F%2F+Add+%27condensed-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%22condensed-switch%22%29%3B%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22IOS%22%29+%7B%0A++++++++%2F%2F+Add+%27iOS-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%22ios-switch%22%29%3B%0A++++%7D%0A%7D%0A%0Afunction+handleRequiredChange%28required%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27required%27+property+for+the+composite+widget%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27checkedvalue%27+and+%27uncheckedvalue%27+properties+for+the+toggle+widget%0A++++widgetMap.toggle.checkedvalue+%3D+checked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleIconVisibiltyChange%28icon%2C+widgetMap%29+%7B%0A++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%22true%22%29+%7B%0A++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A%0A++++%7D+else+%7B%0A++++++++widgetMap.container1.nativeElement.classList.remove%28%22icon%22%29%3B%0A%0A%0A++++%7D%0A%7D%0A%0Afunction+handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.uncheckedvalue+%3D+unchecked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleSelectedValueChange%28selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Retrieve+the+selected+value+from+page+parameters%0A++++var+selectedValue+%3D+selected%3B%0A%0A++++%2F%2F+Determine+the+correct+%27datavalue%27+based+on+the+selected+value%0A++++if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.checkedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+checked+value%2C+set+datavalue+to+checked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.checkedvalue%3B%0A++++%7D+else+if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.uncheckedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+unchecked+value%2C+set+datavalue+to+unchecked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B%0A++++%7D+else+%7B%0A++++++++%2F%2F+Log+a+warning+if+the+selected+value+does+not+match+known+values%0A++++++++console.warn%28%22Selected+value+does+not+match+any+known+value%22%29%3B%0A++++++++%2F%2F+Optionally+set+to+a+default+value+or+handle+the+error%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B+%2F%2F+Default+to+unchecked%0A++++%7D%0A%7D",
4
+ "styles": ".switch-wrapper+%7B%0A++++--wm-switch-height%3A+32px%3B%0A++++--wm-switch-width%3A+52px%3B%0A++++--wm-switch-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++--wm-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-active-border-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-switch-border-style%3A+solid%3B%0A++++--wm-switch-border-width%3A+2px%3B%0A++++--wm-switch-border-radius%3A+100px%3B%0A++++--wm-switch-caption-border-radius%3A+24px%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-caption-icon-width%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-height%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-size%3A+16px%3B%0A++++--wm-switch-caption-state-layer-color%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-switch-condensed-height%3A+14px%3B%0A++++--wm-switch-condensed-width%3A+34px%3B%0A++++--wm-switch-condensed-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-condensed-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-condensed-active-background%3A+var%28--wm-color-primary-active%29%3B%0A++++--wm-switch-condensed-caption-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-condensed-caption-border-radius%3A+24px%3B%0A++++--wm-switch-condensed-caption-icon-width%3A+var%28--wm-space-5%29%3B%0A++++--wm-switch-condensed-caption-icon-height%3A+var%28--wm-space-5%29%3B%0A++++--wm-switch-ios-height%3A+26px%3B%0A++++--wm-switch-ios-width%3A+42px%3B%0A++++--wm-switch-ios-background%3A+%23E9E9EA%3B%0A++++--wm-switch-ios-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-ios-active-background%3A+%2365C466%3B%0A++++--wm-switch-ios-border-radius%3A+100px%3B%0A++++--wm-switch-ios-caption-border-radius%3A+24px%3B%0A++++--wm-switch-ios-caption-width%3A+22px%3B%0A++++--wm-switch-ios-caption-height%3A+22px%3B%0A++++--wm-switch-ios-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-ios-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-ios-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-ios-caption-icon-width%3A+22px%3B%0A++++--wm-switch-ios-caption-icon-height%3A+22px%3B%0A++++--wm-switch-ios-caption-icon-size%3A+16px%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%2C%0A.condensed-switch-wrapper+.app-checkbox%2C%0A.ios-switch-wrapper+.app-checkbox+%7B%0A++++margin%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+%7B%0A++++margin%3A+8px%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper+.switch+label+span.caption%2C%0A.switch-wrapper+.switch+label+span.caption%3A%3Abefore+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+%7B%0A++++cursor%3A+pointer%3B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-border-color%29%3B%0A++++background%3A+var%28--wm-switch-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++height%3A+var%28--wm-switch-height%29%3B%0A++++min-height%3A+var%28--wm-switch-height%29%3B%0A++++width%3A+var%28--wm-switch-width%29%3B%0A++++user-select%3A+none%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++display%3A+block%3B%0A++++position%3A+relative%3B%0A++++box-shadow%3A+unset%3B%0A++++overflow%3A+visible%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.switch+label+%7B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-active-background%29%3B%0A++++background%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper.icon+.switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+%7B%0A++++background%3A+var%28--wm-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-caption-border-radius%29%3B%0A++++width%3A+var%28--wm-switch-caption-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-height%29%3B%0A++++min-height%3A+var%28--wm-switch-caption-height%29%3B%0A++++position%3A+absolute%3B%0A++++left%3A+4px%3B%0A++++top%3A+18px%3B%0A++++display%3A+flex%3B%0A++++justify-content%3A+space-between%3B%0A++++align-items%3A+center%3B%0A++++z-index%3A+1%3B%0A++++pointer-events%3A+none%3B%0A++++padding%3A+0px%3B%0A++++transition%3A+transform+0.3s+ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+12px%3B%0A++++left%3A+4px%3B%0A++++width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-icon-height%29%3B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A++++max-width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+20px%29%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Anot%28%3Achecked%29%29+.icon-container+span.start-icon+%7B%0A++++display%3A+block%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+span.end-icon+%7B%0A++++display%3A+block%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++background%3A+var%28--wm-switch-caption-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++width%3A+100%25%3B%0A++++height%3A+100%25%3B%0A++++min-height%3A+100%25%3B%0A++++min-width%3A+100%25%3B%0A++++color%3A+var%28--wm-switch-background%29%3B%0A++++overflow%3A+visible%3B%0A++++z-index%3A+10%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++color%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.switch-wrapper+%7B%0A++++position%3A+relative%3B%0A%7D%0A%0A.switch-wrapper+.icon-container%3A%3Abefore+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+1%3B%0A++++position%3A+absolute%3B%0A++++content%3A+%22%22%3B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+calc%28100%25+%2B+16px%29%3B%0A++++height%3A+calc%28100%25+%2B+16px%29%3B%0A++++background%3A+var%28--wm-switch-caption-state-layer-color%29%3B%0A++++box-shadow%3A+none%3B%0A++++outline%3A+none%3B%0A++++opacity%3A+0%3B%0A++++transform%3A+scale%281%29%3B%0A++++pointer-events%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahover+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-hover%29%3B%0A%7D%0A%0A.switch-wrapper%3Afocus+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A.switch-wrapper%3Aactive+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A%0A%2F*+condensed+styles+*%2F%0A%0A.condensed-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-switch-condensed-background%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-switch-condensed-caption-icon-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-switch-condensed-caption-icon-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-switch-condensed-caption-icon-width%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-switch-condensed-caption-icon-height%29%3B%0A++++--wm-switch-caption-icon-size%3A+var%28--wm-switch-condensed-caption-icon-size%29%3B%0A++++--wm-switch-height%3A+var%28--wm-switch-condensed-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-switch-condensed-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-switch-condensed-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-switch-condensed-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-switch-condensed-caption-border-radius%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.condensed-switch-wrapper+.condensed-switch+label%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.condensed-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+%7B%0A++++left%3A+-4px%3B%0A++++top%3A+5px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+5px%3B%0A++++left%3A+-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-condensed-width%29+-+var%28--wm-switch-condensed-caption-icon-width%29+%2B+8px%29%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-condensed-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-condensed-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A++++box-shadow%3A+0px+2px+1px+-1px+rgba%280%2C+0%2C+0%2C+0.2%29%2C+0px+1px+1px+0px+rgba%280%2C+0%2C+0%2C+0.14%29%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-condensed-caption-active-background%29%3B%0A%7D%0A%0A%0A%2F*+ios+styles+*%2F%0A%0A.ios-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-switch-ios-background%29%3B%0A++++--wm-switch-border-radius%3A+var%28--wm-switch-ios-border-radius%29%3B%0A++++--wm-switch-height%3A+var%28--wm-switch-ios-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-switch-ios-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-switch-ios-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-switch-ios-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-switch-ios-caption-border-radius%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-switch-ios-caption-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-switch-ios-caption-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-switch-ios-caption-height%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-switch-ios-caption-width%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-switch-ios-caption-active-background%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.ios-switch+label%2C%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch+label%3Einput%3Achecked%29+.ios-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.ios-switch%29+.ios-switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++left%3A+2px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+6px%29%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.ios-switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++display%3A+none%3B%0A%7D",
5
5
  "variables": "%7B+%7D",
6
6
  "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22switch_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%22Switch%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20of%20the%20switch.%20Options%20include%20%27filled%27%2C%20%27condensed%27%2C%20and%20%27iOS%27.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Condensed%22%2C%20%22IOS%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Filled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20text%20displayed%20on%20the%20label%20of%20the%20switch.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon%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%22Switch%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Enables%20or%20disables%20icon%20options%20for%20the%20switch.%20If%20true%2C%20you%20can%20select%20icons%20for%20the%20switch.%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%22selected_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%22Selected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20selected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-check%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%22unselected_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%22Unselected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20unselected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20switch.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20switch.%20For%20example%2C%20%27true%27%20for%20checked%20and%20%27false%27%20for%20unchecked.%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%22checked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Checked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20checked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22true%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22unchecked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unchecked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20unchecked.%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%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20switch%20is%20required.%20Set%20to%20true%20to%20make%20it%20a%20required%20field.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%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
7
  };
custom-widgets-m3/src/switch_button/switch_button.d.ts CHANGED
@@ -1,4 +1,6 @@
1
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;
2
4
  declare function handleRequiredChange(required: any, widgetMap: any): void;
3
5
  declare function handleCheckedValueChange(checked_value: any, selected: any, widgetMap: any): void;
4
6
  declare function handleIconVisibiltyChange(icon: any, widgetMap: any): void;
custom-widgets-m3/src/switch_button/switch_button.js CHANGED
@@ -7,22 +7,22 @@ Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
7
7
  var widgetMap = Widget.Widgets;
8
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
9
  switch (propname) {
10
- case 'prop-switch_type':
10
+ case "prop-switch_type":
11
11
  handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
12
12
  break;
13
- case 'prop-required':
13
+ case "prop-required":
14
14
  handleRequiredChange(required, widgetMap);
15
15
  break;
16
- case 'prop-selected':
16
+ case "prop-selected":
17
17
  handleSelectedValueChange(selected, widgetMap);
18
18
  break;
19
- case 'prop-checked_value':
19
+ case "prop-checked_value":
20
20
  handleCheckedValueChange(checked_value, selected, widgetMap);
21
21
  break;
22
- case 'prop-unchecked_value':
22
+ case "prop-unchecked_value":
23
23
  handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
24
24
  break;
25
- case 'prop-icon':
25
+ case "prop-icon":
26
26
  handleIconVisibiltyChange(icon, widgetMap);
27
27
  break;
28
28
  }
@@ -36,29 +36,34 @@ Widget.onReady = function () {
36
36
  handleCheckedValueChange(checked_value, selected, widgetMap);
37
37
  handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
38
38
  handleSelectedValueChange(selected, widgetMap);
39
+ handleIconVisibiltyChange(icon, widgetMap);
39
40
  };
40
41
  function handleTypeChange(switch_type, icon, unselected_icon, widgetMap) {
41
- widgetMap.toggle.nativeElement.classList.remove('filled-switch', 'icon', 'unselected-icon', 'condensed-switch', 'ios-switch');
42
+ widgetMap.toggle.nativeElement.classList.remove("filled-switch", "icon", "unselected-icon", "condensed-switch", "ios-switch");
42
43
  // Set CSS classes for the toggle widget based on the switch type
43
44
  if (switch_type === "Filled") {
44
- if (icon.toString().toLowerCase() === 'true') {
45
- widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon');
45
+ if (icon.toString().toLowerCase() === "true") {
46
+ widgetMap.toggle.nativeElement.classList.add("filled-switch");
47
+ widgetMap.container1.nativeElement.classList.add("icon");
46
48
  }
47
49
  else {
48
- widgetMap.toggle.nativeElement.classList.add('filled-switch');
50
+ widgetMap.toggle.nativeElement.classList.add("filled-switch");
49
51
  }
50
52
  // Add 'unselected-icon' class if no unselected_icon is specified
51
- if (unselected_icon == null || unselected_icon === "" || unselected_icon === " ") {
52
- widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon', 'unselected-icon');
53
+ if (unselected_icon == null ||
54
+ unselected_icon === "" ||
55
+ unselected_icon === " ") {
56
+ widgetMap.toggle.nativeElement.classList.add("filled-switch", "unselected-icon");
57
+ widgetMap.container1.nativeElement.classList.add("icon");
53
58
  }
54
59
  }
55
60
  else if (switch_type === "Condensed") {
56
61
  // Add 'condensed-switch' class
57
- widgetMap.toggle.nativeElement.classList.add('condensed-switch');
62
+ widgetMap.toggle.nativeElement.classList.add("condensed-switch");
58
63
  }
59
64
  else if (switch_type === "IOS") {
60
65
  // Add 'iOS-switch' class
61
- widgetMap.toggle.nativeElement.classList.add('ios-switch');
66
+ widgetMap.toggle.nativeElement.classList.add("ios-switch");
62
67
  }
63
68
  }
64
69
  function handleRequiredChange(required, widgetMap) {
@@ -71,11 +76,11 @@ function handleCheckedValueChange(checked_value, selected, widgetMap) {
71
76
  handleSelectedValueChange(selected, widgetMap);
72
77
  }
73
78
  function handleIconVisibiltyChange(icon, widgetMap) {
74
- if (icon.toString().toLowerCase() === 'true') {
75
- widgetMap.toggle.nativeElement.classList.add('icon');
79
+ if (icon.toString().toLowerCase() === "true") {
80
+ widgetMap.container1.nativeElement.classList.add("icon");
76
81
  }
77
82
  else {
78
- widgetMap.toggle.nativeElement.classList.remove('icon');
83
+ widgetMap.container1.nativeElement.classList.remove("icon");
79
84
  }
80
85
  }
81
86
  function handleUnCheckedValueChange(unchecked_value, selected, widgetMap) {
@@ -96,7 +101,7 @@ function handleSelectedValueChange(selected, widgetMap) {
96
101
  }
97
102
  else {
98
103
  // Log a warning if the selected value does not match known values
99
- console.warn('Selected value does not match any known value');
104
+ console.warn("Selected value does not match any known value");
100
105
  // Optionally set to a default value or handle the error
101
106
  widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue; // Default to unchecked
102
107
  }