npm - @wavemaker/custom-widgets-m3 - Versions diffs - 12.0.0-next.45021 → 12.0.0-next.45022 - Mend

@wavemaker/custom-widgets-m3 12.0.0-next.45021 → 12.0.0-next.45022

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 (13) hide show

custom-widgets-m3/index.d.ts +2 -0
custom-widgets-m3/index.js +2 -0
custom-widgets-m3/package.json +1 -1
custom-widgets-m3/src/progressbar/page.min.d.ts +7 -0
custom-widgets-m3/src/progressbar/page.min.js +7 -0
custom-widgets-m3/src/progressbar/progressbar.d.ts +0 -0
custom-widgets-m3/src/progressbar/progressbar.js +52 -0
custom-widgets-m3/src/slider/page.min.d.ts +7 -0
custom-widgets-m3/src/slider/page.min.js +7 -0
custom-widgets-m3/src/slider/slider.d.ts +1 -0
custom-widgets-m3/src/slider/slider.js +65 -0
custom-widgets-m3/src/switch_button/page.min.js +4 -4
custom-widgets-m3/src/switch_button/switch.js +42 -14

custom-widgets-m3/index.d.ts CHANGED Viewed

@@ -5,4 +5,6 @@ export * from './src/icon_button/page.min';
 export * from './src/input_chip/page.min';
 export * from './src/radio_set/page.min';
 export * from './src/switch_button/page.min';
+export * from './src/slider/page.min';
+export * from './src/progressbar/page.min';
 export * from './src/widget-registry';

custom-widgets-m3/index.js CHANGED Viewed

@@ -5,4 +5,6 @@ export * from './src/icon_button/page.min';
 export * from './src/input_chip/page.min';
 export * from './src/radio_set/page.min';
 export * from './src/switch_button/page.min';
+export * from './src/slider/page.min';
+export * from './src/progressbar/page.min';
 export * from './src/widget-registry';

custom-widgets-m3/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/custom-widgets-m3",
-  "version": "12.0.0-next.45021",
+  "version": "12.0.0-next.45022",
   "description": "A collection of custom widgets",
   "module": "index",
   "main": "index",

custom-widgets-m3/src/progressbar/page.min.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export namespace progresbar {
+    let markup: string;
+    let script: string;
+    let styles: string;
+    let variables: string;
+    let config: string;
+}

custom-widgets-m3/src/progressbar/page.min.js ADDED Viewed

