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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. custom-widgets-m3/custom-widgets-bundle.cjs.js +422 -0
  2. custom-widgets-m3/package.json +6 -3
  3. custom-widgets-m3/scripts/build.js +4 -3
  4. custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +24 -9
  5. custom-widgets-m3/src/discrete_slider/discrete_slider.js +178 -141
  6. custom-widgets-m3/src/discrete_slider/page.min.js +4 -4
  7. custom-widgets-m3/src/divider/divider.d.ts +4 -0
  8. custom-widgets-m3/src/divider/divider.js +39 -25
  9. custom-widgets-m3/src/divider/page.min.js +5 -5
  10. custom-widgets-m3/src/slider/slider.d.ts +7 -2
  11. custom-widgets-m3/src/switch_button/page.min.js +5 -5
  12. custom-widgets-m3/src/switch_button/switch_button.d.ts +6 -0
  13. custom-widgets-m3/src/switch_button/switch_button.js +93 -23
  14. custom-widgets-m3/src/widget-registry.d.ts +1 -1
  15. custom-widgets-m3/webpack.config.cjs.d.ts +31 -0
  16. custom-widgets-m3/webpack.config.cjs.js +40 -0
custom-widgets-m3/src/divider/divider.js CHANGED
@@ -1,28 +1,42 @@
1
- Widget.onReady = function () {
2
- var orientation_array = Widget.props.orientation.toLowerCase().split("/");
3
- var orientation = orientation_array[0]; // Vertical or Horizontal
4
- var length = orientation_array[1];
5
- Widget.Widgets.divider1.class = (" " + orientation + "-divider");
6
- Widget.Widgets.divider1.class += (" " + length);
7
- var divider1 = Widget.Widgets.divider1;
8
- if (orientation === "vertical" && length === "full-width") {
9
- var vertical_height = "".concat(Widget.props.vertical_height, "px");
10
- divider1.$element.css({
11
- 'height': "".concat(vertical_height),
12
- });
1
+ Widget.onPropertyChange = function (propName, newValue, oldValue) {
2
+ var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
3
+ var widgetMap = Widget.Widgets;
4
+ var relevantProps = ["prop-vertical_height", "prop-orientation"];
5
+ if (relevantProps.includes(propName)) {
6
+ updateDivider(widgetMap.divider1, orientation, vertical_height);
13
7
  }
14
- else if (orientation === "vertical" && length === "inset") {
15
- var vertical_height = Widget.props.vertical_height - 16;
16
- vertical_height = "".concat(vertical_height, "px");
17
- divider1.$element.css({
18
- 'height': "".concat(vertical_height),
19
- });
8
+ };
9
+ Widget.onReady = function () {
10
+ var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
11
+ var widgetMap = Widget.Widgets;
12
+ updateDivider(widgetMap.divider1, orientation, vertical_height);
13
+ };
14
+ function updateDivider(divider, orientation_prop, vertical_height) {
15
+ var orientationArray = orientation_prop.toLowerCase().split("/");
16
+ var orientation = orientationArray[0]; // Vertical or Horizontal
17
+ var length = orientationArray[1];
18
+ resetAndUpdateDividerClasses(divider, orientation, length);
19
+ if (orientation === "vertical") {
20
+ var height = calculateHeight(length, vertical_height);
21
+ setDividerHeight(divider, height);
20
22
  }
21
- else if (orientation === "vertical" && length === "middle-inset") {
22
- var vertical_height = Widget.props.vertical_height - 32;
23
- vertical_height = "".concat(vertical_height, "px");
24
- divider1.$element.css({
25
- 'height': "".concat(vertical_height),
26
- });
23
+ }
24
+ function resetAndUpdateDividerClasses(divider, orientation, length) {
25
+ divider.nativeElement.classList.remove("full-width", "middle-inset", "horizontal-divider", "vertical-divider", "inset");
26
+ divider.nativeElement.classList.add("".concat(orientation, "-divider"), length);
27
+ }
28
+ function calculateHeight(length, vertical_height) {
29
+ switch (length) {
30
+ case "full-width":
31
+ return vertical_height;
32
+ case "inset":
33
+ return vertical_height - 16;
34
+ case "middle-inset":
35
+ return vertical_height - 32;
36
+ default:
37
+ return vertical_height;
27
38
  }
28
- };
39
+ }
40
+ function setDividerHeight(divider, height) {
41
+ divider.nativeElement.style.setProperty("height", "".concat(height, "px"));
42
+ }
custom-widgets-m3/src/divider/page.min.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export var divider = {
2
- markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22divider1%22+class%3D%22horizontal-divider+full-width%22+style%3D%22+%22%3E%3C%2Fwm-container%3E%0A%0A++++%3C%21--+Height+of+vertical+divider+will+be+supplied+using+inline+styles+and+the+value+can+be+picked+up+from+node+css.+%0A++++A+minimum+height+has+been+defined+in+the+event+that+the+user+uses+a+custom+widget+divider.+--%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
- script: "Widget.onReady+%3D+function%28%29+%7B%0A++++const+orientation_array+%3D+Widget.props.orientation.toLowerCase%28%29.split%28%22%2F%22%29%3B%0A++++const+orientation+%3D+orientation_array%5B0%5D%3B+%2F%2F+Vertical+or+Horizontal%0A++++const+length+%3D+orientation_array%5B1%5D%3B%0A%0A++++Widget.Widgets.divider1.class+%3D+%28%22+%22+%2B+orientation+%2B+%22-divider%22%29%3B%0A++++Widget.Widgets.divider1.class+%2B%3D+%28%22+%22+%2B+length%29%3B%0A++++let+divider1+%3D+Widget.Widgets.divider1%3B%0A%0A++++if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22full-width%22%29+%7B%0A++++++++let+vertical_height+%3D+%60%24%7BWidget.props.vertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+16%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22middle-inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+32%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D%0A%0A%7D",
4
- styles: ".horizontal-divider+%7B%0A++++display%3A+flex%3B%0A++++border-top%3A+1px+solid+%23CAC4D0%3B%0A++++height%3A+1px+%21important%3B%0A%7D%0A%0A.app-container%3E.horizontal-divider.full-width+%7B%0A++++width%3A+100%25%3B%0A++++margin%3A+auto%3B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.horizontal-divider.inset+%7B%0A++++margin-left%3A+16px%3B%0A%7D%0A%0A.horizontal-divider.middle-inset+%7B%0A++++display%3A+flex%3B%0A++++margin-left%3A+16px%3B%0A++++margin-right%3A+16px%3B%0A%7D%0A%0A.vertical-divider+%7B%0A++++width%3A+1px%3B%0A++++border-left%3A+1px+solid+%23CAC4D0%3B%0A++++min-height%3A+1px%3B%0A%7D%0A%0A.vertical-divider.full-width+%7B%0A++++margin-top%3A+0%3B%0A++++margin-bottom%3A+0%3B%0A%7D%0A%0A.vertical-divider.inset+%7B%0A++++margin-top%3A+16px%3B%0A++++box-sizing%3A+border-box%3B%0A%7D%0A%0A.vertical-divider.middle-inset+%7B%0A++++margin-top%3A+16px%3B%0A++++margin-bottom%3A+16px%3B%0A%7D",
5
- variables: "%7B+%7D",
6
- config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22orientation%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%22Orientation%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20style%20of%20the%20M3%20divider%20being%20used.%20Default%20value%20is%20horizontal%2Ffull-width.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%2Ffull-width%22%2C%20%22horizontal%2Fmiddle-inset%22%2C%20%22horizontal%2Finset%22%2C%20%22vertical%2Ffull-width%22%2C%20%22vertical%2Fmiddle-inset%22%2C%20%22vertical%2Finset%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%2Ffull-width%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22vertical_height%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Height%20(only%20for%20vertical)%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20height%20of%20the%20vertical%20divider%20(in%20px)%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%202%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%22onRender%22%20%3A%20%7B%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%20%20%20%20%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D"
2
+ "markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-container+name%3D%22divider1%22+class%3D%22divider%22%3E%3C%2Fwm-container%3E%0A++++%3C%21--+Height+of+vertical+divider+will+be+supplied+using+inline+styles+and+the+value+can+be+picked+up+from+node+css.+%0A++++A+minimum+height+has+been+defined+in+the+event+that+the+user+uses+a+custom+widget+divider.+--%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
+ "script": "Widget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++orientation%2C%0A++++++++vertical_height%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+relevantProps+%3D+%5B%22prop-vertical_height%22%2C+%22prop-orientation%22%5D%3B%0A++++if+%28relevantProps.includes%28propName%29%29+%7B%0A++++++++updateDivider%28widgetMap.divider1%2C+orientation%2C+vertical_height%29%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++orientation%2C%0A++++++++vertical_height%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++updateDivider%28widgetMap.divider1%2C+orientation%2C+vertical_height%29%3B%0A%7D%3B%0A%0Afunction+updateDivider%28divider%2C+orientation_prop%2C+vertical_height%29+%7B%0A++++const+orientationArray+%3D+orientation_prop.toLowerCase%28%29.split%28%22%2F%22%29%3B%0A++++const+orientation+%3D+orientationArray%5B0%5D%3B+%2F%2F+Vertical+or+Horizontal%0A++++const+length+%3D+orientationArray%5B1%5D%3B%0A++++resetAndUpdateDividerClasses%28divider%2C+orientation%2C+length%29%3B%0A%0A++++if+%28orientation+%3D%3D%3D+%22vertical%22%29+%7B%0A++++++++const+height+%3D+calculateHeight%28length%2C+vertical_height%29%3B%0A++++++++setDividerHeight%28divider%2C+height%29%3B%0A++++%7D%0A%7D%0A%0Afunction+resetAndUpdateDividerClasses%28divider%2C+orientation%2C+length%29+%7B%0A++++divider.nativeElement.classList.remove%28%0A++++++++%22full-width%22%2C%0A++++++++%22middle-inset%22%2C%0A++++++++%22horizontal-divider%22%2C%0A++++++++%22vertical-divider%22%2C%0A++++++++%22inset%22%0A++++%29%3B%0A%0A++++divider.nativeElement.classList.add%28%60%24%7Borientation%7D-divider%60%2C+length%29%3B%0A%7D%0A%0Afunction+calculateHeight%28length%2C+vertical_height%29+%7B%0A++++switch+%28length%29+%7B%0A++++++++case+%22full-width%22%3A%0A++++++++++++return+vertical_height%3B%0A++++++++case+%22inset%22%3A%0A++++++++++++return+vertical_height+-+16%3B%0A++++++++case+%22middle-inset%22%3A%0A++++++++++++return+vertical_height+-+32%3B%0A++++++++default%3A%0A++++++++++++return+vertical_height%3B%0A++++%7D%0A%7D%0A%0Afunction+setDividerHeight%28divider%2C+height%29+%7B%0A++++divider.nativeElement.style.setProperty%28%22height%22%2C+%60%24%7Bheight%7Dpx%60%29%3B%0A%7D",
4
+ "styles": ".divider+%7B%0A++++--wm-divider-border-width%3A+var%28--wm-border-width%29%3B%0A++++--wm-divider-border-style%3A+var%28--wm-border-style%29%3B%0A++++--wm-divider-border-color%3A+var%28--wm-color-outline-variant%29%3B%0A++++--wm-divider-inset-width%3A+var%28--wm-space-4%29%3B%0A++++--wm-vertical-divider-width%3A+1px%3B%0A%7D%0A%0A.divider+%7B%0A++++display%3A+flex%3B%0A++++border-top%3A+var%28--wm-divider-border-width%29+var%28--wm-divider-border-style%29+var%28--wm-divider-border-color%29%3B%0A++++height%3A+1px%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.app-container%3E.divider.full-width+%7B%0A++++width%3A+100%25%3B%0A++++margin%3A+auto%3B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.divider.inset+%7B%0A++++margin-left%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.divider.middle-inset+%7B%0A++++display%3A+flex%3B%0A++++margin-inline%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.vertical-divider+%7B%0A++++width%3A+var%28--wm-vertical-divider-width%29%3B%0A++++border-left%3A+var%28--wm-divider-border-width%29+var%28--wm-divider-border-style%29+var%28--wm-divider-border-color%29%3B%0A++++min-height%3A+1px%3B%0A++++margin-inline%3A+8px%3B%0A%7D%0A%0A.vertical-divider.full-width+%7B%0A++++margin-top%3A+0%3B%0A++++margin-bottom%3A+0%3B%0A%7D%0A%0A.vertical-divider.inset+%7B%0A++++margin-top%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.vertical-divider.middle-inset+%7B%0A++++margin-block%3A+var%28--wm-divider-inset-width%29%3B%0A%7D",
5
+ "variables": "%7B+%7D",
6
+ "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22orientation%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%22Orientation%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20style%20of%20the%20M3%20divider%20being%20used.%20Default%20value%20is%20horizontal%2Ffull-width.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%2Ffull-width%22%2C%20%22horizontal%2Fmiddle-inset%22%2C%20%22horizontal%2Finset%22%2C%20%22vertical%2Ffull-width%22%2C%20%22vertical%2Fmiddle-inset%22%2C%20%22vertical%2Finset%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%2Ffull-width%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22vertical_height%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Height%20(only%20for%20vertical)%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20height%20of%20the%20vertical%20divider%20(in%20px)%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%202%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%22onRender%22%20%3A%20%7B%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%20%20%20%20%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D"
7
7
  };
custom-widgets-m3/src/slider/slider.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  declare function convertToBoolean(value: any): boolean;
2
+ declare function convertToBoolean(value: any): boolean;
3
+ declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
2
4
  declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
3
5
  declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
6
+ declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
4
7
  declare function updateSliderValue(datavalue: any, widgetMap: any): void;
8
+ declare function toggleIconsVisibility(showIconsBool: any, iconActionsBool: any, widgetMap: any): void;
5
9
  declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
6
10
  declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
7
- declare function activeSliderElement(): void;
11
+ declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
8
12
  declare function activeSliderElement(widgetMap: any): void;
13
+ declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
9
14
  declare function getSliderPercentage(value: any): number;
10
- declare function getSliderPercentage(value: any): number;
15
+ declare function moveSlider(direction: any, widgetMap: any): void;
11
16
  declare function moveSlider(direction: any, widgetMap: any): void;
custom-widgets-m3/src/switch_button/page.min.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export var switch_button = {
2
- markup: "%3Cwm-custom-widget-container%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+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+checkedvalue%3D%22true%22+uncheckedvalue%3D%22false%22+required%3D%22bind%3Aprops.required%22+show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22icon-container%22+show%3D%22true%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22bind%3Aprops.unselected_icon%22+show%3D%22bind%3Aprops.unselected_icon%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon2%22+iconclass%3D%22bind%3Aprops.selected_icon%22+show%3D%22bind%3Aprops.selected_icon%22+class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
- script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+Example%3A%0A+*+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+Perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+Access+variables+through+%27Widget.Variables%27%0A+++++*+Example%3A+To+get+data+from+a+static+variable+named+%27loggedInUser%27%2C+use%3A%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+Access+widgets+through+%27Widget.Widgets%27%0A+++++*+Example%3A+To+get+the+value+of+a+text+widget+named+%27username%27%2C+use%3A%0A+++++*+Widget.Widgets.username.datavalue%0A+++++*%2F%0A%0A++++%2F%2F+Set+CSS+classes+for+the+toggle+widget+based+on+the+switch+type%0A++++if+%28Widget.props.switch_type+%3D%3D%3D+%22Filled%22%29+%7B%0A++++++++%2F%2F+Add+%27filled-switch%27+and+possibly+%27icon%27+class%0A++++++++if+%28Widget.props.icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch+icon%27%3B%0A++++++++%7D+else+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch%27%3B%0A++++++++%7D%0A++++++++%2F%2F+Add+%27unselected-icon%27+class+if+no+unselected_icon+is+specified%0A++++++++if+%28Widget.props.unselected_icon+%3D%3D+null+%7C%7C+Widget.props.unselected_icon+%3D%3D%3D+%22%22+%7C%7C+Widget.props.unselected_icon+%3D%3D%3D+%22+%22%29+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch+icon+unselected-icon%27%3B%0A++++++++%7D%0A%0A++++%7D+else+if+%28Widget.props.switch_type+%3D%3D%3D+%22Condensed%22%29+%7B%0A++++++++%2F%2F+Add+%27condensed-switch%27+class%0A++++++++Widget.Widgets.toggle.class+%2B%3D+%27+condensed-switch%27%3B%0A++++%7D+else+if+%28Widget.props.switch_type+%3D%3D%3D+%22IOS%22%29+%7B%0A++++++++%2F%2F+Add+%27iOS-switch%27+class%0A++++++++Widget.Widgets.toggle.class+%2B%3D+%27+iOS-switch%27%3B%0A++++%7D%0A%0A++++%2F%2F+Set+the+%27required%27+property+for+the+composite+widget%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A++++%2F%2F+Set+the+%27checkedvalue%27+and+%27uncheckedvalue%27+properties+for+the+toggle+widget%0A++++Widget.Widgets.toggle.checkedvalue+%3D+Widget.props.checked_value%3B%0A++++Widget.Widgets.toggle.uncheckedvalue+%3D+Widget.props.unchecked_value%3B%0A%0A++++%2F%2F+Retrieve+the+selected+value+from+page+parameters%0A++++var+selectedValue+%3D+Widget.props.selected%3B%0A%0A++++%2F%2F+Determine+the+correct+%27datavalue%27+based+on+the+selected+value%0A++++if+%28selectedValue+%3D%3D%3D+Widget.Widgets.toggle.checkedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+checked+value%2C+set+datavalue+to+checked+value%0A++++++++Widget.Widgets.toggle.datavalue+%3D+Widget.Widgets.toggle.checkedvalue%3B%0A++++%7D+else+if+%28selectedValue+%3D%3D%3D+Widget.Widgets.toggle.uncheckedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+unchecked+value%2C+set+datavalue+to+unchecked+value%0A++++++++Widget.Widgets.toggle.datavalue+%3D+Widget.Widgets.toggle.uncheckedvalue%3B%0A++++%7D+else+%7B%0A++++++++%2F%2F+Log+a+warning+if+the+selected+value+does+not+match+known+values%0A++++++++console.warn%28%27Selected+value+does+not+match+any+known+value%27%29%3B%0A++++++++%2F%2F+Optionally+set+to+a+default+value+or+handle+the+error%0A++++++++Widget.Widgets.toggle.datavalue+%3D+Widget.Widgets.toggle.uncheckedvalue%3B+%2F%2F+Default+to+unchecked%0A++++%7D%0A%7D",
4
- styles: ".condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch+%7B%0A++++padding%3A+6px+0%3B%0A++++left%3A+-6px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.unchecked%2C%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel+%7B%0A++++z-index%3A+0%3B%0A++++position%3A+relative%3B%0A++++display%3A+inline-block%3B%0A++++color%3A+rgba%280%2C+0%2C+0%2C+0.87%29%3B%0A++++background-color%3A+unset+%21important%3B%0A++++border%3A+unset%3B%0A++++width%3A+auto%3B%0A++++height%3A+unset%3B%0A++++box-shadow%3A+unset%3B%0A++++border-radius%3A+unset%3B%0A++++overflow%3A+visible%3B%0A++++min-height%3A+unset%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.unchecked%3E.switch+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A%0A%2F*+Input+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++-moz-appearance%3A+none%3B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+-1%3B%0A++++position%3A+absolute%3B%0A++++top%3A+-8px%3B%0A++++display%3A+block%3B%0A++++margin%3A+0%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+40px%3B%0A++++height%3A+40px%3B%0A++++background-color%3A+rgba%280%2C+0%2C+0%2C+0.38%29%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++++transition%3A+opacity+0.3s+0.1s%2C+transform+0.2s+0.1s%3B%0A++++right%3A+0px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.unchecked%3Einput+%7B%0A++++left%3A+4px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-checkbox.checkbox.condensed-switch+label+input%3Afocus+%7B%0A++++outline%3A+unset+%21important%3B%0A%7D%0A%0A%0A%2F*+Caption+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3E.caption+%7B%0A++++display%3A+inline-block%3B%0A++++width%3A+100%25%3B%0A++++cursor%3A+pointer%3B%0A++++min-height%3A+unset%3B%0A++++padding-left%3A+unset%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A%0A%2F*+Track+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3E.caption%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++%2F*+float%3A+right%3B+*%2F%0A++++display%3A+inline-block%3B%0A++++margin%3A+5px+0+5px+14px%3B%0A++++border-radius%3A+7px%3B%0A++++width%3A+40px%3B%0A++++height%3A+14px%3B%0A++++background-color%3A+rgba%280%2C+0%2C+0%2C+0.38%29%3B%0A++++vertical-align%3A+top%3B%0A++++transition%3A+background-color+0.2s%2C+opacity+0.2s%3B%0A++++visibility%3A+visible%3B%0A++++float%3A+left%3B%0A++++border%3A+unset%3B%0A++++top%3A+unset%3B%0A++++left%3A+unset%3B%0A%7D%0A%0A%0A%2F*+Thumb+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3E.caption%3A%3Aafter+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++top%3A+3px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+20px%3B%0A++++height%3A+20px%3B%0A++++background-color%3A+var%28--wm-color-on-primary%29%3B%0A++++box-shadow%3A+0+3px+1px+-2px+rgba%280%2C+0%2C+0%2C+0.2%29%2C+0+2px+2px+0+rgba%280%2C+0%2C+0%2C+0.14%29%2C+0+1px+5px+0+rgba%280%2C+0%2C+0%2C+0.12%29%3B%0A++++transition%3A+background-color+0.2s%2C+transform+0.2s%3B%0A++++visibility%3A+visible%3B%0A++++left%3A+16px%3B%0A++++border%3A+unset%3B%0A++++transform%3A+unset%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.unchecked%3E.caption%3A%3Aafter+%7B%0A++++left%3A+14px%3B%0A%7D%0A%0A%0A%2F*+Checked+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Achecked+%7B%0A++++background-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++left%3A+25px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++background-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++transform%3A+translateX%2818px%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch+input%5Btype%3Dcheckbox%5D%3Achecked%7E.switch%2C%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.unchecked%3E.switch+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A%0A%2F*+Hover%2C+Focus+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Ahover%3Einput+%7B%0A++++opacity%3A+0.04%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Afocus+%7B%0A++++opacity%3A+0.12%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Ahover%3Einput%3Afocus+%7B%0A++++opacity%3A+0.16%3B%0A%7D%0A%0A%0A%2F*+Active+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Aactive+%7B%0A++++opacity%3A+1%3B%0A++++transform%3A+scale%280%29%3B%0A++++transition%3A+transform+0s%2C+opacity+0s%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Aactive%2B.caption%3A%3Abefore+%7B%0A++++background-color%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%3Einput%3Achecked%3Aactive%2B.caption%3A%3Abefore+%7B%0A++++background-color%3A+var%28--wm-state-primary-active%29%3B%0A%7D%0A%0A%0A%2F*+Disabled+*%2F%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.disabled%3Einput%3Adisabled+%7B%0A++++opacity%3A+0%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.disabled%3Einput%3Adisabled%2B.caption+%7B%0A++++color%3A+var%28--wm-color-shadow%29%3B%0A++++cursor%3A+not-allowed%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel.disabled%3Einput%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++background-color%3A+rgba%280%2C+0%2C+0%2C+0.38%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-container.icon-container+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A%0A%2F*+iOS+Switch+Styles+*%2F%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label.unchecked%2C%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label+%7B%0A++++position%3A+relative%3B%0A++++display%3A+inline-block%3B%0A++++cursor%3A+pointer%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++box-shadow%3A+unset%3B%0A++++border%3A+unset%3B%0A++++height%3A+unset%3B%0A++++width%3A+unset%3B%0A++++margin-left%3A+var%28--wm-space-1%29%3B%0A++++min-height%3A+unset%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label.unchecked+%7B%0A++++background-color%3A+%23E9E9EA+%21important%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+.caption+%7B%0A++++position%3A+relative%3B%0A++++display%3A+inline-block%3B%0A++++width%3A+46px%3B%0A++++height%3A+26px%3B%0A++++background-color%3A+%23E9E9EA%3B%0A++++border-radius%3A+23px%3B%0A++++vertical-align%3A+middle%3B%0A++++transition%3A+background-color+0.3s+ease%3B%0A++++min-height%3A+unset%3B%0A++++padding-left%3A+unset%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label+.caption%3A%3Abefore+%7B%0A++++all%3A+unset%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+.caption%3A%3Aafter+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++left%3A+0%3B%0A++++top%3A+2px%3B%0A++++width%3A+22px%3B%0A++++height%3A+22px%3B%0A++++background-color%3A+%23fff%3B%0A++++border-radius%3A+11px%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%2C+0px+1px+3px+0px+rgba%280%2C+0%2C+0%2C+0.12%29%3B%0A++++transform%3A+translateX%282px%29%3B%0A++++transition%3A+transform+0.3s+ease%3B%0A++++visibility%3A+visible%3B%0A++++border%3A+unset%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+input+%7B%0A++++position%3A+absolute%3B%0A++++opacity%3A+0%3B%0A++++pointer-events%3A+none%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+input%3Achecked%2B.caption+%7B%0A++++background-color%3A+%2365C466%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+input%3Adisabled+%7B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label.disabled+%7B%0A++++cursor%3A+not-allowed%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+input%3Achecked%2B.caption%3A%3Aafter+%7B%0A++++transform%3A+translateX%2822px%29%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+input%5Btype%3Dcheckbox%5D%3Achecked%7E.switch%2C%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch%3Elabel.unchecked%3E.switch+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.iOS-switch-wrapper+.app-container.icon-container+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A%0A%2F*+Material3+Design+Styles++*%2F%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.unchecked%2C%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+%7B%0A++++user-select%3A+none%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++display%3A+block%3B%0A++++width%3A+50px%3B%0A++++min-height%3A+32px%3B%0A++++position%3A+relative%3B%0A++++cursor%3A+pointer%3B%0A++++box-shadow%3A+unset%3B%0A++++background-color%3A+unset%3B%0A++++border%3A+unset%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.unchecked.disabled+.caption%3A%3Abefore+%7B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+.caption+%7B%0A++++position%3A+absolute%3B%0A++++inset%3A+0%3B%0A++++cursor%3A+pointer%3B%0A++++border%3A+2px+solid+var%28--wm-color-outline%29%3B%0A++++background-color%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++border-radius%3A+28px%3B%0A++++visibility%3A+visible%3B%0A++++color%3A+transparent%3B%0A++++margin-top%3A+var%28--wm-space-0%29%3B%0A++++padding-left%3A+unset%3B%0A++++min-height%3A+unset%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+.caption%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++width%3A+16px%3B%0A++++height%3A+16px%3B%0A++++left%3A+0px%3B%0A++++top%3A+0px%3B%0A++++background-color%3A+var%28--wm-color-outline%29%3B%0A++++border-radius%3A+28px%3B%0A++++margin%3A+6px%3B%0A++++transition%3A+0.25s+ease-in%3B%0A++++visibility%3A+visible%3B%0A++++z-index%3A+1%3B%0A++++border%3A+unset%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch.icon.unselected-icon+label+.caption%3A%3Abefore+%7B%0A++++width%3A+16px%3B%0A++++height%3A+16px%3B%0A++++margin%3A+6px%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch.unselected-icon+label+input%3Achecked%2B.caption%3A%3Abefore%2C%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+input%3Achecked%2B.caption%3A%3Abefore+%7B%0A++++width%3A+24px%3B%0A++++height%3A+24px%3B%0A++++left%3A+calc%28100%25+-+28px%29%3B%0A++++background-color%3A+var%28--wm-color-on-primary%29%3B%0A++++margin%3A+2px%3B%0A++++border-color%3A+transparent%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch.icon+label+.caption%3A%3Abefore+%7B%0A++++width%3A+24px%3B%0A++++height%3A+24px%3B%0A++++margin%3A+2px%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2Bspan.caption+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++border%3A+2px+solid+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28%5Bdisabled%3D%22true%22%5D%29%3Ahas%28.checkbox.app-toggle.filled-switch%29+%7B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28%5Bdisabled%3D%22true%22%5D%29%3Ahas%28.checkbox.app-toggle.filled-switch%29+.control-label+%7B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+.caption%3A%3Aafter+%7B%0A++++all%3A+unset%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+input%5Btype%3Dcheckbox%5D%3Achecked%7E.switch%2C%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch%3Elabel.unchecked%3E.switch+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Adisabled%2Bspan.caption+%7B%0A++++border-color%3A+var%28--wm-state-opacity-focus%29%3B%0A++++background-color%3A+var%28--wm-state-on-surface-focus%29%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label+input%5Btype%3D%22checkbox%22%5D%3Ais%28%3Achecked%29%3Adisabled%2B.caption%3A%3Abefore+%7B%0A++++background-color%3A+var%28--wm-color-surface-bright%29%3B%0A++++color%3A+%23D3D3D3%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.unchecked.disabled+input%3Adisabled+.caption+%7B%0A++++border-color%3A+var%28--wm-state-surface-variant-focus%29%3B%0A%7D%0A%0A.filled-switch-wrapper+%7B%0A++++position%3A+relative%3B%0A++++width%3A+max-content%3B%0A++++margin%3A+8px+4px%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Einput+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+1%3B%0A++++position%3A+absolute%3B%0A++++left%3A+-4px%3B%0A++++top%3A+-4px%3B%0A++++display%3A+block%3B%0A++++margin%3A+0%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+40px%3B%0A++++height%3A+40px%3B%0A++++background-color%3A+var%28--wm-color-on-background%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++++overflow%3A+visible%3B%0A++++pointer-events%3A+none%3B%0A++++transition%3A+opacity+0.3s%2C+transform+0.25s%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Ahover%3Einput%3Ahover+%7B%0A++++opacity%3A+0.08%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Anot%28.disabled%29%3Ahover%3Einput%3Ahover%2Bspan.caption%3A%3Abefore+%7B%0A++++background-color%3A+var%28--wm-color-on-surface-variant%29%3B%0A%7D%0A%0A%0A%2F*+check+active+state*%2F%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Ahover%3Einput%3Achecked%3Ahover%2Bspan.caption%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Einput%3Achecked+%7B%0A++++left%3A+unset%3B%0A++++right%3A+-4px%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Ahover%3Einput%3Achecked+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Ahover%3Einput%3Afocus+%7B%0A++++opacity%3A+0.12%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label%3Ahover%3Einput%3Achecked%3Ahover+%7B%0A++++opacity%3A+0.16%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.disabled%3Ahover%3Einput%3Ahover+%7B%0A++++opacity%3A+0%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.disabled%3Espan.caption+%7B%0A++++cursor%3A+not-allowed%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-checkbox.checkbox.filled-switch+label+input%3Afocus+%7B%0A++++outline%3A+unset+%21important%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-container.icon-container+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+0px%3B%0A++++left%3A+0px%3B%0A++++width%3A+100%25%3B%0A++++height%3A+calc%28100%25+-+4px%29%3B%0A++++display%3A+flex%3B%0A++++pointer-events%3A+none%3B%0A++++z-index%3A+1%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-container.icon-container+.app-icon-wrapper.start-icon+%7B%0A++++width%3A+100%25%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex+%21important%3B%0A++++align-items%3A+center%3B%0A++++height%3A+32px%3B%0A++++color%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++font-size%3A+16px%3B%0A++++visibility%3A+hidden%3B%0A++++padding-left%3A+7px%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-container.icon-container+.app-icon-wrapper.start-icon+.app-icon%2C%0A.filled-switch-wrapper+.app-container.icon-container+.app-icon-wrapper.end-icon+.app-icon+%7B%0A++++padding-right%3A+var%28--wm-space-0%29%3B%0A%7D%0A%0A.filled-switch-wrapper+.app-container.icon-container+.app-icon-wrapper.end-icon+%7B%0A++++width%3A+100%25%3B%0A++++justify-content%3A+right%3B%0A++++display%3A+inline-flex%3B%0A++++padding-right%3A+9px%3B%0A++++height%3A+34px%3B%0A++++color%3A+var%28--wm-color-surface-tint%29%3B%0A++++visibility%3A+hidden%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.filled-switch-wrapper+input%5Btype%3D%22checkbox%22%5D%3Achecked%7E.app-container.icon-container+%7B%0A++++visibility%3A+visible%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch.icon%29+.app-container.icon-container+%7B%0A++++display%3A+flex+%21important%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch%29+.app-container.icon-container+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch+label+input%5Btype%3D%22checkbox%22%5D%3Ais%28%3Achecked%29%3Adisabled%2B.caption%29+.app-container.icon-container+.app-icon-wrapper.end-icon+%7B%0A++++color%3A+var%28--wm-color-surface-container-highest%29%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch.icon-checked+label.unchecked%29+.icon-container.app-container+.app-icon-wrapper.start-icon+%7B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch+label.unchecked%29+.icon-container.app-container+.app-icon-wrapper.start-icon+%7B%0A++++visibility%3A+visible%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch+label%3Einput%3Achecked%29+.icon-container.app-container+.app-icon-wrapper.end-icon+%7B%0A++++visibility%3A+visible%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch+label.disabled%2C%0A.iOS-switch-wrapper+.app-toggle.checkbox.iOS-switch+label.disabled%2C%0A.filled-switch-wrapper+.app-toggle.checkbox.filled-switch+label.disabled+%7B%0A++++opacity%3A+unset%3B%0A%7D",
5
- variables: "%7B+%7D",
6
- config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%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",
2
+ "markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22switch-wrapper%22+conditionalclass%3D%22bind%3A%7B%27filled-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BFilled%26quot%3B%2C%0A%27condensed-switch-wrapper%27%3A+props.switch_type+%3D%3D%3D+%26quot%3BCondensed%26quot%3B%2C++++%0A%27ios-switch-wrapper%27%3Aprops.switch_type++%3D%3D%3D+%26quot%3BIOS%26quot%3B%7D%22%3E%0A++++++++++++%3Cwm-checkbox+caption%3D%22Toggle%22+type%3D%22toggle%22+name%3D%22toggle%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%3Ftrue%3Afalse%22+datavalue%3D%22bind%3Aprops.selected%22+class%3D%22switch%22+checkedvalue%3D%22true%22+uncheckedvalue%3D%22false%22+required%3D%22bind%3Aprops.required%22+show%3D%22true%22%3E%3C%2Fwm-checkbox%3E%0A++++++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22icon-container%22+show%3D%22true%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22bind%3Aprops.unselected_icon%22+show%3D%22bind%3Aprops.unselected_icon%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon2%22+iconclass%3D%22bind%3Aprops.selected_icon%22+show%3D%22bind%3Aprops.selected_icon%22+class%3D%22end-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
3
+ "script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+Example%3A%0A+*+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%0A++++%7D+%3D+Widget.props%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-switch_type%27%3A%0A++++++++++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-selected%27%3A%0A++++++++++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-checked_value%27%3A%0A++++++++++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-unchecked_value%27%3A%0A++++++++++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-icon%27%3A%0A++++++++++++handleIconVisibiltyChange%28icon%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0A%2F*+Perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+%7B%0A++++++++switch_type%2C%0A++++++++icon%2C%0A++++++++unselected_icon%2C%0A++++++++required%2C%0A++++++++unchecked_value%2C%0A++++++++checked_value%2C%0A++++++++selected%0A++++%7D+%3D+Widget.props%0A++++handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29%3B%0A++++handleRequiredChange%28required%2C+widgetMap%29%3B%0A++++handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%0A%7D%0A%0Afunction+handleTypeChange%28switch_type%2C+icon%2C+unselected_icon%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.nativeElement.classList.remove%28%27filled-switch%27%2C+%27icon%27%2C+%27unselected-icon%27%2C+%27condensed-switch%27%2C+%27ios-switch%27%29%0A++++%2F%2F+Set+CSS+classes+for+the+toggle+widget+based+on+the+switch+type%0A++++if+%28switch_type+%3D%3D%3D+%22Filled%22%29+%7B%0A++++++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%2C+%27icon%27%29%0A++++++++%7D+else+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%29%0A%0A++++++++%7D%0A++++++++%2F%2F+Add+%27unselected-icon%27+class+if+no+unselected_icon+is+specified%0A++++++++if+%28unselected_icon+%3D%3D+null+%7C%7C+unselected_icon+%3D%3D%3D+%22%22+%7C%7C+unselected_icon+%3D%3D%3D+%22+%22%29+%7B%0A++++++++++++widgetMap.toggle.nativeElement.classList.add%28%27filled-switch%27%2C+%27icon%27%2C+%27unselected-icon%27%29%0A%0A++++++++%7D%0A%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22Condensed%22%29+%7B%0A++++++++%2F%2F+Add+%27condensed-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27condensed-switch%27%29%0A%0A++++%7D+else+if+%28switch_type+%3D%3D%3D+%22IOS%22%29+%7B%0A++++++++%2F%2F+Add+%27iOS-switch%27+class%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27ios-switch%27%29%0A%0A++++%7D%0A%7D%0A%0Afunction+handleRequiredChange%28required%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27required%27+property+for+the+composite+widget%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0A%0Afunction+handleCheckedValueChange%28checked_value%2C+selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Set+the+%27checkedvalue%27+and+%27uncheckedvalue%27+properties+for+the+toggle+widget%0A++++widgetMap.toggle.checkedvalue+%3D+checked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0A%0Afunction+handleIconVisibiltyChange%28icon%2C+widgetMap%29+%7B%0A++++if+%28icon.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++widgetMap.toggle.nativeElement.classList.add%28%27icon%27%29%0A%0A++++%7D+else+%7B%0A++++++++widgetMap.toggle.nativeElement.classList.remove%28%27icon%27%29%0A%0A++++%7D%0A%7D%0A%0A%0Afunction+handleUnCheckedValueChange%28unchecked_value%2C+selected%2C+widgetMap%29+%7B%0A++++widgetMap.toggle.uncheckedvalue+%3D+unchecked_value%3B%0A++++handleSelectedValueChange%28selected%2C+widgetMap%29%3B%0A%7D%0A%0Afunction+handleSelectedValueChange%28selected%2C+widgetMap%29+%7B%0A++++%2F%2F+Retrieve+the+selected+value+from+page+parameters%0A++++var+selectedValue+%3D+selected%3B%0A%0A++++%2F%2F+Determine+the+correct+%27datavalue%27+based+on+the+selected+value%0A++++if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.checkedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+checked+value%2C+set+datavalue+to+checked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.checkedvalue%3B%0A++++%7D+else+if+%28selectedValue+%3D%3D%3D+widgetMap.toggle.uncheckedvalue%29+%7B%0A++++++++%2F%2F+If+selected+value+matches+the+unchecked+value%2C+set+datavalue+to+unchecked+value%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B%0A++++%7D+else+%7B%0A++++++++%2F%2F+Log+a+warning+if+the+selected+value+does+not+match+known+values%0A++++++++console.warn%28%27Selected+value+does+not+match+any+known+value%27%29%3B%0A++++++++%2F%2F+Optionally+set+to+a+default+value+or+handle+the+error%0A++++++++widgetMap.toggle.datavalue+%3D+widgetMap.toggle.uncheckedvalue%3B+%2F%2F+Default+to+unchecked%0A++++%7D%0A%0A%7D",
4
+ "styles": ".switch-wrapper+%7B%0A++++--wm-switch-padding%3A+2px+8px%3B%0A++++--wm-switch-active-padding%3A+2px+4px%3B%0A++++--wm-switch-height%3A+32px%3B%0A++++--wm-switch-width%3A+52px%3B%0A++++--wm-switch-background%3A+var%28--wm-color-surface-container-highest%29%3B%0A++++--wm-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-switch-active-border-color%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-switch-border-style%3A+solid%3B%0A++++--wm-switch-border-width%3A+2px%3B%0A++++--wm-switch-border-radius%3A+100px%3B%0A++++--wm-switch-caption-border-radius%3A+24px%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-space-3%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-switch-caption-icon-width%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-height%3A+calc%28var%28--wm-switch-height%29+-+var%28--wm-space-2%29%29%3B%0A++++--wm-switch-caption-icon-size%3A+16px%3B%0A++++--wm-switch-caption-state-layer-color%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-condensed-switch-height%3A+14px%3B%0A++++--wm-condensed-switch-width%3A+34px%3B%0A++++--wm-condensed-switch-background%3A+var%28--wm-color-outline%29%3B%0A++++--wm-condensed-switch-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-condensed-switch-active-background%3A+var%28--wm-color-primary-active%29%3B%0A++++--wm-condensed-switch-caption-active-background%3A+var%28--wm-color-primary%29%3B%0A++++--wm-condensed-switch-caption-border-radius%3A+24px%3B%0A++++--wm-condensed-switch-caption-icon-width%3A+var%28--wm-space-5%29%3B%0A++++--wm-condensed-switch-caption-icon-height%3A+var%28--wm-space-5%29%3B%0A++++--wm-ios-switch-padding%3A+2px+2px%3B%0A++++--wm-ios-switch-active-padding%3A+2px+2px%3B%0A++++--wm-ios-switch-height%3A+26px%3B%0A++++--wm-ios-switch-width%3A+42px%3B%0A++++--wm-ios-switch-background%3A+%23E9E9EA%3B%0A++++--wm-ios-switch-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-ios-switch-active-background%3A+%2365C466%3B%0A++++--wm-ios-switch-border-radius%3A+100px%3B%0A++++--wm-ios-switch-caption-border-radius%3A+24px%3B%0A++++--wm-ios-switch-caption-width%3A+22px%3B%0A++++--wm-ios-switch-caption-height%3A+22px%3B%0A++++--wm-ios-switch-caption-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-ios-switch-caption-active-background%3A+var%28--wm-color-on-primary%29%3B%0A++++--wm-ios-switch-tranistion%3A+0.25s+ease-in%3B%0A++++--wm-ios-switch-caption-icon-width%3A+22px%3B%0A++++--wm-ios-switch-caption-icon-height%3A+22px%3B%0A++++--wm-ios-switch-caption-icon-size%3A+16px%3B%0A%7D%0A%0A.switch-wrapper+.app-checkbox%2C%0A.condensed-switch-wrapper+.app-checkbox%2C%0A.ios-switch-wrapper+.app-checkbox+%7B%0A++++margin%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+%7B%0A++++margin%3A+8px%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+input%5Btype%3D%22checkbox%22%5D%2C%0A.switch-wrapper+.switch+label+span.caption%2C%0A.switch-wrapper+.switch+label+span.caption%3A%3Abefore+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper+.switch+label+%7B%0A++++cursor%3A+pointer%3B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-border-color%29%3B%0A++++background%3A+var%28--wm-switch-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++padding%3A+var%28--wm-switch-padding%29%3B%0A++++height%3A+var%28--wm-switch-height%29%3B%0A++++min-height%3A+var%28--wm-switch-height%29%3B%0A++++width%3A+var%28--wm-switch-width%29%3B%0A++++user-select%3A+none%3B%0A++++-webkit-tap-highlight-color%3A+transparent%3B%0A++++display%3A+block%3B%0A++++position%3A+relative%3B%0A++++box-shadow%3A+unset%3B%0A++++overflow%3A+visible%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.switch+label+%7B%0A++++border%3A+var%28--wm-switch-border-width%29+var%28--wm-switch-border-style%29+var%28--wm-switch-active-background%29%3B%0A++++background%3A+var%28--wm-switch-active-background%29%3B%0A++++padding%3A+var%28--wm-switch-active-padding%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch.icon%29+.switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+%7B%0A++++background%3A+transparent%3B%0A++++border-radius%3A+var%28--wm-switch-border-radius%29%3B%0A++++width%3A+var%28--wm-switch-caption-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-height%29%3B%0A++++min-height%3A+var%28--wm-switch-caption-height%29%3B%0A++++position%3A+absolute%3B%0A++++left%3A+4px%3B%0A++++top%3A+18px%3B%0A++++display%3A+flex%3B%0A++++justify-content%3A+space-between%3B%0A++++align-items%3A+center%3B%0A++++z-index%3A+1%3B%0A++++pointer-events%3A+none%3B%0A++++padding%3A+0px%3B%0A++++transition%3A+transform+0.3s+ease%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+12px%3B%0A++++left%3A+4px%3B%0A++++width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A++++height%3A+var%28--wm-switch-caption-icon-height%29%3B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A++++max-width%3A+var%28--wm-switch-caption-icon-width%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+20px%29%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-switch-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-switch-caption-active-background%29%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+%7B%0A++++width%3A+100%25%3B%0A++++height%3A+100%25%3B%0A++++min-height%3A+100%25%3B%0A++++min-width%3A+100%25%3B%0A++++color%3A+var%28--wm-switch-background%29%3B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.app-icon%2C%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++font-size%3A+var%28--wm-switch-caption-icon-size%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+span.end-icon%5Bhidden%5D+%7B%0A++++display%3A+block+%21important%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.end-icon+.app-icon+%7B%0A++++color%3A+var%28--wm-switch-active-background%29%3B%0A%7D%0A%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label.unchecked%29+.icon-container.app-container+.app-icon-wrapper.start-icon%2C%0A.switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container.app-container+.app-icon-wrapper.end-icon+%7B%0A++++display%3A+block+%21important%3B%0A%7D%0A%0A.switch-wrapper+.icon-container+.start-icon+.switch-wrapper+%7B%0A++++position%3A+relative%3B%0A%7D%0A%0A.switch-wrapper%3Anot%28%3Ahas%28.icon%29%29+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.switch-wrapper%3Anot%28%3Ahas%28.icon%29%29+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D%0A%0A.switch-wrapper+.icon-container%3A%3Abefore+%7B%0A++++-webkit-appearance%3A+none%3B%0A++++z-index%3A+1%3B%0A++++position%3A+absolute%3B%0A++++content%3A+%22%22%3B%0A++++left%3A+-8px%3B%0A++++top%3A+-8px%3B%0A++++border-radius%3A+50%25%3B%0A++++width%3A+calc%28100%25+%2B+16px%29%3B%0A++++height%3A+calc%28100%25+%2B+16px%29%3B%0A++++background%3A+var%28--wm-switch-caption-state-layer-color%29%3B%0A++++box-shadow%3A+none%3B%0A++++outline%3A+none%3B%0A++++opacity%3A+0%3B%0A++++transform%3A+scale%281%29%3B%0A++++pointer-events%3A+none%3B%0A%7D%0A%0A.switch-wrapper%3Ahover+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-hover%29%3B%0A%7D%0A%0A.switch-wrapper%3Afocus+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A.switch-wrapper%3Aactive+.icon-container%3A%3Abefore+%7B%0A++++opacity%3A+var%28--wm-opacity-focus%29%3B%0A%7D%0A%0A%0A%2F*+condensed+styles+*%2F%0A%0A.condensed-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-condensed-switch-background%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-condensed-switch-caption-icon-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-condensed-switch-caption-icon-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-condensed-switch-caption-icon-width%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-condensed-switch-caption-icon-height%29%3B%0A++++--wm-switch-caption-icon-size%3A+var%28--wm-condensed-switch-caption-icon-size%29%3B%0A++++--wm-switch-height%3A+var%28--wm-condensed-switch-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-condensed-switch-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-condensed-switch-active-background%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-condensed-switch-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-condensed-switch-caption-border-radius%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.condensed-switch+label%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.condensed-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+%7B%0A++++left%3A+-4px%3B%0A++++top%3A+5px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+5px%3B%0A++++left%3A+-4px%3B%0A%7D%0A%0A.switch-wrapper.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++transform%3A+translateX%28calc%28var%28--wm-condensed-switch-width%29+-+var%28--wm-condensed-switch-caption-icon-width%29+%2B+8px%29%29%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D%0A%0A.condensed-switch-wrapper+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-condensed-switch-caption-background%29%3B%0A++++border-radius%3A+var%28--wm-condensed-switch-caption-border-radius%29%3B%0A++++display%3A+none%3B%0A++++box-shadow%3A+0px+2px+1px+-1px+rgba%280%2C+0%2C+0%2C+0.2%29%2C+0px+1px+1px+0px+rgba%280%2C+0%2C+0%2C+0.14%29%3B%0A%7D%0A%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.start-icon%2C%0A.condensed-switch-wrapper%3Ahas%28.app-toggle.checkbox.condensed-switch+label%3Einput%3Achecked%29+.icon-container+.end-icon+%7B%0A++++background%3A+var%28--wm-condensed-switch-caption-active-background%29%3B%0A%7D%0A%0A%0A%2F*+ios+styles+*%2F%0A%0A.ios-switch-wrapper+%7B%0A++++--wm-switch-background%3A+var%28--wm-ios-switch-background%29%3B%0A++++--wm-switch-border-radius%3A+var%28--wm-ios-switch-border-radius%29%3B%0A++++--wm-switch-padding%3A+var%28--wm-ios-switch-padding%29%3B%0A++++--wm-switch-height%3A+var%28--wm-ios-switch-height%29%3B%0A++++--wm-switch-width%3A+var%28--wm-ios-switch-width%29%3B%0A++++--wm-switch-active-background%3A+var%28--wm-ios-switch-active-background%29%3B%0A++++--wm-switch-active-padding%3A+var%28--wm-ios-switch-active-padding%29%3B%0A++++--wm-switch-caption-background%3A+var%28--wm-ios-switch-caption-background%29%3B%0A++++--wm-switch-caption-border-radius%3A+var%28--wm-ios-switch-caption-border-radius%29%3B%0A++++--wm-switch-caption-height%3A+var%28--wm-ios-switch-caption-height%29%3B%0A++++--wm-switch-caption-width%3A+var%28--wm-ios-switch-caption-width%29%3B%0A++++--wm-switch-caption-icon-height%3A+var%28--wm-ios-switch-caption-height%29%3B%0A++++--wm-switch-caption-icon-width%3A+var%28--wm-ios-switch-caption-width%29%3B%0A++++--wm-switch-caption-active-background%3A+var%28--wm-ios-switch-caption-active-background%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.ios-switch+label%2C%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch+label%3Einput%3Achecked%29+.ios-switch+label+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.ios-switch.icon%29+.ios-switch+label+%7B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.ios-switch-wrapper.switch-wrapper+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container%2C%0A.switch-wrapper.ios-switch-wrapper%3Ahas%28.switch.icon%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++left%3A+2px%3B%0A%7D%0A%0A.ios-switch-wrapper%3Ahas%28.app-toggle.checkbox.switch+label%3Einput%3Achecked%29+.icon-container+%7B%0A++++top%3A+10px%3B%0A++++transform%3A+translateX%28calc%28var%28--wm-switch-width%29+-+var%28--wm-switch-caption-width%29+-+6px%29%29%3B%0A%7D%0A%0A.ios-switch-wrapper+.icon-container+.start-icon+.app-icon%3A%3Abefore%2C%0A.ios-switch-wrapper+.icon-container+.end-icon+.app-icon%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A%7D",
5
+ "variables": "%7B+%7D",
6
+ "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22switch_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Switch%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20of%20the%20switch.%20Options%20include%20%27filled%27%2C%20%27condensed%27%2C%20and%20%27iOS%27.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Condensed%22%2C%20%22IOS%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Filled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20text%20displayed%20on%20the%20label%20of%20the%20switch.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Switch%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Enables%20or%20disables%20icon%20options%20for%20the%20switch.%20If%20true%2C%20you%20can%20select%20icons%20for%20the%20switch.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Selected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20selected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-check%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22unselected_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unselected%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20to%20use%20when%20the%20switch%20is%20in%20the%20unselected%20state.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22selected%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20switch.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20switch.%20For%20example%2C%20%27true%27%20for%20checked%20and%20%27false%27%20for%20unchecked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22checked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Checked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20checked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22true%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22unchecked_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unchecked%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20value%20to%20represent%20the%20switch%20when%20it%20is%20unchecked.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20switch%20is%20required.%20Set%20to%20true%20to%20make%20it%20a%20required%20field.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
7
7
  };
custom-widgets-m3/src/switch_button/switch_button.d.ts CHANGED
@@ -0,0 +1,6 @@
1
+ declare function handleTypeChange(switch_type: any, icon: any, unselected_icon: any, widgetMap: any): void;
2
+ declare function handleRequiredChange(required: any, widgetMap: any): void;
3
+ declare function handleCheckedValueChange(checked_value: any, selected: any, widgetMap: any): void;
4
+ declare function handleIconVisibiltyChange(icon: any, widgetMap: any): void;
5
+ declare function handleUnCheckedValueChange(unchecked_value: any, selected: any, widgetMap: any): void;
6
+ declare function handleSelectedValueChange(selected: any, widgetMap: any): void;
custom-widgets-m3/src/switch_button/switch_button.js CHANGED
@@ -1,33 +1,103 @@
1
1
  /*
2
2
  * Use App.getDependency for Dependency Injection
3
- * eg: var DialogService = App.getDependency('DialogService');
3
+ * Example:
4
+ * var DialogService = App.getDependency('DialogService');
4
5
  */
5
- /* perform any action on widgets/variables within this block */
6
+ Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
7
+ var widgetMap = Widget.Widgets;
8
+ var _a = Widget.props, switch_type = _a.switch_type, icon = _a.icon, unselected_icon = _a.unselected_icon, required = _a.required, unchecked_value = _a.unchecked_value, checked_value = _a.checked_value, selected = _a.selected;
9
+ switch (propname) {
10
+ case 'prop-switch_type':
11
+ handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
12
+ break;
13
+ case 'prop-required':
14
+ handleRequiredChange(required, widgetMap);
15
+ break;
16
+ case 'prop-selected':
17
+ handleSelectedValueChange(selected, widgetMap);
18
+ break;
19
+ case 'prop-checked_value':
20
+ handleCheckedValueChange(checked_value, selected, widgetMap);
21
+ break;
22
+ case 'prop-unchecked_value':
23
+ handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
24
+ break;
25
+ case 'prop-icon':
26
+ handleIconVisibiltyChange(icon, widgetMap);
27
+ break;
28
+ }
29
+ };
30
+ /* Perform any action on widgets/variables within this block */
6
31
  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
- if (Widget.props.switch_type === "filled") {
17
- if (Widget.props.icon === "icon") {
18
- Widget.Widgets.toggle.class += ' filled-switch icon';
19
- }
20
- else if (Widget.props.icon === "icon-checked") {
21
- Widget.Widgets.toggle.class += ' filled-switch icon-checked';
32
+ var widgetMap = Widget.Widgets;
33
+ var _a = Widget.props, switch_type = _a.switch_type, icon = _a.icon, unselected_icon = _a.unselected_icon, required = _a.required, unchecked_value = _a.unchecked_value, checked_value = _a.checked_value, selected = _a.selected;
34
+ handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
35
+ handleRequiredChange(required, widgetMap);
36
+ handleCheckedValueChange(checked_value, selected, widgetMap);
37
+ handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
38
+ handleSelectedValueChange(selected, widgetMap);
39
+ };
40
+ function handleTypeChange(switch_type, icon, unselected_icon, widgetMap) {
41
+ widgetMap.toggle.nativeElement.classList.remove('filled-switch', 'icon', 'unselected-icon', 'condensed-switch', 'ios-switch');
42
+ // Set CSS classes for the toggle widget based on the switch type
43
+ if (switch_type === "Filled") {
44
+ if (icon.toString().toLowerCase() === 'true') {
45
+ widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon');
22
46
  }
23
47
  else {
24
- Widget.Widgets.toggle.class += ' filled-switch';
48
+ widgetMap.toggle.nativeElement.classList.add('filled-switch');
49
+ }
50
+ // Add 'unselected-icon' class if no unselected_icon is specified
51
+ if (unselected_icon == null || unselected_icon === "" || unselected_icon === " ") {
52
+ widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon', 'unselected-icon');
25
53
  }
26
54
  }
27
- else if (Widget.props.switch_type === "condensed") {
28
- Widget.Widgets.toggle.class += ' condensed-switch';
55
+ else if (switch_type === "Condensed") {
56
+ // Add 'condensed-switch' class
57
+ widgetMap.toggle.nativeElement.classList.add('condensed-switch');
29
58
  }
30
- else if (Widget.props.switch_type === "iOS") {
31
- Widget.Widgets.toggle.class += ' iOS-switch';
59
+ else if (switch_type === "IOS") {
60
+ // Add 'iOS-switch' class
61
+ widgetMap.toggle.nativeElement.classList.add('ios-switch');
32
62
  }
33
- };
63
+ }
64
+ function handleRequiredChange(required, widgetMap) {
65
+ // Set the 'required' property for the composite widget
66
+ widgetMap.composite.required = required;
67
+ }
68
+ function handleCheckedValueChange(checked_value, selected, widgetMap) {
69
+ // Set the 'checkedvalue' and 'uncheckedvalue' properties for the toggle widget
70
+ widgetMap.toggle.checkedvalue = checked_value;
71
+ handleSelectedValueChange(selected, widgetMap);
72
+ }
73
+ function handleIconVisibiltyChange(icon, widgetMap) {
74
+ if (icon.toString().toLowerCase() === 'true') {
75
+ widgetMap.toggle.nativeElement.classList.add('icon');
76
+ }
77
+ else {
78
+ widgetMap.toggle.nativeElement.classList.remove('icon');
79
+ }
80
+ }
81
+ function handleUnCheckedValueChange(unchecked_value, selected, widgetMap) {
82
+ widgetMap.toggle.uncheckedvalue = unchecked_value;
83
+ handleSelectedValueChange(selected, widgetMap);
84
+ }
85
+ function handleSelectedValueChange(selected, widgetMap) {
86
+ // Retrieve the selected value from page parameters
87
+ var selectedValue = selected;
88
+ // Determine the correct 'datavalue' based on the selected value
89
+ if (selectedValue === widgetMap.toggle.checkedvalue) {
90
+ // If selected value matches the checked value, set datavalue to checked value
91
+ widgetMap.toggle.datavalue = widgetMap.toggle.checkedvalue;
92
+ }
93
+ else if (selectedValue === widgetMap.toggle.uncheckedvalue) {
94
+ // If selected value matches the unchecked value, set datavalue to unchecked value
95
+ widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue;
96
+ }
97
+ else {
98
+ // Log a warning if the selected value does not match known values
99
+ console.warn('Selected value does not match any known value');
100
+ // Optionally set to a default value or handle the error
101
+ widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue; // Default to unchecked
102
+ }
103
+ }
custom-widgets-m3/src/widget-registry.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const widgetRegistry: {
1
+ export const widgetRegistry: {
2
2
  name: string;
3
3
  displayName: string;
4
4
  iconClass: string;
custom-widgets-m3/webpack.config.cjs.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ export let entry: string;
2
+ export namespace module {
3
+ let rules: ({
4
+ test: RegExp;
5
+ use: string;
6
+ exclude: RegExp;
7
+ type?: undefined;
8
+ } | {
9
+ test: RegExp;
10
+ use: string[];
11
+ exclude: RegExp;
12
+ type?: undefined;
13
+ } | {
14
+ test: RegExp;
15
+ type: string;
16
+ exclude: RegExp;
17
+ use?: undefined;
18
+ })[];
19
+ }
20
+ export namespace resolve {
21
+ let extensions: string[];
22
+ }
23
+ export let devtool: string;
24
+ export namespace output {
25
+ let filename: string;
26
+ let path: string;
27
+ namespace library {
28
+ let type: string;
29
+ }
30
+ let globalObject: string;
31
+ }
custom-widgets-m3/webpack.config.cjs.js ADDED
@@ -0,0 +1,40 @@
1
+ var path = require('path');
2
+ module.exports = {
3
+ entry: './index.ts',
4
+ module: {
5
+ rules: [
6
+ {
7
+ test: /\.ts?$/,
8
+ use: 'ts-loader',
9
+ exclude: /node_modules/,
10
+ },
11
+ {
12
+ test: /\.css$/,
13
+ use: ['style-loader', 'css-loader'],
14
+ exclude: /node_modules/,
15
+ },
16
+ {
17
+ test: /\.html$/,
18
+ use: 'html-loader',
19
+ exclude: /node_modules/,
20
+ },
21
+ {
22
+ test: /\.json$/,
23
+ type: 'json',
24
+ exclude: /node_modules/,
25
+ },
26
+ ],
27
+ },
28
+ resolve: {
29
+ extensions: ['.ts', '.js', '.json', '.html', '.css'],
30
+ },
31
+ devtool: 'inline-source-map',
32
+ output: {
33
+ filename: 'custom-widgets-bundle.cjs.js',
34
+ path: path.resolve(__dirname, 'dist/es2015'),
35
+ library: {
36
+ type: 'commonjs'
37
+ },
38
+ globalObject: 'window',
39
+ },
40
+ };