@wavemaker/custom-widgets-m3 12.0.0-next.45073 → 12.0.0-next.45076
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 +34 -64
- custom-widgets-m3/index.d.ts +0 -1
- custom-widgets-m3/index.js +0 -1
- custom-widgets-m3/package.json +1 -1
- custom-widgets-m3/src/checkbox_set/page.min.js +2 -2
- custom-widgets-m3/src/discrete_slider/page.min.js +3 -3
- custom-widgets-m3/src/divider/page.min.js +1 -1
- custom-widgets-m3/src/input_chip/input_chip.d.ts +1 -0
- custom-widgets-m3/src/input_chip/input_chip.js +21 -26
- custom-widgets-m3/src/input_chip/page.min.js +4 -4
- custom-widgets-m3/src/radio_set/page.min.js +2 -2
- custom-widgets-m3/src/slider/page.min.js +3 -3
- custom-widgets-m3/src/slider/slider.js +2 -2
- custom-widgets-m3/src/switch_button/page.min.js +2 -2
- custom-widgets-m3/src/textfield/page.min.js +1 -1
- custom-widgets-m3/src/widget-registry.js +0 -6
- custom-widgets-m3/src/input_chip/input_chip.variables.d.ts +0 -0
- custom-widgets-m3/src/input_chip/input_chip.variables.js +0 -1
- custom-widgets-m3/src/payee_list/page.min.d.ts +0 -7
- custom-widgets-m3/src/payee_list/page.min.js +0 -7
- custom-widgets-m3/src/payee_list/payee_list.d.ts +0 -0
- custom-widgets-m3/src/payee_list/payee_list.js +0 -19
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var switch_button = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22switch-wrapper%22+conditionalclass%3D%22bind%3A%7B%27filled-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BFilled%26quot%3B%2C%0A%27condensed-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BCondensed%26quot%3B%2C++++%0A%27ios-switch-wrapper%27%3Aprops.switch_type++%3D%3D%3D+%26quot%3BIOS%26quot%3B%7D%22%3E%0A++++++++++++%3Cwm-checkbox+caption%3D%22Toggle%22+type%3D%22toggle%22+name%3D%22toggle%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22+datavalue%3D%22bind%3Aprops.selected%22+class%3D%22switch%22+checkedvalue%3D%22true%22+uncheckedvalue%3D%22false%22+required%3D%22bind%3Aprops.required%22+show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22icon-container%22+show%3D%22true%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22bind%3Aprops.unselected_icon%22+show%3D%22bind%3Aprops.unselected_icon%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon2%22+iconclass%3D%22bind%3Aprops.selected_icon%22+show%3D%22bind%3Aprops.selected_icon%22+class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite%22+required%3D%22false%22+captionposition%3D%22top%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22switch-wrapper%22+conditionalclass%3D%22bind%3A%7B%27filled-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BFilled%26quot%3B%2C%0A%27condensed-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BCondensed%26quot%3B%2C++++%0A%27ios-switch-wrapper%27%3Aprops.switch_type++%3D%3D%3D+%26quot%3BIOS%26quot%3B%7D%22%3E%0A++++++++++++%3Cwm-checkbox+caption%3D%22Toggle%22+type%3D%22toggle%22+name%3D%22toggle%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22+datavalue%3D%22bind%3Aprops.selected%22+class%3D%22switch%22+checkedvalue%3D%22true%22+uncheckedvalue%3D%22false%22+required%3D%22bind%3Aprops.required%22+show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22icon-container%22+show%3D%22true%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22bind%3Aprops.unselected_icon%22+show%3D%22bind%3Aprops.unselected_icon%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon2%22+iconclass%3D%22bind%3Aprops.selected_icon%22+show%3D%22bind%3Aprops.selected_icon%22+class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
3
|
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+Example%3A%0A+*+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%2C%0A++++%7D+%3D+Widget.props%3B%0A++++switch+%28propname%29+%7B%0A++++++++case+%22prop-switch_type%22%3A%0A++++++++++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-required%22%3A%0A++++++++++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-selected%22%3A%0A++++++++++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-checked_value%22%3A%0A++++++++++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-unchecked_value%22%3A%0A++++++++++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-icon%22%3A%0A++++++++++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%3B%0A%0A%2F*+Perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%2C%0A++++%7D+%3D+Widget.props%3B%0A++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A%7D%3B%0A%0Afunction+handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.nativeElement.classList.remove%28%0A++++++++%22filled-switch%22%2C%0A++++++++%22icon%22%2C%0A++++++++%22unselected-icon%22%2C%0A++++++++%22condensed-switch%22%2C%0A++++++++%22ios-switch%22%0A++++%29%3B%0A++++%2F%2F+Set+CSS+classes+for+the+toggle+widget+based+on+the+switch+type%0A++++if+%28switch_type+%3D%3D%3D+%22Filled%22%29+%7B%0A++++++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%22true%22%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%22filled-switch%22%29%3B%0A++++++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A++++++++%7D+else+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%22filled-switch%22%29%3B%0A++++++++%7D%0A++++++++%2F%2F+Add+%27unselected-icon%27+class+if+no+unselected_icon+is+specified%0A++++++++if+%28%0A++++++++++++unselected_icon+%3D%3D+null+%7C%7C%0A++++++++++++unselected_icon+%3D%3D%3D+%22%22+%7C%7C%0A++++++++++++unselected_icon+%3D%3D%3D+%22+%22%0A++++++++%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%0A++++++++++++++++%22filled-switch%22%2C%0A++++++++++++++++%22unselected-icon%22%0A++++++++++++%29%3B%0A++++++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A%0A++++++++%7D%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22Condensed%22%29+%7B%0A++++++++%2F%2F+Add+%27condensed-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%22condensed-switch%22%29%3B%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22IOS%22%29+%7B%0A++++++++%2F%2F+Add+%27iOS-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%22ios-switch%22%29%3B%0A++++%7D%0A%7D%0A%0Afunction+handleRequiredChange%28required%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27required%27+property+for+the+composite+widget%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27checkedvalue%27+and+%27uncheckedvalue%27+properties+for+the+toggle+widget%0A++++widgetMap.toggle.checkedvalue+%3D+checked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleIconVisibiltyChange%28icon%2C+widgetMap%29+%7B%0A++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%22true%22%29+%7B%0A++++++++widgetMap.container1.nativeElement.classList.add%28%22icon%22%29%3B%0A%0A++++%7D+else+%7B%0A++++++++widgetMap.container1.nativeElement.classList.remove%28%22icon%22%29%3B%0A%0A%0A++++%7D%0A%7D%0A%0Afunction+handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.uncheckedvalue+%3D+unchecked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleSelectedValueChange%28selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Retrieve+the+selected+value+from+page+parameters%0A++++var+selectedValue+%3D+selected%3B%0A%0A++++%2F%2F+Determine+the+correct+%27datavalue%27+based+on+the+selected+value%0A++++if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.checkedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+checked+value%2C+set+datavalue+to+checked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.checkedvalue%3B%0A++++%7D+else+if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.uncheckedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+unchecked+value%2C+set+datavalue+to+unchecked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B%0A++++%7D+else+%7B%0A++++++++%2F%2F+Log+a+warning+if+the+selected+value+does+not+match+known+values%0A++++++++console.warn%28%22Selected+value+does+not+match+any+known+value%22%29%3B%0A++++++++%2F%2F+Optionally+set+to+a+default+value+or+handle+the+error%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B+%2F%2F+Default+to+unchecked%0A++++%7D%0A%7D",
|
|
4
|
-
"styles": ".switch-wrapper+%7B%0A++++--wm-switch-height%3A+32px%3B%0A++++--wm-switch-width%3A+52px%3B%0A++++--wm-switch-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++--wm-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-active-border-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-switch-border-style%3A+solid%3B%0A++++--wm-switch-border-width%3A+2px%3B%0A++++--wm-switch-border-radius%3A+100px%3B%0A++++--wm-switch-caption-border-radius%3A+24px%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-caption-icon-width%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-height%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-size%3A+16px%3B%0A++++--wm-switch-caption-state-layer-color%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-switch-condensed-height%3A+14px%3B%0A++++--wm-switch-condensed-width%3A+34px%3B%0A++++--wm-switch-condensed-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-condensed-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-condensed-active-background%3A+var%28--wm-color-primary-active%29%3B%0A++++--wm-switch-condensed-caption-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-condensed-caption-border-radius%3A+24px%3B%0A++++--wm-switch-condensed-caption-icon-width%3A+var%28--wm-space-5%29%3B%0A++++--wm-switch-condensed-caption-icon-height%3A+var%28--wm-space-5%29%3B%0A++++--wm-switch-ios-height%3A+26px%3B%0A++++--wm-switch-ios-width%3A+42px%3B%0A++++--wm-switch-ios-background%3A+%23E9E9EA%3B%0A++++--wm-switch-ios-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-ios-active-background%3A+%2365C466%3B%0A++++--wm-switch-ios-border-radius%3A+100px%3B%0A++++--wm-switch-ios-caption-border-radius%3A+24px%3B%0A++++--wm-switch-ios-caption-width%3A+22px%3B%0A++++--wm-switch-ios-caption-height%3A+22px%3B%0A++++--wm-switch-ios-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-ios-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-ios-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-ios-caption-icon-width%3A+22px%3B%0A++++--wm-switch-ios-caption-icon-height%3A+22px%3B%0A++++--wm-switch-ios-caption-icon-size%3A+16px%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%2C%0A.condensed-switch-wrapper+.app-checkbox%2C%0A.ios-switch-wrapper+.app-checkbox+%7B%0A++++margin%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+%7B%0A++++margin%3A+8px%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper+.switch+label+span.caption%2C%0A.switch-wrapper+.switch+label+span.caption%3A%3Abefore+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+%7B%0A++++cursor%3A+pointer%3B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-border-color%29%3B%0A++++background%3A+var%28--wm-switch-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++height%3A+var%28--wm-switch-height%29%3B%0A++++min-height%3A+var%28--wm-switch-height%29%3B%0A++++width%3A+var%28--wm-switch-width%29%3B%0A++++user-select%3A+none%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++display%3A+block%3B%0A++++position%3A+relative%3B%0A++++box-shadow%3A+unset%3B%0A++++overflow%3A+visible%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.switch+label+%7B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-active-background%29%3B%0A++++background%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper.icon+.switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+%7B%0A++++background%3A+var%28--wm-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-caption-border-radius%29%3B%0A++++width%3A+var%28--wm-switch-caption-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-height%29%3B%0A++++min-height%3A+var%28--wm-switch-caption-height%29%3B%0A++++position%3A+absolute%3B%0A++++left%3A+4px%3B%0A++++top%3A+18px%3B%0A++++display%3A+flex%3B%0A++++justify-content%3A+space-between%3B%0A++++align-items%3A+center%3B%0A++++z-index%3A+1%3B%0A++++pointer-events%3A+none%3B%0A++++padding%3A+0px%3B%0A++++transition%3A+transform+0.3s+ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+12px%3B%0A++++left%3A+4px%3B%0A++++width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-icon-height%29%3B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A++++max-width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+20px%29%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Anot%28%3Achecked%29%29+.icon-container+span.start-icon+%7B%0A++++display%3A+block%3B%0A%7D%0A%0A.switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+span.end-icon+%7B%0A++++display%3A+block%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++background%3A+var%28--wm-switch-caption-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++width%3A+100%25%3B%0A++++height%3A+100%25%3B%0A++++min-height%3A+100%25%3B%0A++++min-width%3A+100%25%3B%0A++++color%3A+var%28--wm-switch-background%29%3B%0A++++overflow%3A+visible%3B%0A++++z-index%3A+10%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++color%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.switch-wrapper+%7B%0A++++position%3A+relative%3B%0A%7D%0A%0A.switch-wrapper+.icon-container%3A%3Abefore+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+1%3B%0A++++position%3A+absolute%3B%0A++++content%3A+%22%22%3B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+calc%28100%25+%2B+16px%29%3B%0A++++height%3A+calc%28100%25+%2B+16px%29%3B%0A++++background%3A+var%28--wm-switch-caption-state-layer-color%29%3B%0A++++box-shadow%3A+none%3B%0A++++outline%3A+none%3B%0A++++opacity%3A+0%3B%0A++++transform%3A+scale%281%29%3B%0A++++pointer-events%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahover+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-hover%29%3B%0A%7D%0A%0A.switch-wrapper%3Afocus+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A.switch-wrapper%3Aactive+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A%0A%2F*+condensed+styles+*%2F%0A%0A.condensed-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-switch-condensed-background%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-switch-condensed-caption-icon-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-switch-condensed-caption-icon-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-switch-condensed-caption-icon-width%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-switch-condensed-caption-icon-height%29%3B%0A++++--wm-switch-caption-icon-size%3A+var%28--wm-switch-condensed-caption-icon-size%29%3B%0A++++--wm-switch-height%3A+var%28--wm-switch-condensed-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-switch-condensed-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-switch-condensed-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-switch-condensed-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-switch-condensed-caption-border-radius%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.condensed-switch-wrapper+.condensed-switch+label%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.condensed-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+%7B%0A++++left%3A+-4px%3B%0A++++top%3A+5px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+5px%3B%0A++++left%3A+-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-condensed-width%29+-+var%28--wm-switch-condensed-caption-icon-width%29+%2B+8px%29%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-condensed-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-condensed-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A++++box-shadow%3A+0px+2px+1px+-1px+rgba%280%2C+0%2C+0%2C+0.2%29%2C+0px+1px+1px+0px+rgba%280%2C+0%2C+0%2C+0.14%29%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-condensed-caption-active-background%29%3B%0A%7D%0A%0A%0A%2F*+ios+styles+*%2F%0A%0A.ios-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-switch-ios-background%29%3B%0A++++--wm-switch-border-radius%3A+var%28--wm-switch-ios-border-radius%29%3B%0A++++--wm-switch-height%3A+var%28--wm-switch-ios-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-switch-ios-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-switch-ios-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-switch-ios-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-switch-ios-caption-border-radius%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-switch-ios-caption-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-switch-ios-caption-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-switch-ios-caption-height%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-switch-ios-caption-width%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-switch-ios-caption-active-background%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.ios-switch+label%2C%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch+label%3Einput%3Achecked%29+.ios-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.icon%3Ahas%28.app-toggle.checkbox.ios-switch%29+.ios-switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper.icon+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++left%3A+2px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+6px%29%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.ios-switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++display%3A+none%3B%0A%7D",
|
|
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
5
|
"variables": "%7B+%7D",
|
|
6
6
|
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22switch_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Switch%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20of%20the%20switch.%20Options%20include%20%27filled%27%2C%20%27condensed%27%2C%20and%20%27iOS%27.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Condensed%22%2C%20%22IOS%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Filled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20text%20displayed%20on%20the%20label%20of%20the%20switch.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Switch%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Enables%20or%20disables%20icon%20options%20for%20the%20switch.%20If%20true%2C%20you%20can%20select%20icons%20for%20the%20switch.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Selected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20selected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-check%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22unselected_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unselected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20unselected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20switch.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20switch.%20For%20example%2C%20%27true%27%20for%20checked%20and%20%27false%27%20for%20unchecked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22checked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Checked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20checked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22true%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22unchecked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unchecked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20unchecked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20switch%20is%20required.%20Set%20to%20true%20to%20make%20it%20a%20required%20field.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var textfield = {
|
|
2
2
|
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+captionposition%3D%22floating%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22labelCaption%22+caption%3D%22bind%3Aprops.label_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+class%3D%22form-field-wrapper%22+name%3D%22container2%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-leading-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonLeadingIcon%22+iconclass%3D%22bind%3Aprops.leading_icon_class%22+show%3D%22bind%3Aprops.leading_icon%22+deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-text+name%3D%22textField%22+updateon%3D%22default%22+placeholder%3D%22bind%3Aprops.placeholder_text%22+conditionalclass%3D%22bind%3Aprops.style.toLowerCase%28%29%22+disabled%3D%22bind%3Aprops.state.toLowerCase%28%29+%3D%3D+%26quot%3Bdisabled%26quot%3B%22+datavalue%3D%22bind%3Aprops.input_text%22%3E%3C%2Fwm-text%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon+btn-trailing-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22buttonTrailingIcon%22+iconclass%3D%22bind%3Aprops.trailing_icon_class%22+on-click%3D%22buttonTrailingIconClick%28%24event%2C+widget%29%22+show%3D%22bind%3Aprops.trailing_icon%22+deferload%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+class%3D%22help-wrapper%22+name%3D%22containerSupportingWrapper%22%3E%0A++++++++++++%3Cwm-label+padding%3D%22unset%22+class%3D%22p+help-block%22+type%3D%22p%22+name%3D%22labelSupportingText%22+caption%3D%22bind%3Aprops.supporting_text%22+show%3D%22bind%3Aprops.show_supporting_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
3
|
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27widgetMap%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27widgetMap.username.datavalue%27%0A+++++*%2F%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++leading_icon%2C%0A++++++++trailing_icon%2C%0A++++++++input_type%2C%0A++++++++required%0A++++%7D+%3D+Widget.props%0A++++handleLeadingIcon%28widgetMap%2C+leading_icon%29%3B%0A++++handleTrailingIcon%28widgetMap%2C+trailing_icon%29%3B%0A++++handleinputType%28widgetMap%2C+input_type%29%3B%0A++++handleRequired%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++leading_icon%2C%0A++++++++trailing_icon%2C%0A++++++++input_type%2C%0A++++++++required%0A++++%7D+%3D+Widget.props%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-leading_icon%27%3A%0A++++++++++++handleLeadingIcon%28widgetMap%2C+leading_icon%29%3B%0A++++++++++++break%0A++++++++case+%27prop-trailing_icon%27%3A%0A++++++++++++handleTrailingIcon%28widgetMap%2C+trailing_icon%29%3B%0A++++++++++++break%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequired%28widgetMap%2C+required%29%3B%0A++++++++++++break%0A++++++++case+%27prop-input_type%27%3A%0A++++++++++++handleinputType%28widgetMap%2C+input_type%29%3B%0A++++++++++++break%0A++++%7D%0A%7D%0A%0Afunction+handleLeadingIcon%28widgetMap%2C+leading_icon%29+%7B%0A++++widgetMap.textField.nativeElement.classList.remove%28%27with-leading-icon%27%29%3B%0A++++widgetMap.labelCaption.nativeElement.classList.remove%28%27with-leading-icon%27%29%3B%0A++++if+%28leading_icon+%3D%3D+true%29+%7B%0A++++++++widgetMap.labelCaption.class+%2B%3D+%27+with-leading-icon%27%3B%0A++++++++widgetMap.textField.class+%2B%3D+%27+with-leading-icon%27%3B%0A++++%7D%0A%7D%0A%0Afunction+handleTrailingIcon%28widgetMap%2C+trailing_icon%29+%7B%0A++++widgetMap.textField.nativeElement.classList.remove%28%27with-trailing-icon%27%29%3B%0A++++widgetMap.labelCaption.nativeElement.classList.remove%28%27with-trailing-icon%27%29%3B%0A++++if+%28trailing_icon+%3D%3D+true%29+%7B%0A++++++++widgetMap.labelCaption.class+%2B%3D+%27+with-trailing-icon%27%3B%0A++++++++widgetMap.textField.class+%2B%3D+%27+with-trailing-icon%27%3B%0A++++%7D%0A%7D%0A%0Afunction+handleRequired%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+handleinputType%28widgetMap%2C+input_type%29+%7B%0A++++widgetMap.textField.type+%3D+input_type%3B%0A%7D%0A%0AWidget.buttonTrailingIconClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++%2F%2F+Widget.invokeEvent%28%27trailingIconButtonOnClick%27%29%3B%0A%7D%3B",
|
|
4
|
-
"styles": ".wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-leading-icon+%7B%0A++++padding-left%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-trailing-icon+%7B%0A++++padding-right%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled+%7B%0A++++--wm-form-control-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++border-width%3A+0+0+1px+0%3B%0A++++border-radius%3A+var%28--wm-form-control-radius%29+var%28--wm-form-control-radius%29+0+0%3B%0A++++padding-bottom%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-focus%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled.ng-touched.ng-invalid%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+%7B%0A++++padding%3A+0%3B%0A++++background%3A+none%3B%0A++++border%3A+none%3B%0A++++min-height%3A+auto%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+.app-icon+%7B%0A++++font-size%3A+var%28--wm-icon-size-md%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-leading-icon%2C%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++position%3A+absolute%3B%0A++++z-index%3A+1%3B%0A++++top%3A+calc%28calc%28var%28--wm-form-control-height%29+-+var%28--wm-btn-icon-height%29+-+var%28--wm-btn-icon-margin%29+-+var%28--wm-btn-icon-margin%29%29+%2F+2%29%3B%0A++++left%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++left%3A+auto%3B%0A++++right%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+%7B%0A++++width%3A+100%25%3B%0A++++margin-top%3A+4px%3B%0A++++padding%3A+0+var%28--wm-form-control-padding%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block+%7B%0A++++margin%3A+0%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block.required%3Aafter+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget%3Ahas%28.form-control.ng-touched.ng-invalid%29+.help-wrapper+.help-block+%7B%0A++++--wm-help-block-color%3A+var%28--wm-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+var%28--wm-form-control-padding%29%29%3B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled+%7B%0A++++left%3A+var%28--wm-form-control-padding%29%3B%0A++++top%3A+calc%28var%28--wm-form-control-height%29*0.15%29%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled%3Abefore+%7B%0A++++background%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled.with-leading-icon+%7B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*+2.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D",
|
|
4
|
+
"styles": ".wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-leading-icon+%7B%0A++++padding-left%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.with-trailing-icon+%7B%0A++++padding-right%3A+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled+%7B%0A++++--wm-form-control-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++border-width%3A+0+0+1px+0%3B%0A++++border-radius%3A+var%28--wm-form-control-radius%29+var%28--wm-form-control-radius%29+0+0%3B%0A++++padding-bottom%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-focus%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.form-control.filled.ng-touched.ng-invalid%3Afocus+%7B%0A++++box-shadow%3A+inset+0+-2px+0+0+var%28--wm-form-control-border-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+%7B%0A++++padding%3A+0%3B%0A++++background%3A+none%3B%0A++++border%3A+none%3B%0A++++min-height%3A+auto%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn+.app-icon+%7B%0A++++font-size%3A+var%28--wm-icon-size-md%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-leading-icon%2C%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++position%3A+absolute%3B%0A++++z-index%3A+1%3B%0A++++top%3A+calc%28calc%28var%28--wm-form-control-height%29+-+var%28--wm-btn-icon-md-height%29+-+var%28--wm-btn-icon-md-margin%29+-+var%28--wm-btn-icon-md-margin%29%29+%2F+2%29%3B%0A++++left%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.form-field-wrapper+.btn-trailing-icon+%7B%0A++++left%3A+auto%3B%0A++++right%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+%7B%0A++++width%3A+100%25%3B%0A++++margin-top%3A+4px%3B%0A++++padding%3A+0+var%28--wm-form-control-padding%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block+%7B%0A++++margin%3A+0%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget+.help-wrapper+.help-block.required%3Aafter+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget%3Ahas%28.form-control.ng-touched.ng-invalid%29+.help-wrapper+.help-block+%7B%0A++++--wm-help-block-color%3A+var%28--wm-color-error%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+var%28--wm-form-control-padding%29%29%3B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating%3Anot%28.float-active%29+.control-label.with-leading-icon.with-trailing-icon+%7B%0A++++max-width%3A+calc%28100%25+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29+-+calc%28calc%28var%28--wm-form-control-padding%29*1.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled+%7B%0A++++left%3A+var%28--wm-form-control-padding%29%3B%0A++++top%3A+calc%28var%28--wm-form-control-height%29*0.15%29%3B%0A++++padding%3A+0%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled%3Abefore+%7B%0A++++background%3A+none%3B%0A%7D%0A%0A.wm-app+.app-composite-widget.caption-floating.float-active+.control-label.filled.with-leading-icon+%7B%0A++++left%3A+calc%28calc%28var%28--wm-form-control-padding%29*+1.5%29+%2B+var%28--wm-icon-size-md%29%29%3B%0A++++max-width%3A+calc%28100%25+-+var%28--wm-form-control-padding%29+-+var%28--wm-form-control-padding%29+-+calc%28calc%28var%28--wm-form-control-padding%29*+2.5%29+%2B+var%28--wm-icon-size-md%29%29%29%3B%0A%7D",
|
|
5
5
|
"variables": "%7B+%7D",
|
|
6
6
|
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22style%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20variant%20between%20outlined%20and%20filled.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Outlined%22%2C%20%22Filled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Outlined%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20TextField%20is%20interactive(enabled)%20or%20non-interactive(disabled)%20state.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22text_configurations%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Text%20configurations%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Input%20text%22%2C%20%22Label%20text%22%2C%20%22Placeholder%20text%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Input%20text%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Leading%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Leading%20Icon%2FButton.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Trailing%20Icon%2FButton.%20%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_supporting_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20supporting%20text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Supporting%20text(help%20text).%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Caption%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22placeholder_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Placeholder%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20caption%20text%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enter%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22supporting_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Supporting%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20supporting%20text(helper%20text)%20value%20of%20the%20TextField.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Supporting%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Leading%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-search%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Trailing%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22input_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Input%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20input%20type%20between%20text%2C%20password%20and%20tel.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22text%22%2C%20%22password%22%2C%20%22tel%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20textfiled%20to%20be%20mandatory%20while%20submittion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22trailingIconButtonOnClick%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22event%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Button%20onClick%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22buttonTrailingIconClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
|
7
7
|
};
|
|
@@ -23,12 +23,6 @@ export var widgetRegistry = [
|
|
|
23
23
|
"iconClass": "chips",
|
|
24
24
|
"desc": "Input chips based on Material 3 design system"
|
|
25
25
|
},
|
|
26
|
-
{
|
|
27
|
-
"name": "payee_list",
|
|
28
|
-
"displayName": "Payee List",
|
|
29
|
-
"iconClass": "checkboxset",
|
|
30
|
-
"desc": "Payee List"
|
|
31
|
-
},
|
|
32
26
|
{
|
|
33
27
|
"name": "radio_set",
|
|
34
28
|
"displayName": "Radioset",
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{ }
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export var payee_list = {
|
|
2
|
-
"markup": "%3Cwm-custom-widget-container+as%3D%22wm-checkboxset%22%3E%0A++++%3Cwm-label+class%3D%22p+media-heading%22+name%3D%22datavalue%22+caption%3D%22bind%3AwmCheckboxset.datavalue%22%3E%3C%2Fwm-label%3E%0A++++%3Cwm-list+listclass%3D%22list-group%22+itemclass%3D%22list-group-item%22+template%3D%22true%22+template-name%3D%22Contact+List%22+itemsperrow%3D%22xs-1+sm-1+md-1+lg-1%22+class%3D%22media-list%22+datafield%3D%22bind%3AwmCheckboxset.datafield%22+statehandler%3D%22URL%22+name%3D%22sizesList1%22+dataset%3D%22bind%3AwmCheckboxset.datasetItems%22%0A++++++++direction%3D%22vertical%22+on-click%3D%22selectItem%28%24event%2C+widget%29%22+navigation%3D%22None%22%3E%0A++++++++%3Cwm-listtemplate+layout%3D%22inline%22+name%3D%22listtemplate1%22%3E%0A++++++++++++%3Cwm-container+class%3D%22media-left%22+name%3D%22container2%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22wm-sl-l+sl-check%22+show%3D%22bind%3AwmCheckboxset.datasetItems%5B%24i%5D.selected%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-container+class%3D%22media-body%22+name%3D%22container3%22%3E%0A++++++++++++++++%3Cwm-picture+resizemode%3D%22contain%22+name%3D%22picture1%22+pictureplaceholder%3D%22bind%3AwmCheckboxset.datasetItems%5B%24i%5D.value.icon%22+shape%3D%22circle%22+width%3D%2250px%22+height%3D%2250px%22%3E%3C%2Fwm-picture%3E%0A++++++++++++++++%3Cwm-label+class%3D%22p+media-heading%22+name%3D%22firstName%22+caption%3D%22bind%3AwmCheckboxset.datasetItems%5B%24i%5D.value.firstName%22%3E%3C%2Fwm-label%3E%0A++++++++++++++++%3Cwm-label+class%3D%22p+media-heading%22+name%3D%22lastName%22+caption%3D%22bind%3AwmCheckboxset.datasetItems%5B%24i%5D.value.lastName%22%3E%3C%2Fwm-label%3E%0A++++++++++++++++%3Cwm-label+class%3D%22p+media-heading%22+name%3D%22details%22+caption%3D%22bind%3AwmCheckboxset.datasetItems%5B%24i%5D.value.details%22%3E%3C%2Fwm-label%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-listtemplate%3E%0A++++%3C%2Fwm-list%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
-
"script": "%2F*+%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*+%0A+++++*+variables+can+be+accessed+through+%27Page.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Page.Variables.loggedInUser.getData%28%29%0A+++++*+%0A+++++*+widgets+can+be+accessed+through+%27Page.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Page.Widgets.username.datavalue%27%0A+++++*%2F%0A++++console.log%28%27wmcheckboxset%27%2C+Widget.wmCheckboxset%29%3B%0A%7D%3B%0A%0AWidget.selectItem+%3D+function%28%24event%2C+widget%29+%7B%0A++++Widget.wmCheckboxset._select%28widget.item%2C+%24event%29%3B%0A%7D%3B",
|
|
4
|
-
"styles": ".app-container+%7B%0A++++min-width%3A+30px%3B%0A%7D%0A%0A.media-heading+%7B%0A++++display%3A+inline-block+%21important%3B%0A++++width%3A+auto+%21important%3B%0A++++padding%3A+0+0+0+15px%3B%0A%7D",
|
|
5
|
-
"variables": "%7B+%7D",
|
|
6
|
-
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-checkboxset%22%2C%0A%22properties%22%20%3A%20%7B%7D%0A%7D%0A"
|
|
7
|
-
};
|
|
File without changes
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Use App.getDependency for Dependency Injection
|
|
3
|
-
* eg: var DialogService = App.getDependency('DialogService');
|
|
4
|
-
*/
|
|
5
|
-
/* perform any action on widgets/variables within this block */
|
|
6
|
-
Widget.onReady = function () {
|
|
7
|
-
/*
|
|
8
|
-
* variables can be accessed through 'Widget.Variables' property here
|
|
9
|
-
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
|
10
|
-
* Widget.Variables.loggedInUser.getData()
|
|
11
|
-
*
|
|
12
|
-
* widgets can be accessed through 'Widget.Widgets' property here
|
|
13
|
-
* e.g. to get value of text widget named 'username' use following script
|
|
14
|
-
* 'Widget.Widgets.username.datavalue'
|
|
15
|
-
*/
|
|
16
|
-
};
|
|
17
|
-
Widget.selectItem = function ($event, widget) {
|
|
18
|
-
Widget.wmCheckboxset._select(widget.item, $event);
|
|
19
|
-
};
|