@@ -0,0 +1,7 @@
+export var progresbar = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22container1%22+class%3D%22progress-wrapper%22%3E%0A++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22progress-track%22%3E%0A++++++++++++%3Cwm-container+name%3D%22container3%22+class%3D%22dot%22%3E%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-container+name%3D%22container4%22+class%3D%22progress%22%3E%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-container+name%3D%22container5%22+class%3D%22progress-inactive-track%22%3E%3C%2Fwm-container%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
+    "script": "%2F*+*+Use+App.getDependency+for+Dependency+Injection+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B+*%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+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A++++setTimeout%28function%28%29+%7B%0A++++++++%2F%2F+Extract+the+numeric+value+and+unit+from+progress_value++++%0A++++++++let+progressValue+%3D+Widget.props.progress_value%3B%0A++++++++let+numericValue+%3D+parseFloat%28progressValue%29%3B%0A++++++++let+unit+%3D+progressValue.slice%28-1%29%3B%0A%0A++++++++%2F%2F+This+will+be+%22%25%22+or+%22p%22+++++++%0A%0A++++++++%2F%2F+Check+if+the+value+is+in+percentage+or+pixels++++++++%0A%0A++++++++if+%28unit+%3D%3D%3D+%22%25%22%29+%7B%0A++++++++++++%2F%2F+Compare+if+the+percentage+value+is+equal+to+or+greater+than+100++%0A++++++++++++if+%28numericValue+%3E%3D+100%29+%7B%0A++++++++++++++++Widget.Widgets.container4.class+%2B%3D+%22+full-width%22%3B%0A++++++++++++%7D%0A++++++++%7D+else+if+%28unit+%3D%3D%3D+%22p%22%29+%7B%0A++++++++++++%2F%2F+Assume+%22px%22+value%2C+convert+to+numeric+and+compare+if+it%27s+%3E%3D+100+pixels+++%0A++++++++++++if+%28numericValue+%3E%3D+100%29+%7B%0A++++++++++++++++Widget.Widgets.container4.class+%2B%3D+%22%22%3B%0A++++++++++++%7D%0A++++++++%7D%0A++++++++%2F%2F+Apply+indeterminate+or+determinate+class+based+on+progress_type++++%0A++++++++if+%28Widget.props.progress_type+%3D%3D%3D+%22Indeterminate%22%29+%7B%0A++++++++++++Widget.Widgets.container1.class+%2B%3D+%22+indeterminate%22%3B%0A++++++++%7D+else+%7B%0A++++++++++++Widget.Widgets.container1.class+%2B%3D+%22+determinate%22%3B%0A++++++++%7D%0A++++++++%2F%2F+Set+the+progress+width+based+on+progress_value%0A++++++++Widget.Variables.staticVariable1.dataSet.dataValue+%3D+progressValue+%2B+%22%25%22%3B%0A++++++++Widget.Widgets.container2.%24element%5B0%5D.style.setProperty%28%22--progress-width%22%2C+progressValue+%2B+%22%25%22%29%3B%0A%0A++++++++let+transitionDuration+%3D+Widget.props.transition_duration+%3F+Widget.props.transition_duration+%3A+1%3B%0A++++++++console.log%28transitionDuration%29%3B%0A++++++++%2F%2F+debugger%3B%0A++++++++let+progressTrack+%3D+Widget.Widgets.container4.%24element%5B0%5D%3B%0A++++++++let+progress+%3D+Widget.Widgets.container2.%24element%5B0%5D%3B%0A++++++++let+transitionValue+%3D+%60%24%7BparseFloat%28transitionDuration%29%7Ds%60%3B%0A++++++++progress.style.setProperty%28%22--transition-duration%22%2C+transitionValue%29%3B%0A++++++++progressTrack.style.setProperty%28%22--transition-duration%22%2C+transitionValue%29%3B+%2F%2F+Apply+to+the+track+as+well%0A++++++++console.log%28%27transition+%3A%27%2C+transitionValue%29%3B%0A++++%7D%2C+500%29%3B%0A%0A%7D",
+    "styles": ".app-container.progress-wrapper+%7B%0A++++display%3A+block%3B%0A++++margin%3A+20px%3B%0A++++padding%3A+20px%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+%7B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A++++gap%3A+6px%3B%0A++++height%3A+10px%3B%0A++++width%3A+100%25%3B%0A++++border-radius%3A+8px%3B%0A++++position%3A+relative%3B%0A++++overflow%3A+hidden%3B%0A++++--progress-width%3A+0%25%3B%0A++++--transition-duration%3A+0.6%25%3B%0A++++%2F*+Default+width+of+progress+*%2F%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.progress+%7B%0A++++animation%3A+progressAnimation+3s+linear+infinite%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track.app-container%3E.app-container.progress.full-width+%7B%0A++++border-top-right-radius%3A+0px%3B%0A++++border-bottom-right-radius%3A+0px%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.dot+%7B%0A++++height%3A+100%25%3B%0A++++width%3A+10px%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A++++background-color%3A+%236750A4%3B%0A++++position%3A+absolute%3B%0A++++right%3A+0%3B%0A++++z-index%3A+1%3B%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.progress-inactive-track+%7B%0A++++background-color%3A+%23FEF7FF%3B%0A++++height%3A+100%25%3B%0A++++width%3A+calc%28100%25+-+var%28--progress-width%29%29%3B%0A++++%2F*+Full+width+initially+*%2F%0A++++border-radius%3A+8px%3B%0A++++position%3A+relative%3B%0A++++transition%3A+width+var%28--transition-duration%29+ease%3B%0A++++%2F*+transition%3A+width+0.6+ease%3B+*%2F%0A%7D%0A%0A.app-container.progress-wrapper+.app-container.progress-track+.app-container.progress+%7B%0A++++background-color%3A+%236750A4%3B%0A++++height%3A+100%25%3B%0A++++width%3A+var%28--progress-width%29%3B%0A++++%2F*+Width+controlled+by+custom+property+*%2F%0A++++border-radius%3A+8px%3B%0A++++transition%3A+width+var%28--transition-duration%29+ease%3B%0A++++%2F*+transition%3A+width+0.6+ease%3B+*%2F%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.app-container.progress-track+.app-container.progress+%7B%0A++++width%3A+var%28--progress-width%29+%21important%3B%0A%7D%0A%0A.app-container.progress-wrapper.indeterminate+.app-container.progress-track+.app-container.progress-inactive-track+%7B%0A++++width%3A+calc%28100%25+-+var%28--progress-width%29%29+%21important%3B%0A%7D%0A%0A%40keyframes+progressAnimation+%7B%0A++++0%25+%7B%0A++++++++width%3A+0%25%3B%0A++++%7D%0A++++20%25+%7B%0A++++++++width%3A+30%25%3B%0A++++%7D%0A++++50%25+%7B%0A++++++++width%3A+100%25%3B%0A++++%7D%0A++++60%25+%7B%0A++++++++width%3A+700%25%3B%0A++++%7D%0A++++70%25+%7B%0A++++++++width%3A+1000%25%3B%0A++++%7D%0A++++100%25+%7B%0A++++++++width%3A+50000%25%3B%0A++++%7D%0A%7D",
+    "variables": "%7B%0A++%22staticVariable1%22+%3A+%7B%0A++++%22_id%22+%3A+%22wm-staticVariable1-wm.Variable-1722513387770%22%2C%0A++++%22name%22+%3A+%22staticVariable1%22%2C%0A++++%22owner%22+%3A+%22Page%22%2C%0A++++%22category%22+%3A+%22wm.Variable%22%2C%0A++++%22dataBinding%22+%3A+%5B+%7B%0A++++++%22target%22+%3A+%22dataValue%22%2C%0A++++++%22value%22+%3A+%220%25%22%0A++++%7D+%5D%2C%0A++++%22dataSet%22+%3A+%7B%0A++++++%22dataValue%22+%3A+%22%22%0A++++%7D%2C%0A++++%22type%22+%3A+%22string%22%2C%0A++++%22isList%22+%3A+false%2C%0A++++%22twoWayBinding%22+%3A+false%2C%0A++++%22saveInPhonegap%22+%3A+false%0A++%7D%2C%0A++%22staticVariable2%22+%3A+%7B%0A++++%22_id%22+%3A+%22wm-staticVariable2-wm.Variable-1722940540972%22%2C%0A++++%22name%22+%3A+%22staticVariable2%22%2C%0A++++%22owner%22+%3A+%22Page%22%2C%0A++++%22category%22+%3A+%22wm.Variable%22%2C%0A++++%22dataBinding%22+%3A+%5B+%7B%0A++++++%22target%22+%3A+%22dataValue%22%2C%0A++++++%22value%22+%3A+%220%22%0A++++%7D+%5D%2C%0A++++%22dataSet%22+%3A+%5B+%7B%0A++++++%22dataValue%22+%3A+%22%22%0A++++%7D+%5D%2C%0A++++%22type%22+%3A+%22string%22%2C%0A++++%22isList%22+%3A+true%2C%0A++++%22twoWayBinding%22+%3A+false%2C%0A++++%22saveInPhonegap%22+%3A+false%0A++%7D%0A%7D",
+    "config": "%7B%0A%20%20%20%20%22widgetType%22%3A%20%22wm-custom-widget%22%2C%0A%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%22progress_value%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%3A%20%22Progress%20Value%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%3A%20%22Sets%20the%20current%20progress%20of%20the%20bar.%20This%20value%20represents%20the%20percentage%20of%20completion.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%3A%20%220%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22progress_type%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%3A%20%22Progress%20Type%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%3A%20%22Specifies%20the%20type%20of%20progress%20bar.%20Options%20include%20%27determinate%27%20for%20a%20fixed%20progress%20bar%20or%20%27indeterminate%27%20for%20an%20animated%20progress%20bar%20without%20a%20fixed%20end.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%3A%20%5B%22Determinate%22%2C%20%22Indeterminate%22%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%3A%20%22Determinate%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22transition_duration%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%3A%20%22Transition%20Duration%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%3A%20%22Defines%20the%20duration%20of%20the%20progress%20transition%20animation.%20This%20value%20should%20be%20specified%20in%20a%20time%20format%20such%20as%20%27500ms%27%20or%20%272s%27.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%3A%20%223s%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22events%22%3A%20%7B%0A%20%20%20%20%20%20%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A"
+};

