@wavemaker/custom-widgets-m3 12.0.0-next.141131 → 12.0.0-next.141132
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 +93 -72
- custom-widgets-m3/index.d.ts +1 -0
- custom-widgets-m3/index.js +1 -0
- custom-widgets-m3/package.json +3 -2
- custom-widgets-m3/scripts/generate-pagemin.d.ts +1 -0
- custom-widgets-m3/scripts/generate-pagemin.js +111 -0
- custom-widgets-m3/src/checkbox_set/checkbox_set.js +1 -0
- custom-widgets-m3/src/checkbox_set/page.min.js +5 -5
- custom-widgets-m3/src/discrete_slider/discrete_slider.js +1 -0
- custom-widgets-m3/src/discrete_slider/page.min.js +5 -5
- custom-widgets-m3/src/divider/page.min.js +5 -5
- custom-widgets-m3/src/icon_button/page.min.js +5 -5
- custom-widgets-m3/src/icon_button_toggleable/icon_button_toggleable.d.ts +0 -0
- custom-widgets-m3/src/icon_button_toggleable/icon_button_toggleable.js +17 -0
- custom-widgets-m3/src/icon_button_toggleable/page.min.d.ts +7 -0
- custom-widgets-m3/src/icon_button_toggleable/page.min.js +7 -0
- custom-widgets-m3/src/input_chip/page.min.js +5 -5
- custom-widgets-m3/src/progressbar/page.min.js +5 -5
- custom-widgets-m3/src/radio_set/page.min.js +4 -4
- custom-widgets-m3/src/radio_set/radio_set.js +2 -1
- custom-widgets-m3/src/slider/page.min.js +5 -5
- custom-widgets-m3/src/slider/slider.js +1 -0
- custom-widgets-m3/src/switch_button/page.min.js +5 -5
- custom-widgets-m3/src/switch_button/switch_button.js +1 -0
- custom-widgets-m3/src/textfield/page.min.js +5 -5
- custom-widgets-m3/src/textfield/textfield.js +1 -0
- custom-widgets-m3/src/widget-registry.js +8 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var switch_button = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container
|
|
3
|
-
"script": "%2F*%0A
|
|
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-4%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-space-4%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-container%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-condensed-shadow%3A+var%28--wm-elevation-shadow-1%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+8px%3B%0A++++top%3A+16px%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+-+var%28--wm-space-4%29%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+-12px%3B%0A++++top%3A+-12px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+calc%28var%28--wm-switch-caption-icon-width%29+%2B+var%28--wm-space-4%29%29%3B%0A++++height%3A+calc%28var%28--wm-switch-caption-icon-height%29+%2B+var%28--wm-space-4%29%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%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%3A%3Abefore%2C%0A.switch-wrapper.icon+.icon-container%3A%3Abefore+%7B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%3Ahover%7E.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-hover%29%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%3Afocus%7E.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%3Aactive%7E.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++++--wm-switch-caption-active-background%3A+var%28--wm-switch-condensed-caption-active-background%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+.icon-container%3A%3Abefore+%7B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%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++++box-shadow%3A+var%28--wm-switch-condensed-shadow%29%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%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++++box-shadow%3A+var%28--wm-switch-condensed-shadow%29%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%0A%0A.ios-switch-wrapper+.icon-container%3A%3Abefore+%7B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A%7D",
|
|
5
|
-
"variables": "%7B
|
|
6
|
-
"config": "%7B%0A%
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite%22%20required%3D%22false%22%20captionposition%3D%22top%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-label%20class%3D%22%20control-label%22%20notag%3D%22true%22%20name%3D%22label1%22%20caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%20class%3D%22switch-wrapper%22%20conditionalclass%3D%22bind%3A%7B'filled-switch-wrapper'%3A%20props.switch_type%20%3D%3D%3D%20%26quot%3BFilled%26quot%3B%2C%0A'condensed-switch-wrapper'%3A%20props.switch_type%20%3D%3D%3D%20%26quot%3BCondensed%26quot%3B%2C%20%20%20%20%0A'ios-switch-wrapper'%3Aprops.switch_type%20%20%3D%3D%3D%20%26quot%3BIOS%26quot%3B%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-checkbox%20caption%3D%22Toggle%22%20type%3D%22toggle%22%20name%3D%22toggle%22%20disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22%20datavalue%3D%22bind%3Aprops.selected%22%20class%3D%22switch%22%20checkedvalue%3D%22true%22%20uncheckedvalue%3D%22false%22%20required%3D%22bind%3Aprops.required%22%20show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container2%22%20class%3D%22icon-container%22%20show%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22icon1%22%20iconclass%3D%22bind%3Aprops.unselected_icon%22%20show%3D%22bind%3Aprops.unselected_icon%22%20class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22icon2%22%20iconclass%3D%22bind%3Aprops.selected_icon%22%20show%3D%22bind%3Aprops.selected_icon%22%20class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20Example%3A%0A%20*%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0AWidget.onPropertyChange%20%3D%20function(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20switch_type%2C%0A%20%20%20%20%20%20%20%20icon%2C%0A%20%20%20%20%20%20%20%20unselected_icon%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20unchecked_value%2C%0A%20%20%20%20%20%20%20%20checked_value%2C%0A%20%20%20%20%20%20%20%20selected%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22prop-switch_type%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-required%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleRequiredChange(required%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-selected%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-checked_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-unchecked_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleIconVisibiltyChange(icon%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0A%2F*%20Perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20switch_type%2C%0A%20%20%20%20%20%20%20%20icon%2C%0A%20%20%20%20%20%20%20%20unselected_icon%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20unchecked_value%2C%0A%20%20%20%20%20%20%20%20checked_value%2C%0A%20%20%20%20%20%20%20%20selected%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%3B%0A%20%20%20%20handleRequiredChange(required%2C%20widgetMap)%3B%0A%20%20%20%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%20%20%20%20handleIconVisibiltyChange(icon%2C%20widgetMap)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.selected%3B%0A%7D%3B%0A%0Afunction%20handleTypeChange(switch_type%2C%20icon%2C%20unselected_icon%2C%20widgetMap)%20%7B%0A%20%20%20%20widgetMap.toggle.nativeElement.classList.remove(%0A%20%20%20%20%20%20%20%20%22filled-switch%22%2C%0A%20%20%20%20%20%20%20%20%22icon%22%2C%0A%20%20%20%20%20%20%20%20%22unselected-icon%22%2C%0A%20%20%20%20%20%20%20%20%22condensed-switch%22%2C%0A%20%20%20%20%20%20%20%20%22ios-switch%22%0A%20%20%20%20)%3B%0A%20%20%20%20%2F%2F%20Set%20CSS%20classes%20for%20the%20toggle%20widget%20based%20on%20the%20switch%20type%0A%20%20%20%20if%20(switch_type%20%3D%3D%3D%20%22Filled%22)%20%7B%0A%20%20%20%20%20%20%20%20if%20(icon.toString().toLowerCase()%20%3D%3D%3D%20%22true%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22filled-switch%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22filled-switch%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'unselected-icon'%20class%20if%20no%20unselected_icon%20is%20specified%0A%20%20%20%20%20%20%20%20if%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%20null%20%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%3D%20%22%22%20%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20unselected_icon%20%3D%3D%3D%20%22%20%22%0A%20%20%20%20%20%20%20%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22filled-switch%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22unselected-icon%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%20else%20if%20(switch_type%20%3D%3D%3D%20%22Condensed%22)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'condensed-switch'%20class%0A%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22condensed-switch%22)%3B%0A%20%20%20%20%7D%20else%20if%20(switch_type%20%3D%3D%3D%20%22IOS%22)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20'iOS-switch'%20class%0A%20%20%20%20%20%20%20%20widgetMap.toggle.nativeElement.classList.add(%22ios-switch%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleRequiredChange(required%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Set%20the%20'required'%20property%20for%20the%20composite%20widget%0A%20%20%20%20widgetMap.composite.required%20%3D%20required%3B%0A%7D%0A%0Afunction%20handleCheckedValueChange(checked_value%2C%20selected%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Set%20the%20'checkedvalue'%20and%20'uncheckedvalue'%20properties%20for%20the%20toggle%20widget%0A%20%20%20%20widgetMap.toggle.checkedvalue%20%3D%20checked_value%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%7D%0A%0Afunction%20handleIconVisibiltyChange(icon%2C%20widgetMap)%20%7B%0A%20%20%20%20if%20(icon.toString().toLowerCase()%20%3D%3D%3D%20%22true%22)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.add(%22icon%22)%3B%0A%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.container1.nativeElement.classList.remove(%22icon%22)%3B%0A%0A%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleUnCheckedValueChange(unchecked_value%2C%20selected%2C%20widgetMap)%20%7B%0A%20%20%20%20widgetMap.toggle.uncheckedvalue%20%3D%20unchecked_value%3B%0A%20%20%20%20handleSelectedValueChange(selected%2C%20widgetMap)%3B%0A%7D%0A%0Afunction%20handleSelectedValueChange(selected%2C%20widgetMap)%20%7B%0A%20%20%20%20%2F%2F%20Retrieve%20the%20selected%20value%20from%20page%20parameters%0A%20%20%20%20var%20selectedValue%20%3D%20selected%3B%0A%0A%20%20%20%20%2F%2F%20Determine%20the%20correct%20'datavalue'%20based%20on%20the%20selected%20value%0A%20%20%20%20if%20(selectedValue%20%3D%3D%3D%20widgetMap.toggle.checkedvalue)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20selected%20value%20matches%20the%20checked%20value%2C%20set%20datavalue%20to%20checked%20value%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.checkedvalue%3B%0A%20%20%20%20%7D%20else%20if%20(selectedValue%20%3D%3D%3D%20widgetMap.toggle.uncheckedvalue)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20selected%20value%20matches%20the%20unchecked%20value%2C%20set%20datavalue%20to%20unchecked%20value%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.uncheckedvalue%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Log%20a%20warning%20if%20the%20selected%20value%20does%20not%20match%20known%20values%0A%20%20%20%20%20%20%20%20console.warn(%22Selected%20value%20does%20not%20match%20any%20known%20value%22)%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20Optionally%20set%20to%20a%20default%20value%20or%20handle%20the%20error%0A%20%20%20%20%20%20%20%20widgetMap.toggle.datavalue%20%3D%20widgetMap.toggle.uncheckedvalue%3B%20%2F%2F%20Default%20to%20unchecked%0A%20%20%20%20%7D%0A%7D%0A",
|
|
4
|
+
"styles": ".switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-height%3A%2032px%3B%0A%20%20%20%20--wm-switch-width%3A%2052px%3B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-switch-border-color%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-switch-active-border-color%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-switch-border-style%3A%20solid%3B%0A%20%20%20%20--wm-switch-border-width%3A%202px%3B%0A%20%20%20%20--wm-switch-border-radius%3A%20100px%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-tranistion%3A%200.25s%20ease-in%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20calc(var(--wm-switch-height)%20-%20var(--wm-space-2))%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20calc(var(--wm-switch-height)%20-%20var(--wm-space-2))%3B%0A%20%20%20%20--wm-switch-caption-icon-size%3A%2016px%3B%0A%20%20%20%20--wm-switch-caption-state-layer-color%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-switch-condensed-height%3A%2014px%3B%0A%20%20%20%20--wm-switch-condensed-width%3A%2034px%3B%0A%20%20%20%20--wm-switch-condensed-background%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-condensed-caption-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-condensed-active-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-switch-condensed-caption-active-background%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-switch-condensed-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-condensed-caption-icon-width%3A%20var(--wm-space-5)%3B%0A%20%20%20%20--wm-switch-condensed-caption-icon-height%3A%20var(--wm-space-5)%3B%0A%20%20%20%20--wm-switch-condensed-shadow%3A%20var(--wm-elevation-shadow-1)%3B%0A%20%20%20%20--wm-switch-ios-height%3A%2026px%3B%0A%20%20%20%20--wm-switch-ios-width%3A%2042px%3B%0A%20%20%20%20--wm-switch-ios-background%3A%20%23E9E9EA%3B%0A%20%20%20%20--wm-switch-ios-border-color%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-switch-ios-active-background%3A%20%2365C466%3B%0A%20%20%20%20--wm-switch-ios-border-radius%3A%20100px%3B%0A%20%20%20%20--wm-switch-ios-caption-border-radius%3A%2024px%3B%0A%20%20%20%20--wm-switch-ios-caption-width%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-height%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-ios-caption-active-background%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-switch-ios-tranistion%3A%200.25s%20ease-in%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-width%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-height%3A%2022px%3B%0A%20%20%20%20--wm-switch-ios-caption-icon-size%3A%2016px%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%2C%0A.condensed-switch-wrapper%20.app-checkbox%2C%0A.ios-switch-wrapper%20.app-checkbox%20%7B%0A%20%20%20%20margin%3A%200px%3B%0A%7D%0A%0A.switch-wrapper%20%7B%0A%20%20%20%20margin%3A%208px%3B%0A%7D%0A%0A.switch-wrapper%20.switch%20label%20input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper%20.switch%20label%20span.caption%2C%0A.switch-wrapper%20.switch%20label%20span.caption%3A%3Abefore%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.switch-wrapper%20.switch%20label%20%7B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20border%3A%20var(--wm-switch-border-width)%20var(--wm-switch-border-style)%20var(--wm-switch-border-color)%3B%0A%20%20%20%20background%3A%20var(--wm-switch-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-border-radius)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-height)%3B%0A%20%20%20%20min-height%3A%20var(--wm-switch-height)%3B%0A%20%20%20%20width%3A%20var(--wm-switch-width)%3B%0A%20%20%20%20user-select%3A%20none%3B%0A%20%20%20%20-webkit-tap-highlight-color%3A%20transparent%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20box-shadow%3A%20unset%3B%0A%20%20%20%20overflow%3A%20visible%3B%0A%20%20%20%20margin-block%3A%208px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.switch%20label%20%7B%0A%20%20%20%20border%3A%20var(--wm-switch-border-width)%20var(--wm-switch-border-style)%20var(--wm-switch-active-background)%3B%0A%20%20%20%20background%3A%20var(--wm-switch-active-background)%3B%0A%7D%0A%0A.switch-wrapper.icon%20.switch%20label%20%7B%0A%20%20%20%20padding%3A%200px%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-caption-border-radius)%3B%0A%20%20%20%20width%3A%20var(--wm-switch-caption-width)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-caption-height)%3B%0A%20%20%20%20min-height%3A%20var(--wm-switch-caption-height)%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20left%3A%208px%3B%0A%20%20%20%20top%3A%2016px%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20justify-content%3A%20space-between%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20padding%3A%200px%3B%0A%20%20%20%20transition%3A%20transform%200.3s%20ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%2012px%3B%0A%20%20%20%20left%3A%204px%3B%0A%20%20%20%20width%3A%20var(--wm-switch-caption-icon-width)%3B%0A%20%20%20%20height%3A%20var(--wm-switch-caption-icon-height)%3B%0A%20%20%20%20font-size%3A%20var(--wm-switch-caption-icon-size)%3B%0A%20%20%20%20max-width%3A%20var(--wm-switch-caption-icon-width)%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-width)%20-%20var(--wm-switch-caption-width)%20-%20var(--wm-space-4)))%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Anot(%3Achecked))%20.icon-container%20span.start-icon%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20span.end-icon%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-active-background)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20min-height%3A%20100%25%3B%0A%20%20%20%20min-width%3A%20100%25%3B%0A%20%20%20%20color%3A%20var(--wm-switch-background)%3B%0A%20%20%20%20overflow%3A%20visible%3B%0A%20%20%20%20z-index%3A%2010%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20font-size%3A%20var(--wm-switch-caption-icon-size)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20color%3A%20var(--wm-switch-active-background)%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%20.start-icon%20.switch-wrapper%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A%0A.switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20-webkit-appearance%3A%20none%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20left%3A%20-12px%3B%0A%20%20%20%20top%3A%20-12px%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20width%3A%20calc(var(--wm-switch-caption-icon-width)%20%2B%20var(--wm-space-4))%3B%0A%20%20%20%20height%3A%20calc(var(--wm-switch-caption-icon-height)%20%2B%20var(--wm-space-4))%3B%0A%20%20%20%20background%3A%20var(--wm-switch-caption-state-layer-color)%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20transform%3A%20scale(1)%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%7D%0A%0A.switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%3A%3Abefore%2C%0A.switch-wrapper.icon%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Ahover~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-hover)%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Afocus~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-focus)%3B%0A%7D%0A%0A.switch-wrapper%20.app-checkbox%3Aactive~.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-opacity-focus)%3B%0A%7D%0A%0A%0A%2F*%20condensed%20styles%20*%2F%0A%0A.condensed-switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-switch-condensed-background)%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20var(--wm-switch-condensed-caption-icon-width)%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20var(--wm-switch-condensed-caption-icon-height)%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-switch-condensed-caption-icon-width)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-switch-condensed-caption-icon-height)%3B%0A%20%20%20%20--wm-switch-caption-icon-size%3A%20var(--wm-switch-condensed-caption-icon-size)%3B%0A%20%20%20%20--wm-switch-height%3A%20var(--wm-switch-condensed-height)%3B%0A%20%20%20%20--wm-switch-width%3A%20var(--wm-switch-condensed-width)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-switch-condensed-active-background)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-switch-condensed-caption-background)%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%20var(--wm-switch-condensed-caption-border-radius)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-switch-condensed-caption-active-background)%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.condensed-switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.condensed-switch%20label%2C%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.condensed-switch%20label%20%7B%0A%20%20%20%20border%3A%200px%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20%7B%0A%20%20%20%20left%3A%20-4px%3B%0A%20%20%20%20top%3A%205px%3B%0A%20%20%20%20box-shadow%3A%20var(--wm-switch-condensed-shadow)%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%205px%3B%0A%20%20%20%20left%3A%20-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-condensed-width)%20-%20var(--wm-switch-condensed-caption-icon-width)%20%2B%208px))%3B%0A%7D%0A%0A.condensed-switch-wrapper%20.icon-container%20.start-icon%2C%0A.condensed-switch-wrapper%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-condensed-caption-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-switch-condensed-caption-border-radius)%3B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.icon-container%20.start-icon%2C%0A.condensed-switch-wrapper%3Ahas(.app-toggle.checkbox.condensed-switch%20label%3Einput%3Achecked)%20.icon-container%20.end-icon%20%7B%0A%20%20%20%20background%3A%20var(--wm-switch-condensed-caption-active-background)%3B%0A%7D%0A%0A%0A%2F*%20ios%20styles%20*%2F%0A%0A.ios-switch-wrapper%20%7B%0A%20%20%20%20--wm-switch-background%3A%20var(--wm-switch-ios-background)%3B%0A%20%20%20%20--wm-switch-border-radius%3A%20var(--wm-switch-ios-border-radius)%3B%0A%20%20%20%20--wm-switch-height%3A%20var(--wm-switch-ios-height)%3B%0A%20%20%20%20--wm-switch-width%3A%20var(--wm-switch-ios-width)%3B%0A%20%20%20%20--wm-switch-active-background%3A%20var(--wm-switch-ios-active-background)%3B%0A%20%20%20%20--wm-switch-caption-background%3A%20var(--wm-switch-ios-caption-background)%3B%0A%20%20%20%20--wm-switch-caption-border-radius%3A%20var(--wm-switch-ios-caption-border-radius)%3B%0A%20%20%20%20--wm-switch-caption-height%3A%20var(--wm-switch-ios-caption-height)%3B%0A%20%20%20%20--wm-switch-caption-width%3A%20var(--wm-switch-ios-caption-width)%3B%0A%20%20%20%20--wm-switch-caption-icon-height%3A%20var(--wm-switch-ios-caption-height)%3B%0A%20%20%20%20--wm-switch-caption-icon-width%3A%20var(--wm-switch-ios-caption-width)%3B%0A%20%20%20%20--wm-switch-caption-active-background%3A%20var(--wm-switch-ios-caption-active-background)%3B%0A%7D%0A%0A.ios-switch-wrapper%20.ios-switch%20label%2C%0A.ios-switch-wrapper%3Ahas(.app-toggle.checkbox.ios-switch%20label%3Einput%3Achecked)%20.ios-switch%20label%20%7B%0A%20%20%20%20border%3A%200px%3B%0A%7D%0A%0A.ios-switch-wrapper.icon%3Ahas(.app-toggle.checkbox.ios-switch)%20.ios-switch%20label%20%7B%0A%20%20%20%20padding%3A%200px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper%20.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon%20.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon%20.icon-container%20%7B%0A%20%20%20%20top%3A%2010px%3B%0A%20%20%20%20left%3A%202px%3B%0A%20%20%20%20box-shadow%3A%20var(--wm-switch-condensed-shadow)%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas(.app-toggle.checkbox.switch%20label%3Einput%3Achecked)%20.icon-container%20%7B%0A%20%20%20%20top%3A%2010px%3B%0A%20%20%20%20transform%3A%20translateX(calc(var(--wm-switch-width)%20-%20var(--wm-switch-caption-width)%20-%206px))%3B%0A%7D%0A%0A.ios-switch-wrapper%20.icon-container%20.start-icon%20.app-icon%2C%0A.ios-switch-wrapper%20.icon-container%20.end-icon%20.app-icon%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.ios-switch-wrapper%20.icon-container%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%20-8px%3B%0A%20%20%20%20top%3A%20-8px%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D",
|
|
6
|
+
"config": "%7B%0A%09%22widgetType%22%3A%20%22wm-checkbox%22%2C%0A%09%22properties%22%3A%20%7B%0A%09%09%22switch_type%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Switch%20Type%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20style%20of%20the%20switch.%20Options%20include%20'filled'%2C%20'condensed'%2C%20and%20'iOS'.%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Filled%22%2C%20%22Condensed%22%2C%20%22IOS%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Filled%22%0A%09%09%7D%2C%0A%09%09%22state%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22State%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20'disabled'%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Enabled%22%2C%20%22Disabled%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Enabled%22%0A%09%09%7D%2C%0A%09%09%22label_text%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Label%20Text%22%2C%0A%09%09%09%22description%22%3A%20%22Sets%20the%20text%20displayed%20on%20the%20label%20of%20the%20switch.%22%2C%0A%09%09%09%22value%22%3A%20%22%22%0A%09%09%7D%2C%0A%09%09%22icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22boolean%22%2C%0A%09%09%09%22displayName%22%3A%20%22Switch%20Icons%22%2C%0A%09%09%09%22description%22%3A%20%22Enables%20or%20disables%20icon%20options%20for%20the%20switch.%20If%20true%2C%20you%20can%20select%20icons%20for%20the%20switch.%22%2C%0A%09%09%09%22value%22%3A%20false%0A%09%09%7D%2C%0A%09%09%22selected_icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Selected%20Icon%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20selected%20state.%22%2C%0A%09%09%09%22value%22%3A%20%22fa%20fa-check%22%2C%0A%09%09%09%22widget%22%3A%20%22select-icon%22%0A%09%09%7D%2C%0A%09%09%22unselected_icon%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Unselected%20Icon%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20unselected%20state.%22%2C%0A%09%09%09%22value%22%3A%20%22fa%20fa-close%22%2C%0A%09%09%09%22widget%22%3A%20%22select-icon%22%0A%09%09%7D%2C%0A%09%09%22selected%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Default%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20default%20value%20of%20the%20switch.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20switch.%20For%20example%2C%20'true'%20for%20checked%20and%20'false'%20for%20unchecked.%22%2C%0A%09%09%09%22value%22%3A%20%22false%22%0A%09%09%7D%2C%0A%09%09%22checked_value%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Checked%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20checked.%22%2C%0A%09%09%09%22value%22%3A%20%22true%22%0A%09%09%7D%2C%0A%09%09%22unchecked_value%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Unchecked%20Value%22%2C%0A%09%09%09%22description%22%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20unchecked.%22%2C%0A%09%09%09%22value%22%3A%20%22false%22%0A%09%09%7D%2C%0A%09%09%22required%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22boolean%22%2C%0A%09%09%09%22displayName%22%3A%20%22Required%22%2C%0A%09%09%09%22description%22%3A%20%22Indicates%20whether%20the%20switch%20is%20required.%20Set%20to%20true%20to%20make%20it%20a%20required%20field.%22%2C%0A%09%09%09%22value%22%3A%20false%0A%09%09%7D%0A%09%7D%2C%0A%09%22events%22%3A%20%7B%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -37,6 +37,7 @@ Widget.onReady = function () {
|
|
|
37
37
|
handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
|
|
38
38
|
handleSelectedValueChange(selected, widgetMap);
|
|
39
39
|
handleIconVisibiltyChange(icon, widgetMap);
|
|
40
|
+
Widget.getDatavalue = function () { return Widget.props.selected; };
|
|
40
41
|
};
|
|
41
42
|
function handleTypeChange(switch_type, icon, unselected_icon, widgetMap) {
|
|
42
43
|
widgetMap.toggle.nativeElement.classList.remove("filled-switch", "icon", "unselected-icon", "condensed-switch", "ios-switch");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var textfield = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container%3E%0A
|
|
3
|
-
"script": "%2F*%0A
|
|
4
|
-
"styles": ".wm-app
|
|
5
|
-
"variables": "%7B
|
|
6
|
-
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite%22%20captionposition%3D%22floating%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%22labelCaption%22%20caption%3D%22bind%3Aprops.label_text%22%20conditionalclass%3D%22bind%3Aprops.style.toLowerCase()%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20class%3D%22form-field-wrapper%22%20name%3D%22container2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%20btn-leading-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22buttonLeadingIcon%22%20iconclass%3D%22bind%3Aprops.leading_icon_class%22%20show%3D%22bind%3Aprops.leading_icon%22%20deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-text%20name%3D%22textField%22%20updateon%3D%22default%22%20placeholder%3D%22bind%3Aprops.placeholder_text%22%20conditionalclass%3D%22bind%3Aprops.style.toLowerCase()%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%20%3D%3D%20%26quot%3Bdisabled%26quot%3B%22%20datavalue%3D%22bind%3Aprops.input_text%22%3E%3C%2Fwm-text%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%20btn-trailing-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22buttonTrailingIcon%22%20iconclass%3D%22bind%3Aprops.trailing_icon_class%22%20on-click%3D%22buttonTrailingIconClick(%24event%2C%20widget)%22%20show%3D%22bind%3Aprops.trailing_icon%22%20deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20class%3D%22help-wrapper%22%20name%3D%22containerSupportingWrapper%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-label%20padding%3D%22unset%22%20class%3D%22p%20help-block%22%20type%3D%22p%22%20name%3D%22labelSupportingText%22%20caption%3D%22bind%3Aprops.supporting_text%22%20show%3D%22bind%3Aprops.show_supporting_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
|
|
3
|
+
"script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%2F*%20perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20%2F*%0A%20%20%20%20%20*%20variables%20can%20be%20accessed%20through%20'Widget.Variables'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20dataSet%20in%20a%20staticVariable%20named%20'loggedInUser'%20use%20following%20script%0A%20%20%20%20%20*%20Widget.Variables.loggedInUser.getData()%0A%20%20%20%20%20*%0A%20%20%20%20%20*%20widgets%20can%20be%20accessed%20through%20'widgetMap'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20value%20of%20text%20widget%20named%20'username'%20use%20following%20script%0A%20%20%20%20%20*%20'widgetMap.username.datavalue'%0A%20%20%20%20%20*%2F%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20leading_icon%2C%0A%20%20%20%20%20%20%20%20trailing_icon%2C%0A%20%20%20%20%20%20%20%20input_type%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%0A%20%20%20%20handleLeadingIcon(widgetMap%2C%20leading_icon)%3B%0A%20%20%20%20handleTrailingIcon(widgetMap%2C%20trailing_icon)%3B%0A%20%20%20%20handleinputType(widgetMap%2C%20input_type)%3B%0A%20%20%20%20handleRequired(widgetMap%2C%20required)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.input_text%3B%0A%7D%3B%0A%0AWidget.onPropertyChange%20%3D%20function(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20leading_icon%2C%0A%20%20%20%20%20%20%20%20trailing_icon%2C%0A%20%20%20%20%20%20%20%20input_type%2C%0A%20%20%20%20%20%20%20%20required%0A%20%20%20%20%7D%20%3D%20Widget.props%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20'prop-leading_icon'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleLeadingIcon(widgetMap%2C%20leading_icon)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%0A%20%20%20%20%20%20%20%20case%20'prop-trailing_icon'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleTrailingIcon(widgetMap%2C%20trailing_icon)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%0A%20%20%20%20%20%20%20%20case%20'prop-required'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleRequired(widgetMap%2C%20required)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%0A%20%20%20%20%20%20%20%20case%20'prop-input_type'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleinputType(widgetMap%2C%20input_type)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleLeadingIcon(widgetMap%2C%20leading_icon)%20%7B%0A%20%20%20%20widgetMap.textField.nativeElement.classList.remove('with-leading-icon')%3B%0A%20%20%20%20widgetMap.labelCaption.nativeElement.classList.remove('with-leading-icon')%3B%0A%20%20%20%20if%20(leading_icon%20%3D%3D%20true)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.labelCaption.class%20%2B%3D%20'%20with-leading-icon'%3B%0A%20%20%20%20%20%20%20%20widgetMap.textField.class%20%2B%3D%20'%20with-leading-icon'%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleTrailingIcon(widgetMap%2C%20trailing_icon)%20%7B%0A%20%20%20%20widgetMap.textField.nativeElement.classList.remove('with-trailing-icon')%3B%0A%20%20%20%20widgetMap.labelCaption.nativeElement.classList.remove('with-trailing-icon')%3B%0A%20%20%20%20if%20(trailing_icon%20%3D%3D%20true)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.labelCaption.class%20%2B%3D%20'%20with-trailing-icon'%3B%0A%20%20%20%20%20%20%20%20widgetMap.textField.class%20%2B%3D%20'%20with-trailing-icon'%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleRequired(widgetMap%2C%20required)%20%7B%0A%20%20%20%20widgetMap.composite.required%20%3D%20required%3B%0A%7D%0A%0Afunction%20handleinputType(widgetMap%2C%20input_type)%20%7B%0A%20%20%20%20widgetMap.textField.type%20%3D%20input_type%3B%0A%7D%0A%0AWidget.buttonTrailingIconClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20%2F%2F%20Widget.invokeEvent('trailingIconButtonOnClick')%3B%0A%7D%3B%0A",
|
|
4
|
+
"styles": ".wm-app%20.app-composite-widget%20.form-field-wrapper%20.form-control.with-leading-icon%20%7B%0A%20%20%20%20padding-left%3A%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md))%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.form-control.with-trailing-icon%20%7B%0A%20%20%20%20padding-right%3A%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md))%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.form-control.filled%20%7B%0A%20%20%20%20--wm-form-control-background%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20border-width%3A%200%200%201px%200%3B%0A%20%20%20%20border-radius%3A%20var(--wm-form-control-radius)%20var(--wm-form-control-radius)%200%200%3B%0A%20%20%20%20padding-bottom%3A%200%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.form-control.filled%3Afocus%20%7B%0A%20%20%20%20box-shadow%3A%20inset%200%20-2px%200%200%20var(--wm-form-control-border-color-focus)%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.form-control.filled.ng-touched.ng-invalid%3Afocus%20%7B%0A%20%20%20%20box-shadow%3A%20inset%200%20-2px%200%200%20var(--wm-form-control-border-color-error)%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.btn%20%7B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20background%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20min-height%3A%20auto%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.btn%20.app-icon%20%7B%0A%20%20%20%20font-size%3A%20var(--wm-icon-size-md)%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.btn-leading-icon%2C%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.btn-trailing-icon%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20top%3A%20calc(calc(var(--wm-form-control-height)%20-%20var(--wm-btn-icon-md-height)%20-%20var(--wm-btn-icon-md-margin)%20-%20var(--wm-btn-icon-md-margin))%20%2F%202)%3B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.form-field-wrapper%20.btn-trailing-icon%20%7B%0A%20%20%20%20left%3A%20auto%3B%0A%20%20%20%20right%3A%200%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.help-wrapper%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20margin-top%3A%204px%3B%0A%20%20%20%20padding%3A%200%20var(--wm-form-control-padding)%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.help-wrapper%20.help-block%20%7B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%200%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%20.help-wrapper%20.help-block.required%3Aafter%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget%3Ahas(.form-control.ng-touched.ng-invalid)%20.help-wrapper%20.help-block%20%7B%0A%20%20%20%20--wm-help-block-color%3A%20var(--wm-color-error)%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating%3Anot(.float-active)%20.control-label.with-leading-icon%20%7B%0A%20%20%20%20max-width%3A%20calc(100%25%20-%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md))%20-%20var(--wm-form-control-padding))%3B%0A%20%20%20%20left%3A%20calc(calc(var(--wm-form-control-padding)*%201.5)%20%2B%20var(--wm-icon-size-md))%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating%3Anot(.float-active)%20.control-label.with-trailing-icon%20%7B%0A%20%20%20%20max-width%3A%20calc(100%25%20-%20var(--wm-form-control-padding)%20-%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md)))%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating%3Anot(.float-active)%20.control-label.with-leading-icon.with-trailing-icon%20%7B%0A%20%20%20%20max-width%3A%20calc(100%25%20-%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md))%20-%20calc(calc(var(--wm-form-control-padding)*1.5)%20%2B%20var(--wm-icon-size-md)))%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating.float-active%20.control-label.filled%20%7B%0A%20%20%20%20left%3A%20var(--wm-form-control-padding)%3B%0A%20%20%20%20top%3A%20calc(var(--wm-form-control-height)*0.15)%3B%0A%20%20%20%20padding%3A%200%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating.float-active%20.control-label.filled%3Abefore%20%7B%0A%20%20%20%20background%3A%20none%3B%0A%7D%0A%0A.wm-app%20.app-composite-widget.caption-floating.float-active%20.control-label.filled.with-leading-icon%20%7B%0A%20%20%20%20left%3A%20calc(calc(var(--wm-form-control-padding)*%201.5)%20%2B%20var(--wm-icon-size-md))%3B%0A%20%20%20%20max-width%3A%20calc(100%25%20-%20var(--wm-form-control-padding)%20-%20var(--wm-form-control-padding)%20-%20calc(calc(var(--wm-form-control-padding)*%202.5)%20%2B%20var(--wm-icon-size-md)))%3B%0A%7D%0A",
|
|
5
|
+
"variables": "%7B%20%7D%0A",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-input-text%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22style%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20variant%20between%20outlined%20and%20filled.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Outlined%22%2C%20%22Filled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Outlined%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20TextField%20is%20interactive(enabled)%20or%20non-interactive(disabled)%20state.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22text_configurations%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Text%20configurations%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20you%20to%20specify%20different%20text%20types%20for%20the%20TextField%2C%20including%20input%20text%2C%20label%20text%2C%20and%20placeholder%20text.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Input%20text%22%2C%20%22Label%20text%22%2C%20%22Placeholder%20text%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Input%20text%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Leading%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Leading%20Icon%2FButton.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Trailing%20Icon%2FButton.%20%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_supporting_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20supporting%20text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Supporting%20text(help%20text).%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Caption%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22placeholder_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Placeholder%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20text%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enter%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22supporting_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Supporting%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20supporting%20text(helper%20text)%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Supporting%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Leading%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-search%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Trailing%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Input%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20input%20type%20between%20text%2C%20password%20and%20tel.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22text%22%2C%20%22password%22%2C%20%22tel%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20textfiled%20to%20be%20mandatory%20while%20submittion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22trailingIconButtonOnClick%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22event%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Button%20onClick%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22buttonTrailingIconClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -19,6 +19,7 @@ Widget.onReady = function () {
|
|
|
19
19
|
handleTrailingIcon(widgetMap, trailing_icon);
|
|
20
20
|
handleinputType(widgetMap, input_type);
|
|
21
21
|
handleRequired(widgetMap, required);
|
|
22
|
+
Widget.getDatavalue = function () { return Widget.props.input_text; };
|
|
22
23
|
};
|
|
23
24
|
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
24
25
|
var widgetMap = Widget.Widgets;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var widgetRegistry = [
|
|
2
2
|
{
|
|
3
3
|
"name": "checkbox_set",
|
|
4
|
-
"displayName": "
|
|
4
|
+
"displayName": "Checkboxset",
|
|
5
5
|
"iconClass": "checkboxset",
|
|
6
6
|
"desc": "Checkbox set control supporting Material 3 design system"
|
|
7
7
|
},
|
|
@@ -58,5 +58,11 @@ export var widgetRegistry = [
|
|
|
58
58
|
"displayName": "Progress bar",
|
|
59
59
|
"iconClass": "progress",
|
|
60
60
|
"desc": "Progress bar widget based on Material 3 design system"
|
|
61
|
-
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "icon_button_toggleable",
|
|
64
|
+
"displayName": "Icon Button Toggleable",
|
|
65
|
+
"iconClass": "button",
|
|
66
|
+
"desc": "Icon Button Toggleable based on Material 3 design system"
|
|
67
|
+
},
|
|
62
68
|
];
|