@wavemaker/custom-widgets-m3 12.0.0-next.45067 → 12.0.0-next.45068
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- custom-widgets-m3/custom-widgets-bundle.cjs.js +23 -24
- custom-widgets-m3/package.json +1 -1
- custom-widgets-m3/src/checkbox_set/checkbox_set.d.ts +10 -0
- custom-widgets-m3/src/checkbox_set/checkbox_set.js +46 -32
- custom-widgets-m3/src/checkbox_set/page.min.js +5 -5
- custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +8 -8
- custom-widgets-m3/src/discrete_slider/discrete_slider.js +29 -19
- custom-widgets-m3/src/icon_button/icon_button.js +0 -8
- custom-widgets-m3/src/icon_button/page.min.js +5 -5
- custom-widgets-m3/src/progressbar/page.min.js +5 -5
- custom-widgets-m3/src/progressbar/progressbar.d.ts +2 -0
- custom-widgets-m3/src/progressbar/progressbar.js +35 -39
- custom-widgets-m3/src/radio_set/page.min.js +3 -3
- custom-widgets-m3/src/radio_set/radio_set.d.ts +9 -0
- custom-widgets-m3/src/radio_set/radio_set.js +39 -29
- custom-widgets-m3/src/slider/slider.d.ts +9 -9
- custom-widgets-m3/src/slider/slider.js +37 -31
- custom-widgets-m3/src/switch_button/switch_button.d.ts +2 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var radio_set = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container
|
|
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%
|
|
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+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite1%22+class%3D%22caption-top%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%22container1%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-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%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+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-radioset.horizontal+%7B%0A++++flex-direction%3A+row%3B%0A++++display%3A+flex%3B%0A++++gap%3A+16px%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+1px%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++++right%3A+7px%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+-10px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%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%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29+%2B+10px%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%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29+%2B+10px%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-50%25%2C+5px%29+rotate%280deg%29+scale%281%29%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%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+5px%29+rotate%280deg%29+scale%281%29%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%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
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"
|
|
7
7
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
2
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
3
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
4
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
5
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
6
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
7
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
8
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
9
|
+
declare function handleRequiredChange(required: any, widgetMap: any): void;
|
|
@@ -2,34 +2,44 @@
|
|
|
2
2
|
* Use App.getDependency for Dependency Injection
|
|
3
3
|
* eg: var DialogService = App.getDependency('DialogService');
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
Widget.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
+
}
|
|
@@ -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,
|
|
4
|
-
declare function updateStartIconVisibility(iconActionsBool: any,
|
|
5
|
-
declare function updateEndIconVisibility(iconActionsBool: any,
|
|
6
|
-
declare function updateEndIconVisibility(iconActionsBool: any,
|
|
7
|
-
declare function updateSliderValue(
|
|
8
|
-
declare function toggleIconsVisibility(
|
|
9
|
-
declare function toggleIconsVisibility(
|
|
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(
|
|
16
|
+
declare function moveSlider(widgetMap: any, direction: any): void;
|
|
@@ -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
|
|
9
|
+
toggleIconsVisibility(widgetMap, showIconsBool, start_icon, end_icon, iconActionsBool);
|
|
10
10
|
break;
|
|
11
11
|
case "prop-start_icon":
|
|
12
|
-
updateStartIconVisibility(iconActionsBool,
|
|
12
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
13
13
|
break;
|
|
14
14
|
case "prop-end_icon":
|
|
15
|
-
updateEndIconVisibility(iconActionsBool,
|
|
15
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
16
16
|
break;
|
|
17
17
|
case "prop-value":
|
|
18
|
-
updateSliderValue(
|
|
18
|
+
updateSliderValue(widgetMap, datavalue);
|
|
19
19
|
break;
|
|
20
20
|
case "prop-show_labels":
|
|
21
|
-
toggleLabelVisibilty(
|
|
21
|
+
toggleLabelVisibilty(widgetMap, showLabelsBool);
|
|
22
22
|
break;
|
|
23
23
|
case "prop-max_value":
|
|
24
24
|
case "prop-min_value":
|
|
25
|
-
updateSliderValue(
|
|
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
|
|
36
|
-
toggleLabelVisibilty(
|
|
37
|
-
updateSliderValue(
|
|
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,
|
|
43
|
+
function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
44
44
|
var decrementButton = widgetMap.decrementButton;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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,
|
|
55
|
+
function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
51
56
|
var incrementButton = widgetMap.incrementButton;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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(
|
|
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
|
|
74
|
+
function toggleIconsVisibility(widgetMap, showIconsBool, startIcon, endIcon, iconActionsBool) {
|
|
65
75
|
var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
|
|
66
76
|
if (showIconsBool) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (endIcon)
|
|
70
|
-
updateEndIconVisibility(iconActionsBool, widgetMap);
|
|
77
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
78
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
71
79
|
}
|
|
72
80
|
else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
if (endIcon)
|
|
76
|
-
incrementButton.show = false;
|
|
81
|
+
decrementButton.show = false;
|
|
82
|
+
incrementButton.show = false;
|
|
77
83
|
}
|
|
78
84
|
}
|
|
79
|
-
function toggleLabelVisibilty(
|
|
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(
|
|
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);
|
|
@@ -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;
|