custom-widgets-m3/src/progressbar/progressbar.d.ts ADDED Viewed

File without changes

custom-widgets-m3/src/progressbar/progressbar.js ADDED Viewed

@@ -0,0 +1,52 @@
+/* * Use App.getDependency for Dependency Injection * eg: var DialogService = App.getDependency('DialogService'); */
+/* perform any action on widgets/variables within this block */
+Widget.onReady = function () {
+    /*
+     * variables can be accessed through 'Widget.Variables' property here
+     * e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
+     * Widget.Variables.loggedInUser.getData()
+     *
+     * widgets can be accessed through 'Widget.Widgets' property here
+     * e.g. to get value of text widget named 'username' use following script
+     * 'Widget.Widgets.username.datavalue'
+     */
+    setTimeout(function () {
+        // Extract the numeric value and unit from progress_value
+        var progressValue = Widget.props.progress_value;
+        var numericValue = parseFloat(progressValue);
+        var unit = progressValue.slice(-1);
+        // This will be "%" or "p"
+        // Check if the value is in percentage or pixels
+        if (unit === "%") {
+            // Compare if the percentage value is equal to or greater than 100
+            if (numericValue >= 100) {
+                Widget.Widgets.container4.class += " full-width";
+            }
+        }
+        else if (unit === "p") {
+            // Assume "px" value, convert to numeric and compare if it's >= 100 pixels
+            if (numericValue >= 100) {
+                Widget.Widgets.container4.class += "";
+            }
+        }
+        // Apply indeterminate or determinate class based on progress_type
+        if (Widget.props.progress_type === "Indeterminate") {
+            Widget.Widgets.container1.class += " indeterminate";
+        }
+        else {
+            Widget.Widgets.container1.class += " determinate";
+        }
+        // Set the progress width based on progress_value
+        Widget.Variables.staticVariable1.dataSet.dataValue = progressValue + "%";
+        Widget.Widgets.container2.$element[0].style.setProperty("--progress-width", progressValue + "%");
+        var transitionDuration = Widget.props.transition_duration ? Widget.props.transition_duration : 1;
+        console.log(transitionDuration);
+        // debugger;
+        var progressTrack = Widget.Widgets.container4.$element[0];
+        var progress = Widget.Widgets.container2.$element[0];
+        var transitionValue = "".concat(parseFloat(transitionDuration), "s");
+        progress.style.setProperty("--transition-duration", transitionValue);
+        progressTrack.style.setProperty("--transition-duration", transitionValue); // Apply to the track as well
+        console.log('transition :', transitionValue);
+    }, 500);
+};

custom-widgets-m3/src/slider/page.min.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export namespace slider {
+    let markup: string;
+    let script: string;
+    let styles: string;
+    let variables: string;
+    let config: string;
+}

custom-widgets-m3/src/slider/page.min.js ADDED Viewed

@@ -0,0 +1,7 @@
+export var slider = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite1%22%3E%0A++++++++%3Cwm-label+class%3D%22control-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%22filled-slider%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-transparent%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22button1%22+iconclass%3D%22bind%3Aprops.start_icon%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22slider1Change%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-slider%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-transparent%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22button2%22+iconclass%3D%22bind%3Aprops.end_icon%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
+    "script": "Widget.onReady+%3D+function%28%29+%7B%0A++++const+startIcon+%3D+Widget.props.start_icon%3B+%2F%2F+string%0A++++const+endIcon+%3D+Widget.props.end_icon%3B+%2F%2F+string%0A++++const+showIcons+%3D+Widget.props.show_icons%3B+%2F%2F+boolean+or+string%0A++++const+iconActions+%3D+Widget.props.icon_actions%3B+%2F%2F+boolean+or+string%0A%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22Vertical%22%29+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+vertical%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.slider1.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D%0A%0A%0A++++%2F%2F+Convert+showIcons+and+iconActions+to+boolean+values%0A++++const+showIconsBool+%3D+%28showIcons+%3D%3D%3D+true+%7C%7C+showIcons+%3D%3D%3D+%27true%27%29%3B%0A++++const+iconActionsBool+%3D+%28iconActions+%3D%3D%3D+true+%7C%7C+iconActions+%3D%3D%3D+%27true%27%29%3B%0A%0A%0A%0A++++%2F%2F+Handle+icon+visibility+and+pointer+events+based+on+showIcons+and+iconActions%0A++++if+%28showIconsBool%29+%7B%0A++++++++%2F%2F+Icons+should+be+displayed%0A++++++++if+%28startIcon%29+%7B%0A++++++++++++Widget.Widgets.button1.class+%2B%3D+%27+start-icon%27%3B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.display+%3D+%27inline-block%27%3B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.pointerEvents+%3D+iconActionsBool+%3F+%27auto%27+%3A+%27none%27%3B%0A++++++++%7D%0A++++++++if+%28endIcon%29+%7B%0A++++++++++++Widget.Widgets.button2.class+%2B%3D+%27+end-icon%27%3B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.display+%3D+%27inline-block%27%3B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.pointerEvents+%3D+iconActionsBool+%3F+%27auto%27+%3A+%27none%27%3B%0A++++++++%7D%0A++++%7D+else+%7B%0A++++++++%2F%2F+Icons+should+be+hidden%0A++++++++if+%28startIcon%29+%7B%0A++++++++++++Widget.Widgets.button1.%24element%5B0%5D.style.display+%3D+%27none%27%3B%0A++++++++%7D%0A++++++++if+%28endIcon%29+%7B%0A++++++++++++Widget.Widgets.button2.%24element%5B0%5D.style.display+%3D+%27none%27%3B%0A++++++++%7D%0A++++%7D%0A%0A++++%2F%2F+Initialize+slider+value+and+set+the+CSS+property%0A++++const+initialSliderVal+%3D+%28100+-+Number%28Widget.Widgets.slider1.datavalue%29%29+%2B+%27%25%27%3B%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+initialSliderVal%29%3B%0A%0A++++%2F%2F+Bind+click+events+to+buttons+to+move+the+slider%0A++++Widget.Widgets.button1.%24element%5B0%5D.addEventListener%28%27click%27%2C+function%28%29+%7B%0A++++++++moveSlider%28-1%29%3B+%2F%2F+Move+slider+left%0A++++%7D%29%3B%0A%0A++++Widget.Widgets.button2.%24element%5B0%5D.addEventListener%28%27click%27%2C+function%28%29+%7B%0A++++++++moveSlider%281%29%3B+%2F%2F+Move+slider+right%0A++++%7D%29%3B%0A%7D%3B%0A%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++const+sliderValue+%3D+%28100+-+newVal%29+%2B+%27%25%27%3B%0A++++widget.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+sliderValue%29%3B%0A%7D%3B%0A%0A%2F%2F+Function+to+move+the+slider%0Afunction+moveSlider%28direction%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++let+newValue+%3D+Number%28slider.datavalue%29+%2B+direction%3B%0A%0A++++%2F%2F+Ensure+the+slider+value+stays+within+its+range%0A++++if+%28newValue+%3C+slider.min%29+newValue+%3D+slider.min%3B%0A++++if+%28newValue+%3E+slider.max%29+newValue+%3D+slider.max%3B%0A%0A++++%2F%2F+Update+the+slider+value%0A++++slider.datavalue+%3D+newValue%3B%0A++++Widget.slider1Change%28null%2C+slider%2C+newValue%2C+slider.datavalue%29%3B%0A%7D",
+    "styles": ".app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++--start%3A+0%25%3B%0A++++--end%3A+100%25%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center+%21important%3B%0A++++inline-size%3A+auto%3B%0A++++block-size%3A+1.25rem%3B%0A++++margin%3A+1.125rem+0%3B%0A++++flex%3A+none%3B%0A++++direction%3A+ltr%3B%0A++++flex-grow%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.vertical+%7B%0A++++flex-direction%3A+row+%21important%3B%0A++++margin%3A+.5rem+auto+%21important%3B%0A++++padding%3A+50%25+0%3B%0A++++transform%3A+rotate%28-90deg%29%3B%0A++++inline-size%3A+100%25%3B%0A%7D%0A%0A.app-container.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+12px%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A.app-container.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider+.app-button+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.filled-slider.continous-slider+%7B%0A++++display%3A+flex%3B%0A%7D%0A%0A.app-container.filled-slider+.app-button.start-icon%2C%0A.app-container.filled-slider+.app-button.end-icon+%7B%0A++++display%3A+flex%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+none%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++background%3A+none%3B%0A++++z-index%3A+1%3B%0A++++padding%3A+0%3B%0A++++margin%3A+0%3B%0A++++opacity%3A+unset%3B%0A++++color%3A+unset%3B%0A++++height%3A+unset%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-webkit-slider-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-moz-range-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem%3B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A++++clip-path%3A+polygon%28calc%28var%28--start%29+-+0.5rem%29+0%2C+0+0%2C+0+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+0%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%2C+100%25+0%2C+100%25+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Espan.pull-right+%7B%0A++++position%3A+absolute%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem+0+0+1rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++z-index%3A+0%3B%0A++++float%3A+unset%3B%0A++++vertical-align%3A+baseline%3B%0A++++inset%3A+calc%2850%25+-+0.5rem%29+var%28--end%29+auto+var%28--start%29%3B%0A++++clip-path%3A+polygon%280+0%2C+calc%28100%25+-+0.5rem%29+0%2C+calc%28100%25+-+0.5rem%29+100%25%2C+0+100%25%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Espan.pull-right+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider+input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track+%7B%0A++++background%3A+unset%3B%0A++++height%3A+unset%3B%0A++++position%3A+relative%3B%0A%7D",
+    "variables": "%7B+%7D",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20orientation%20of%20the%20widget.%20%27Vertical%27%20means%20the%20widget%20is%20oriented%20vertically%2C%20while%20%27Horizontal%27%20means%20it%20is%20oriented%20horizontally.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Vertical%22%2C%20%22Horizontal%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20whether%20the%20widget%20is%20interactive%20or%20not.%20%27Enabled%27%20means%20the%20widget%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%22The%20text%20displayed%20on%20the%20label%20of%20the%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_icons%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%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20icons%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20icons%20will%20be%20shown.%20When%20false%2C%20icons%20will%20be%20hidden.%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%22start_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%22Start%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20start%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%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%22end_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%22End%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20end%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%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%22icon_actions%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%22Icon%20Actions%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20the%20icons%20on%20the%20widget%20are%20interactive.%20When%20set%20to%20true%2C%20icons%20will%20respond%20to%20user%20actions%20(e.g.%2C%20clicks).%20When%20false%2C%20icons%20will%20be%20displayed%20but%20not%20interactive.%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22value%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%22Sets%20the%20default%20value%20for%20the%20slider.%20This%20value%20is%20used%20when%20the%20widget%20is%20initially%20rendered.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%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%22onChange%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Change%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%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
+};

custom-widgets-m3/src/slider/slider.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ declare function moveSlider(direction: any): void;

custom-widgets-m3/src/slider/slider.js ADDED Viewed

@@ -0,0 +1,65 @@
+Widget.onReady = function () {
+    var startIcon = Widget.props.start_icon; // string
+    var endIcon = Widget.props.end_icon; // string
+    var showIcons = Widget.props.show_icons; // boolean or string
+    var iconActions = Widget.props.icon_actions; // boolean or string
+    if (Widget.props.layout === "Vertical") {
+        Widget.Widgets.slider1.class += ' vertical';
+    }
+    else {
+        Widget.Widgets.slider1.class += ' horizontal';
+    }
+    // Convert showIcons and iconActions to boolean values
+    var showIconsBool = (showIcons === true || showIcons === 'true');
+    var iconActionsBool = (iconActions === true || iconActions === 'true');
+    // Handle icon visibility and pointer events based on showIcons and iconActions
+    if (showIconsBool) {
+        // Icons should be displayed
+        if (startIcon) {
+            Widget.Widgets.button1.class += ' start-icon';
+            Widget.Widgets.button1.$element[0].style.display = 'inline-block';
+            Widget.Widgets.button1.$element[0].style.pointerEvents = iconActionsBool ? 'auto' : 'none';
+        }
+        if (endIcon) {
+            Widget.Widgets.button2.class += ' end-icon';
+            Widget.Widgets.button2.$element[0].style.display = 'inline-block';
+            Widget.Widgets.button2.$element[0].style.pointerEvents = iconActionsBool ? 'auto' : 'none';
+        }
+    }
+    else {
+        // Icons should be hidden
+        if (startIcon) {
+            Widget.Widgets.button1.$element[0].style.display = 'none';
+        }
+        if (endIcon) {
+            Widget.Widgets.button2.$element[0].style.display = 'none';
+        }
+    }
+    // Initialize slider value and set the CSS property
+    var initialSliderVal = (100 - Number(Widget.Widgets.slider1.datavalue)) + '%';
+    Widget.Widgets.slider1.$element[0].style.setProperty("--end", initialSliderVal);
+    // Bind click events to buttons to move the slider
+    Widget.Widgets.button1.$element[0].addEventListener('click', function () {
+        moveSlider(-1); // Move slider left
+    });
+    Widget.Widgets.button2.$element[0].addEventListener('click', function () {
+        moveSlider(1); // Move slider right
+    });
+};
+Widget.slider1Change = function ($event, widget, newVal, oldVal) {
+    var sliderValue = (100 - newVal) + '%';
+    widget.$element[0].style.setProperty("--end", sliderValue);
+};
+// Function to move the slider
+function moveSlider(direction) {
+    var slider = Widget.Widgets.slider1;
+    var newValue = Number(slider.datavalue) + direction;
+    // Ensure the slider value stays within its range
+    if (newValue < slider.min)
+        newValue = slider.min;
+    if (newValue > slider.max)
+        newValue = slider.max;
+    // Update the slider value
+    slider.datavalue = newValue;
+    Widget.slider1Change(null, slider, newValue, slider.datavalue);
+}

custom-widgets-m3/src/switch_button/page.min.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export var switch_button = {
-    markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite1%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.default_value%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%22wi+wi-clear%22+show%3D%22true%22+class%3D%22start-icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22icon1%22+iconclass%3D%22wi+wi-check%22+show%3D%22bind%3AWidgets.toggle.datavalue%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",
-    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+%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+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A%0A++++if+%28Widget.props.switch_type+%3D%3D%3D+%22filled%22%29+%7B%0A++++++++if+%28Widget.props.icon+%3D%3D%3D+%22icon%22%29+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch+icon%27%3B%0A++++++++%7D+else+if+%28Widget.props.icon+%3D%3D%3D+%22icon-checked%22%29+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch+icon-checked%27%3B%0A%0A++++++++%7D+else+%7B%0A++++++++++++Widget.Widgets.toggle.class+%2B%3D+%27+filled-switch%27%3B%0A++++++++%7D%0A++++%7D+else+if+%28Widget.props.switch_type+%3D%3D%3D+%22condensed%22%29+%7B%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++++++++Widget.Widgets.toggle.class+%2B%3D+%27+iOS-switch%27%3B%0A++++%7D%0A%7D%3B",
-    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%3Einput%3Adisabled+%7B%0A++++opacity%3A+0%3B%0A%7D%0A%0A.condensed-switch-wrapper+.app-toggle.checkbox.condensed-switch%3Elabel%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%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+.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+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%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+32px%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%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%29+.app-container.icon-container+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.filled-switch.icon+label%3Einput%3Achecked%29+.app-container.icon-container+.app-icon-wrapper.start-icon+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch.icon%29+.app-container.icon-container%2C%0A.filled-switch-wrapper%3Ahas%28.app-toggle.checkbox.filled-switch.icon-checked%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+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",
+    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",
+    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",
+    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",
     variables: "%7B+%7D",
-    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%22string%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%22value%22%20%3A%20%22filled%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%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%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%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22enabled%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%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%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%22value%22%20%3A%20%22enabled%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%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%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%22string%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%22value%22%20%3A%20%22icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20icons%20to%20use%20for%20the%20switch.%20Options%20include%20%27icon%27%20and%20%27icon-checked%27%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20state%20of%20the%20switch.%20%27false%27%20means%20unchecked%20by%20default.%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%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%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20switch%20must%20be%20filled%20out.%20Set%20to%20true%20to%20make%20it%20required.%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%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"
+    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",
 };

custom-widgets-m3/src/switch_button/switch.js CHANGED Viewed

@@ -1,33 +1,61 @@
 /*
  * Use App.getDependency for Dependency Injection
- * eg: var DialogService = App.getDependency('DialogService');
+ * Example:
+ * var DialogService = App.getDependency('DialogService');
  */
-/* perform any action on widgets/variables within this block */
+/* Perform any action on widgets/variables within this block */
 Widget.onReady = function () {
     /*
-     * variables can be accessed through 'Widget.Variables' property here
-     * e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
+     * Access variables through 'Widget.Variables'
+     * Example: To get data from a static variable named 'loggedInUser', use:
      * Widget.Variables.loggedInUser.getData()
      *
-     * widgets can be accessed through 'Widget.Widgets' property here
-     * e.g. to get value of text widget named 'username' use following script
-     * 'Widget.Widgets.username.datavalue'
+     * Access widgets through 'Widget.Widgets'
+     * Example: To get the value of a text widget named 'username', use:
+     * Widget.Widgets.username.datavalue
      */
-    if (Widget.props.switch_type === "filled") {
-        if (Widget.props.icon === "icon") {
+    // Set CSS classes for the toggle widget based on the switch type
+    if (Widget.props.switch_type === "Filled") {
+        // Add 'filled-switch' and possibly 'icon' class
+        if (Widget.props.icon.toString().toLowerCase() === 'true') {
             Widget.Widgets.toggle.class += ' filled-switch icon';
         }
-        else if (Widget.props.icon === "icon-checked") {
-            Widget.Widgets.toggle.class += ' filled-switch icon-checked';
-        }
         else {
             Widget.Widgets.toggle.class += ' filled-switch';
         }
+        // Add 'unselected-icon' class if no unselected_icon is specified
+        if (Widget.props.unselected_icon == null || Widget.props.unselected_icon === "" || Widget.props.unselected_icon === " ") {
+            Widget.Widgets.toggle.class += ' filled-switch icon unselected-icon';
+        }
     }
-    else if (Widget.props.switch_type === "condensed") {
+    else if (Widget.props.switch_type === "Condensed") {
+        // Add 'condensed-switch' class
         Widget.Widgets.toggle.class += ' condensed-switch';
     }
-    else if (Widget.props.switch_type === "iOS") {
+    else if (Widget.props.switch_type === "IOS") {
+        // Add 'iOS-switch' class
         Widget.Widgets.toggle.class += ' iOS-switch';
     }
+    // Set the 'required' property for the composite widget
+    Widget.Widgets.composite.required = Widget.props.required;
+    // Set the 'checkedvalue' and 'uncheckedvalue' properties for the toggle widget
+    Widget.Widgets.toggle.checkedvalue = Widget.props.checked_value;
+    Widget.Widgets.toggle.uncheckedvalue = Widget.props.unchecked_value;
+    // Retrieve the selected value from page parameters
+    var selectedValue = Widget.props.selected;
+    // Determine the correct 'datavalue' based on the selected value
+    if (selectedValue === Widget.Widgets.toggle.checkedvalue) {
+        // If selected value matches the checked value, set datavalue to checked value
+        Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.checkedvalue;
+    }
+    else if (selectedValue === Widget.Widgets.toggle.uncheckedvalue) {
+        // If selected value matches the unchecked value, set datavalue to unchecked value
+        Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.uncheckedvalue;
+    }
+    else {
+        // Log a warning if the selected value does not match known values
+        console.warn('Selected value does not match any known value');
+        // Optionally set to a default value or handle the error
+        Widget.Widgets.toggle.datavalue = Widget.Widgets.toggle.uncheckedvalue; // Default to unchecked
+    }
 };