@wavemaker/angular-codegen 12.0.0-next.45062 → 12.0.0-next.45066

angular-codegen/angular-app/package-lock.json

@@ -34,11 +34,11 @@
                 "@awesome-cordova-plugins/vibration": "5.39.1",
                 "@babel/runtime": "7.14.8",
                 "@metrichor/jmespath": "0.3.1",
-                "@wavemaker/custom-widgets-m3": "12.0.0-next.45062",
+                "@wavemaker/custom-widgets-m3": "12.0.0-next.45066",
                 "@wavemaker/focus-trap": "1.0.1",
-                "@wavemaker/foundation-css": "12.0.0-next.45062",
+                "@wavemaker/foundation-css": "12.0.0-next.45066",
                 "@wavemaker/nvd3": "1.8.11",
-                "@wavemaker/variables": "12.0.0-next.45062",
+                "@wavemaker/variables": "12.0.0-next.45066",
                 "@ztree/ztree_v3": "3.5.48",
                 "angular-imask": "^7.6.1",
                 "angular2-websocket": "0.9.7",
@@ -6731,9 +6731,9 @@
             }
         },
         "node_modules/@wavemaker/custom-widgets-m3": {
-            "version": "12.0.0-next.45062",
-            "resolved": "https://registry.npmjs.org/@wavemaker/custom-widgets-m3/-/custom-widgets-m3-12.0.0-next.45062.tgz",
-            "integrity": "sha512-0DRcatveQJ1nzx5mwevNOFIOXd9g5BxeYqRvyY66Muxf5ldsZ6+/zygkJcsM0DnzskzEKcwyJWKVm8x01r5mAA=="
+            "version": "12.0.0-next.45066",
+            "resolved": "https://registry.npmjs.org/@wavemaker/custom-widgets-m3/-/custom-widgets-m3-12.0.0-next.45066.tgz",
+            "integrity": "sha512-DgZ4AVIjENk8DGLGheBOVm1RWfGqERySHy8AqO7IUdseMr+s9VyZwhLWp9rMNm3PhsXOs82eUViYTrHekSwpzg=="
         },
         "node_modules/@wavemaker/focus-trap": {
             "version": "1.0.1",
@@ -6745,9 +6745,9 @@
             }
         },
         "node_modules/@wavemaker/foundation-css": {
-            "version": "12.0.0-next.45062",
-            "resolved": "https://registry.npmjs.org/@wavemaker/foundation-css/-/foundation-css-12.0.0-next.45062.tgz",
-            "integrity": "sha512-gGAPXoweRRAeM7fqWyCl/wMuvpyCib3Pj8FRFguDequuQtOxdk+Gfq1aY0kjo/HUze8qmilL86izAa5iDjbJGg=="
+            "version": "12.0.0-next.45066",
+            "resolved": "https://registry.npmjs.org/@wavemaker/foundation-css/-/foundation-css-12.0.0-next.45066.tgz",
+            "integrity": "sha512-GAEseYYsDQz6Iy5HmrcTg8IGhiC2c+HcIWPbV+Jpd+trkLrhl3gAGfAc6bEGxOaNSTJcSVJDlwMxWNe2hTCn7Q=="
         },
         "node_modules/@wavemaker/nvd3": {
             "version": "1.8.11",
@@ -6758,9 +6758,9 @@
             }
         },
         "node_modules/@wavemaker/variables": {
-            "version": "12.0.0-next.45062",
-            "resolved": "https://registry.npmjs.org/@wavemaker/variables/-/variables-12.0.0-next.45062.tgz",
-            "integrity": "sha512-/0UtTPx3T3OHthAt0wG3H0Dsl6TXwSH06UMztV/ugC+bXXdQKYoZhLzmtR/T8akOyrUv9V0E+rn+y1R+xRp1cQ==",
+            "version": "12.0.0-next.45066",
+            "resolved": "https://registry.npmjs.org/@wavemaker/variables/-/variables-12.0.0-next.45066.tgz",
+            "integrity": "sha512-1ooPlTxfwLzyEgiDFH61P2XbCleH9whkdRQSFk0mcf6+sFpiHgt5b3MxYgJF3VCkQJYtB2JNvcDKVB1q0gdEEw==",
             "dependencies": {
                 "@metrichor/jmespath": "^0.3.1",
                 "he": "^1.2.0",

angular-codegen/angular-app/package.json

@@ -45,9 +45,9 @@
         "@metrichor/jmespath": "0.3.1",
         "@wavemaker/focus-trap": "1.0.1",
         "@wavemaker/nvd3": "1.8.11",
-        "@wavemaker/foundation-css": "12.0.0-next.45062",
-        "@wavemaker/custom-widgets-m3": "12.0.0-next.45062",
-        "@wavemaker/variables": "12.0.0-next.45062",
+        "@wavemaker/foundation-css": "12.0.0-next.45066",
+        "@wavemaker/custom-widgets-m3": "12.0.0-next.45066",
+        "@wavemaker/variables": "12.0.0-next.45066",
         "@ztree/ztree_v3": "3.5.48",
         "angular-imask": "^7.6.1",
         "angular2-websocket": "0.9.7",
@@ -72,7 +72,7 @@
         "tslib": "2.4.1",
         "x2js": "3.4.4",
         "zone.js": "0.14.7",
-        "@wavemaker/app-ng-runtime": "12.0.0-next.45062"
+        "@wavemaker/app-ng-runtime": "12.0.0-next.45066"
     },
     "devDependencies": {
         "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",

angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts

@@ -1,10 +1,25 @@
-declare function handleValueChange(): void;
-declare function handleStepValueChange(): void;
-declare function handleRequiredChange(): void;
-declare function activeSliderElement(): void;
-declare function activeSliderElement(widgetMap: any): void;
-declare function configureDiscreteSlider(): void;
-declare function updateSteps(): void;
-declare function updateLabelVisibility(): void;
-declare function getSliderPercentage(value: any): number;
+declare function initializeSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any, required: any): void;
+declare function updateSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function updateSliderStep(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function setRequired(widgetMap: any, required: any): void;
+declare function appendSliderIndicator(slider: any): void;
+declare function configureSliderAndSetStyles(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function updateSliderStyles(slider: any, value: any, minValue: any, maxValue: any): void;
+declare function setupStepsAndLabels(widgetMap: any): void;
+declare function createStepLabel(labelValue: any, minValue: any, maxValue: any): HTMLParagraphElement;
+declare function updateLabelVisibility(widgetMap: any): void;
+declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
 declare function getSliderPercentage(value: any): number;
+declare function clamp(value: any, minValue: any, maxValue: any): number;
+declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
+declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
+declare function toggleIconsVisibility(showIconsBool: any, iconActionsBool: any, widgetMap: any): void;
+declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
+declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
+declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
+declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
+declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
+declare function moveSlider(direction: any, widgetMap: any): void;
+declare function moveSlider(direction: any, widgetMap: any): void;
+declare function convertToBoolean(value: any): boolean;
+declare function convertToBoolean(value: any): boolean;

angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/discrete_slider.js

@@ -1,171 +1,208 @@
-function handleValueChange() {
-    var initialValue = Number(Widget.props.value); // Use props.value for initial value
-    Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(initialValue)) + '%');
-    updateSteps();
-    configureDiscreteSlider();
-    updateLabelVisibility();
-}
-function handleStepValueChange() {
-    Widget.Widgets.slider1.step = Widget.props.step_value;
-    updateSteps();
-    configureDiscreteSlider();
-    updateLabelVisibility();
-}
-function handleRequiredChange() {
-    Widget.Widgets.composite.required = Widget.props.required;
-}
-Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
-    switch (propname) {
+Widget.onPropertyChange = function (propName, newValue, oldValue) {
+    var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions, start_icon = _a.start_icon, end_icon = _a.end_icon;
+    var widgetMap = Widget.Widgets;
+    var showIconsBool = convertToBoolean(show_icons);
+    var showLabelsBool = convertToBoolean(show_labels);
+    var iconActionsBool = convertToBoolean(icon_actions);
+    switch (propName) {
         case 'prop-value':
         case 'prop-min_value':
         case 'prop-max_value':
-            handleValueChange();
+            updateSlider(widgetMap, value, min_value, max_value, step_value);
             break;
         case 'prop-step_value':
-            handleStepValueChange();
+            updateSliderStep(widgetMap, value, min_value, max_value, step_value);
             break;
         case 'prop-required':
-            handleRequiredChange();
+            setRequired(widgetMap, required);
+            break;
+        case "prop-show_labels":
+            toggleLabelVisibilty(showLabelsBool, widgetMap);
+            break;
+        case "prop-show_icons":
+            toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap);
+            break;
+        case "prop-start_icon":
+            updateStartIconVisibility(iconActionsBool, widgetMap);
+            break;
+        case "prop-end_icon":
+            updateEndIconVisibility(iconActionsBool, widgetMap);
             break;
     }
 };
 Widget.onReady = function () {
-    Widget.Widgets.container1.class += ' filled-slider discrete-slider';
-    handleValueChange();
-    handleRequiredChange();
-    configureDiscreteSlider();
-    handleStepValueChange();
-    updateSteps();
-    activeSliderElement();
-    updateLabelVisibility(); // Update label visibility based on initial value
+    var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions, start_icon = _a.start_icon, end_icon = _a.end_icon;
+    var widgetMap = Widget.Widgets;
+    var showIconsBool = convertToBoolean(show_icons);
+    var showLabelsBool = convertToBoolean(show_labels);
+    var iconActionsBool = convertToBoolean(icon_actions);
+    widgetMap.sliderContainer.nativeElement.classList.add('filled-slider', 'discrete-slider');
+    initializeSlider(widgetMap, value, min_value, max_value, step_value, required);
+    toggleLabelVisibilty(showLabelsBool, widgetMap);
+    toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap);
 };
-function activeSliderElement() {
-    var activeSlider = Widget.Widgets.slider1.$element[0]; // Get the slider element
-    if (activeSlider) {
-        // Create a new div element
-        var newDiv = document.createElement('p');
-        newDiv.className = 'active-slider'; // Set a class for styling
-        // Append the new element to slider container
-        activeSlider.appendChild(newDiv);
+function initializeSlider(widgetMap, value, minValue, maxValue, stepValue, required) {
+    updateSlider(widgetMap, value, minValue, maxValue, stepValue);
+    setRequired(widgetMap, required);
+    appendSliderIndicator(widgetMap.slider);
+}
+function updateSlider(widgetMap, value, minValue, maxValue, stepValue) {
+    if (value !== undefined) {
+        widgetMap.slider.datavalue = Number(value);
     }
+    configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue);
+    setupStepsAndLabels(widgetMap);
 }
-/*
- * Configure the slider for discrete steps.
- */
-function configureDiscreteSlider() {
-    var slider = Widget.Widgets.slider1; // Slider widget
-    var minValue = parseInt(Widget.props.min_value, 10);
-    var maxValue = parseInt(Widget.props.max_value, 10);
-    var stepValueParam = Widget.props.step_value;
-    var initialValue = Number(Widget.props.value); // Use props.value for initial value
-    var stepValue = parseInt(stepValueParam, 10);
+function updateSliderStep(widgetMap, value, minValue, maxValue, stepValue) {
+    updateSlider(widgetMap, value, minValue, maxValue, stepValue);
+}
+function setRequired(widgetMap, required) {
+    widgetMap.composite.required = required;
+}
+function appendSliderIndicator(slider) {
+    var sliderElement = slider.nativeElement;
+    if (sliderElement) {
+        var indicator = document.createElement('p');
+        var labelContainer = document.createElement('div');
+        labelContainer.className = 'stop-indicator';
+        indicator.className = 'active-slider';
+        sliderElement.appendChild(indicator);
+        sliderElement.appendChild(labelContainer);
+    }
+}
+function configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue) {
+    var slider = widgetMap.slider;
+    minValue = parseInt(minValue, 10);
+    maxValue = parseInt(maxValue, 10);
+    stepValue = parseInt(stepValue, 10);
     if (isNaN(minValue) || isNaN(maxValue) || isNaN(stepValue) || stepValue <= 0) {
         console.error("Invalid min, max, or step values");
         return;
     }
-    // Set slider's min, max, and step attributes
     slider.min = minValue;
     slider.max = maxValue;
     slider.step = stepValue;
-    // Ensure slider value is within the range
-    if (isNaN(initialValue) || initialValue < minValue || initialValue > maxValue) {
-        console.error("Slider value is out of range");
-        slider.datavalue = minValue; // Default to minValue if the provided value is invalid
-    }
-    else {
-        slider.datavalue = initialValue; // Set the slider to the provided value
-    }
-    // Set initial position
-    Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(slider.datavalue)) + '%');
-}
-/*
- * Update the labels displayed on the slider.
- */
-function updateSteps() {
-    var slider = Widget.Widgets.slider1;
-    var labelContainer = Widget.Widgets.container2;
-    if (slider && labelContainer) {
-        var minValue = parseInt(slider.min, 10);
-        var maxValue = parseInt(slider.max, 10);
-        var stepValue = parseInt(slider.step, 10);
-        // Calculate the number of steps
-        var numSteps = Math.ceil((maxValue - minValue) / stepValue);
-        // Clear existing labels
-        labelContainer.$element[0].innerHTML = '';
-        // Create and position labels for each step
-        for (var i = 0; i <= numSteps; i++) {
-            var stepLabel = document.createElement('p');
-            stepLabel.className = 'step-label';
-            var labelValue = minValue + (i * stepValue);
-            // Ensure labelValue does not exceed maxValue
-            if (labelValue > maxValue)
-                break;
-            stepLabel.textContent = labelValue;
-            // Calculate and set label position
-            var leftPosition = Math.round(((labelValue - minValue) / (maxValue - minValue)) * 100 * 100) / 100; // Rounded to two decimal places
-            var adjustedPosition = leftPosition - 1;
-            stepLabel.style.setProperty('--position', "".concat(adjustedPosition, "%"));
-            stepLabel.setAttribute('data-position', adjustedPosition);
-            // Append label to the container
-            labelContainer.$element[0].appendChild(stepLabel);
-        }
-        // Set container positioning and add event listener for updating label visibility
-        labelContainer.$element[0].style.position = 'relative';
-        Widget.Widgets.slider1.$element[0].addEventListener('input', updateLabelVisibility);
-        // Initial update of label visibility
-        updateLabelVisibility();
+    slider.datavalue = clamp(slider.datavalue, minValue, maxValue);
+    updateSliderStyles(slider, slider.datavalue, minValue, maxValue);
+}
+function updateSliderStyles(slider, value, minValue, maxValue) {
+    var percentage = getSliderPercentage(value, minValue, maxValue);
+    slider.nativeElement.style.setProperty("--end", "".concat(100 - percentage, "%"));
+}
+function setupStepsAndLabels(widgetMap) {
+    var slider = widgetMap.slider;
+    var labelContainer = widgetMap.labelsContainer;
+    var minValue = parseInt(slider.min, 10);
+    var maxValue = parseInt(slider.max, 10);
+    var stepValue = parseInt(slider.step, 10);
+    if (!labelContainer)
+        return;
+    var numSteps = Math.ceil((maxValue - minValue) / stepValue);
+    labelContainer.$element[0].innerHTML = ''; // Clear existing labels
+    for (var i = 0; i <= numSteps; i++) {
+        var labelValue = minValue + i * stepValue;
+        if (labelValue > maxValue)
+            break;
+        var stepLabel = createStepLabel(labelValue, minValue, maxValue);
+        labelContainer.$element[0].appendChild(stepLabel);
     }
+    slider.$element[0].addEventListener('input', function () { return updateLabelVisibility(widgetMap); });
+    updateLabelVisibility(widgetMap);
+}
+function createStepLabel(labelValue, minValue, maxValue) {
+    var stepLabel = document.createElement('p');
+    stepLabel.className = 'step-label';
+    stepLabel.textContent = labelValue;
+    var position = ((labelValue - minValue) / (maxValue - minValue)) * 100;
+    stepLabel.style.setProperty('--position', "".concat(position - 1, "%"));
+    stepLabel.setAttribute('data-position', position);
+    return stepLabel;
 }
-function updateLabelVisibility() {
-    var slider = Widget.Widgets.slider1;
-    var labels = Widget.Widgets.container2.$element[0].getElementsByClassName('step-label');
-    if (slider) {
-        var sliderValue = Number(slider.datavalue); // Get the current slider value
-        var minValue_1 = parseInt(slider.min, 10);
-        var maxValue_1 = parseInt(slider.max, 10);
-        var stepValue_1 = parseInt(slider.step, 10);
-        // Calculate the number of steps
-        var targets = Array.from({
-            length: Math.ceil((maxValue_1 - minValue_1) / stepValue_1) + 1
-        }, function (_, i) { return minValue_1 + i * stepValue_1; }).filter(function (value) { return value <= maxValue_1; });
-        // Update label states based on slider value and targets
-        for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
-            var label = labels_1[_i];
-            var labelValue = parseInt(label.textContent, 10);
-            // Remove existing classes
-            label.classList.remove('hidden', 'inactive', 'active');
-            // Determine the label's state based on the slider value
-            if (targets.includes(labelValue)) {
-                if (labelValue === sliderValue) {
-                    label.classList.add('hidden'); // Hide label if it matches the slider value
-                }
-                else if (labelValue < sliderValue) {
-                    label.classList.add('inactive'); // Label is inactive if it is less than the slider value
-                }
-                else {
-                    label.classList.add('active'); // Label is active if it is greater than the slider value
-                }
+function updateLabelVisibility(widgetMap) {
+    var slider = widgetMap.slider;
+    var labels = widgetMap.labelsContainer.nativeElement.getElementsByClassName('step-label');
+    var sliderValue = slider.datavalue;
+    var minValue = slider.min;
+    var maxValue = slider.max;
+    var stepValue = slider.step;
+    var validValues = Array.from({
+        length: Math.ceil((maxValue - minValue) / stepValue) + 1
+    }, function (_, i) { return minValue + i * stepValue; })
+        .filter(function (value) { return value <= maxValue; });
+    for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
+        var label = labels_1[_i];
+        var labelValue = parseInt(label.textContent, 10);
+        label.classList.remove('hidden', 'inactive', 'active');
+        if (validValues.includes(labelValue)) {
+            if (labelValue === sliderValue) {
+                label.classList.add('hidden');
+            }
+            else if (labelValue < sliderValue) {
+                label.classList.add('inactive');
+            }
+            else {
+                label.classList.add('active');
             }
-            // Ensure that labels are visible based on their state
-            label.style.display = 'block';
         }
+        label.style.display = 'block';
     }
 }
-/*
- * Convert slider value to percentage based on min and max
- */
-function getSliderPercentage(value) {
-    var slider = Widget.Widgets.slider1;
-    var minValue = parseInt(slider.min, 10);
-    var maxValue = parseInt(slider.max, 10);
+function getSliderPercentage(value, minValue, maxValue) {
     return ((value - minValue) / (maxValue - minValue)) * 100;
 }
-/*
- * Handle slider value changes.
- */
-Widget.slider1Change = function ($event, widget, newVal, oldVal) {
-    var sliderValue = newVal; // Use the new slider value
-    widget.$element[0].style.setProperty("--end", (100 - getSliderPercentage(sliderValue)) + '%');
-    // Update label visibility on slider change
-    updateLabelVisibility();
+function clamp(value, minValue, maxValue) {
+    return Math.min(Math.max(value, minValue), maxValue);
+}
+function toggleLabelVisibilty(showLabelsBool, widgetMap) {
+    if (showLabelsBool) {
+        widgetMap.slider.nativeElement.classList.remove("hide-labels");
+    }
+    else {
+        widgetMap.slider.nativeElement.classList.add("hide-labels");
+    }
+}
+function toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap) {
+    var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
+    if (showIconsBool) {
+        updateStartIconVisibility(iconActionsBool, widgetMap);
+        updateEndIconVisibility(iconActionsBool, widgetMap);
+    }
+    else {
+        decrementButton.show = false;
+        incrementButton.show = false;
+    }
+}
+function updateStartIconVisibility(iconActionsBool, widgetMap) {
+    var decrementButton = widgetMap.decrementButton;
+    decrementButton.show = true;
+    decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+        "auto" :
+        "none";
+}
+function updateEndIconVisibility(iconActionsBool, widgetMap) {
+    var incrementButton = widgetMap.incrementButton;
+    incrementButton.show = true;
+    incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+        "auto" :
+        "none";
+}
+function moveSlider(direction, widgetMap) {
+    var slider = widgetMap.slider;
+    var newValue = Number(slider.datavalue) + (direction * slider.step);
+    newValue = Math.max(Math.min(newValue, slider.maxvalue), slider.minvalue);
+    slider.datavalue = newValue;
+    Widget.sliderChange(null, slider, newValue);
+}
+function convertToBoolean(value) {
+    return value === true || value === "true";
+}
+Widget.sliderChange = function ($event, widget, newVal) {
+    updateSliderStyles(widget, newVal, widget.min, widget.max);
+    updateLabelVisibility(Widget.Widgets);
+};
+Widget.decrementButtonClick = function ($event, widget) {
+    moveSlider(-1, Widget.Widgets);
+};
+Widget.incrementButtonClick = function ($event, widget) {
+    moveSlider(1, Widget.Widgets);
 };

angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/page.min.js

@@ -1,7 +1,7 @@
 export var discrete_slider = {
-    "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+class%3D%22slider-composite%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-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+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%22%3E%3C%2Fwm-slider%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22container2%22+class%3D%22stop-indicator%22%3E%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
-    "script": "function+handleValueChange%28%29+%7B%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28initialValue%29%29+%2B+%27%25%27%29%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleStepValueChange%28%29+%7B%0A++++Widget.Widgets.slider1.step+%3D+Widget.props.step_value%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28%29+%7B%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-value%27%3A%0A++++++++case+%27prop-min_value%27%3A%0A++++++++case+%27prop-max_value%27%3A%0A++++++++++++handleValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++handleStepValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++Widget.Widgets.container1.class+%2B%3D+%27+filled-slider+discrete-slider%27%3B%0A++++handleValueChange%28%29%0A++++handleRequiredChange%28%29%0A++++configureDiscreteSlider%28%29%3B%0A++++handleStepValueChange%28%29%3B%0A++++updateSteps%28%29%3B%0A++++activeSliderElement%28%29%3B%0A++++updateLabelVisibility%28%29%3B+%2F%2F+Update+label+visibility+based+on+initial+value%0A%7D%3B%0A%0A%0A%0Afunction+activeSliderElement%28%29+%7B%0A++++const+activeSlider+%3D+Widget.Widgets.slider1.%24element%5B0%5D%3B+%2F%2F+Get+the+slider+element%0A%0A++++if+%28activeSlider%29+%7B%0A++++++++%2F%2F+Create+a+new+div+element%0A++++++++const+newDiv+%3D+document.createElement%28%27p%27%29%3B%0A++++++++newDiv.className+%3D+%27active-slider%27%3B+%2F%2F+Set+a+class+for+styling%0A++++++++%2F%2F+Append+the+new+element+to+slider+container%0A++++++++activeSlider.appendChild%28newDiv%29%3B%0A++++%7D%0A%7D%0A%0A%2F*+%0A+*+Configure+the+slider+for+discrete+steps.%0A+*%2F%0Afunction+configureDiscreteSlider%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B+%2F%2F+Slider+widget%0A++++const+minValue+%3D+parseInt%28Widget.props.min_value%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28Widget.props.max_value%2C+10%29%3B%0A++++const+stepValueParam+%3D+Widget.props.step_value%3B%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A%0A++++const+stepValue+%3D+parseInt%28stepValueParam%2C+10%29%3B%0A++++if+%28isNaN%28minValue%29+%7C%7C+isNaN%28maxValue%29+%7C%7C+isNaN%28stepValue%29+%7C%7C+stepValue+%3C%3D+0%29+%7B%0A++++++++console.error%28%22Invalid+min%2C+max%2C+or+step+values%22%29%3B%0A++++++++return%3B%0A++++%7D%0A%0A++++%2F%2F+Set+slider%27s+min%2C+max%2C+and+step+attributes%0A++++slider.min+%3D+minValue%3B%0A++++slider.max+%3D+maxValue%3B%0A++++slider.step+%3D+stepValue%3B%0A%0A++++%2F%2F+Ensure+slider+value+is+within+the+range%0A++++if+%28isNaN%28initialValue%29+%7C%7C+initialValue+%3C+minValue+%7C%7C+initialValue+%3E+maxValue%29+%7B%0A++++++++console.error%28%22Slider+value+is+out+of+range%22%29%3B%0A++++++++slider.datavalue+%3D+minValue%3B+%2F%2F+Default+to+minValue+if+the+provided+value+is+invalid%0A++++%7D+else+%7B%0A++++++++slider.datavalue+%3D+initialValue%3B+%2F%2F+Set+the+slider+to+the+provided+value%0A++++%7D%0A%0A++++%2F%2F+Set+initial+position%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28slider.datavalue%29%29+%2B+%27%25%27%29%3B%0A%7D%0A%0A%2F*%0A+*+Update+the+labels+displayed+on+the+slider.%0A+*%2F%0Afunction+updateSteps%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labelContainer+%3D+Widget.Widgets.container2%3B%0A%0A++++if+%28slider+%26%26+labelContainer%29+%7B%0A++++++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+numSteps+%3D+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29%3B%0A%0A++++++++%2F%2F+Clear+existing+labels%0A++++++++labelContainer.%24element%5B0%5D.innerHTML+%3D+%27%27%3B%0A%0A++++++++%2F%2F+Create+and+position+labels+for+each+step%0A++++++++for+%28let+i+%3D+0%3B+i+%3C%3D+numSteps%3B+i%2B%2B%29+%7B%0A++++++++++++const+stepLabel+%3D+document.createElement%28%27p%27%29%3B%0A++++++++++++stepLabel.className+%3D+%27step-label%27%3B%0A++++++++++++const+labelValue+%3D+minValue+%2B+%28i+*+stepValue%29%3B%0A%0A++++++++++++%2F%2F+Ensure+labelValue+does+not+exceed+maxValue%0A++++++++++++if+%28labelValue+%3E+maxValue%29+break%3B%0A%0A++++++++++++stepLabel.textContent+%3D+labelValue%3B%0A%0A++++++++++++%2F%2F+Calculate+and+set+label+position%0A++++++++++++const+leftPosition+%3D+Math.round%28%28%28labelValue+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100+*+100%29+%2F+100%3B+%2F%2F+Rounded+to+two+decimal+places%0A++++++++++++const+adjustedPosition+%3D+leftPosition+-+1%3B%0A++++++++++++stepLabel.style.setProperty%28%27--position%27%2C+%60%24%7BadjustedPosition%7D%25%60%29%3B%0A%0A++++++++++++stepLabel.setAttribute%28%27data-position%27%2C+adjustedPosition%29%3B%0A%0A++++++++++++%2F%2F+Append+label+to+the+container%0A++++++++++++labelContainer.%24element%5B0%5D.appendChild%28stepLabel%29%3B%0A++++++++%7D%0A%0A++++++++%2F%2F+Set+container+positioning+and+add+event+listener+for+updating+label+visibility%0A++++++++labelContainer.%24element%5B0%5D.style.position+%3D+%27relative%27%3B%0A++++++++Widget.Widgets.slider1.%24element%5B0%5D.addEventListener%28%27input%27%2C+updateLabelVisibility%29%3B%0A%0A++++++++%2F%2F+Initial+update+of+label+visibility%0A++++++++updateLabelVisibility%28%29%3B%0A++++%7D%0A%7D%0A%0Afunction+updateLabelVisibility%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labels+%3D+Widget.Widgets.container2.%24element%5B0%5D.getElementsByClassName%28%27step-label%27%29%3B%0A%0A++++if+%28slider%29+%7B%0A++++++++const+sliderValue+%3D+Number%28slider.datavalue%29%3B+%2F%2F+Get+the+current+slider+value%0A++++++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+targets+%3D+Array.from%28%7B%0A++++++++++++length%3A+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29+%2B+1%0A++++++++%7D%2C+%28_%2C+i%29+%3D%3E+minValue+%2B+i+*+stepValue%29.filter%28value+%3D%3E+value+%3C%3D+maxValue%29%3B%0A++++++++%2F%2F+Update+label+states+based+on+slider+value+and+targets%0A++++++++for+%28const+label+of+labels%29+%7B%0A++++++++++++const+labelValue+%3D+parseInt%28label.textContent%2C+10%29%3B%0A%0A++++++++++++%2F%2F+Remove+existing+classes%0A++++++++++++label.classList.remove%28%27hidden%27%2C+%27inactive%27%2C+%27active%27%29%3B%0A%0A++++++++++++%2F%2F+Determine+the+label%27s+state+based+on+the+slider+value%0A++++++++++++if+%28targets.includes%28labelValue%29%29+%7B%0A++++++++++++++++if+%28labelValue+%3D%3D%3D+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27hidden%27%29%3B+%2F%2F+Hide+label+if+it+matches+the+slider+value%0A++++++++++++++++%7D+else+if+%28labelValue+%3C+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27inactive%27%29%3B+%2F%2F+Label+is+inactive+if+it+is+less+than+the+slider+value%0A++++++++++++++++%7D+else+%7B%0A++++++++++++++++++++label.classList.add%28%27active%27%29%3B+%2F%2F+Label+is+active+if+it+is+greater+than+the+slider+value%0A++++++++++++++++%7D%0A++++++++++++%7D%0A%0A++++++++++++%2F%2F+Ensure+that+labels+are+visible+based+on+their+state%0A++++++++++++label.style.display+%3D+%27block%27%3B%0A++++++++%7D%0A++++%7D%0A%7D%0A%0A%2F*%0A+*+Convert+slider+value+to+percentage+based+on+min+and+max%0A+*%2F%0Afunction+getSliderPercentage%28value%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0A%2F*%0A+*+Handle+slider+value+changes.%0A+*%2F%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++const+sliderValue+%3D+newVal%3B+%2F%2F+Use+the+new+slider+value%0A++++widget.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28sliderValue%29%29+%2B+%27%25%27%29%3B%0A%0A++++%2F%2F+Update+label+visibility+on+slider+change%0A++++updateLabelVisibility%28%29%3B%0A%7D%3B",
-    "styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%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++++width%3A+100%25%3B%0A%7D%0A%0A.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++++width%3A+100%25%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%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.discrete-slider+%7B%0A++++display%3A+flex%3B%0A++++flex-direction%3A+column%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%3E.active-slider+%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++++display%3A+block%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+36px%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-left+%7B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-right+%7B%0A++++right%3A+0%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-color-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.active-slider+%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%0A%0A%0A%2F*+Ensure+the+container+is+positioned+relatively+to+contain+absolutely+positioned+children+*%2F%0A%0A.app-container.stop-indicator+%7B%0A++++position%3A+relative%3B%0A++++box-sizing%3A+border-box%3B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A++++margin-inline%3A+auto%3B%0A%7D%0A%0A%0A%2F*+Style+for+individual+step+labels+*%2F%0A%0A.app-container.stop-indicator+.step-label+%7B%0A++++position%3A+absolute%3B%0A++++text-align%3A+center%3B%0A++++white-space%3A+nowrap%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.hidden+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.inactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.active%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%5Bdata-position%3D%2299%22%5D+%7B%0A++++--position%3A+98.5%25+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%3A%3Abefore+%7B%0A++++position%3A+absolute%3B%0A++++height%3A+4px%3B%0A++++width%3A+4px%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++content%3A+%27%27%3B%0A++++top%3A+-30px%3B%0A++++visibility%3A+visible%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A%7D",
+    "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+class%3D%22slider-composite%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%22sliderContainer%22+class%3D%22filled-slider+discrete-slider%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22decrementButton%22+iconclass%3D%22bind%3Aprops.start_icon%22+on-click%3D%22decrementButtonClick%28%24event%2C+widget%29%22+show%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22sliderChange%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%22%3E%3C%2Fwm-slider%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22incrementButton%22+iconclass%3D%22bind%3Aprops.end_icon%22+on-click%3D%22incrementButtonClick%28%24event%2C+widget%29%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22labelsContainer%22+class%3D%22stop-indicator%22%3E%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
+    "script": "Widget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++value%2C%0A++++++++step_value%2C%0A++++++++required%2C%0A++++++++min_value%2C%0A++++++++max_value%2C%0A++++++++show_labels%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++start_icon%2C%0A++++++++end_icon%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A%0A%0A++++switch+%28propName%29+%7B%0A++++++++case+%27prop-value%27%3A%0A++++++++case+%27prop-min_value%27%3A%0A++++++++case+%27prop-max_value%27%3A%0A++++++++++++updateSlider%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++updateSliderStep%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++setRequired%28widgetMap%2C+required%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-show_labels%22%3A%0A++++++++++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-show_icons%22%3A%0A++++++++++++toggleIconsVisibility%28%0A++++++++++++++++showIconsBool%2C%0A++++++++++++++++iconActionsBool%2C%0A++++++++++++++++widgetMap%0A++++++++++++%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-start_icon%22%3A%0A++++++++++++updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-end_icon%22%3A%0A++++++++++++updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++value%2C%0A++++++++step_value%2C%0A++++++++required%2C%0A++++++++min_value%2C%0A++++++++max_value%2C%0A++++++++show_labels%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++start_icon%2C%0A++++++++end_icon%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A++++widgetMap.sliderContainer.nativeElement.classList.add%28%27filled-slider%27%2C+%27discrete-slider%27%29%3B%0A++++initializeSlider%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%2C+required%29%3B%0A++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++toggleIconsVisibility%28%0A++++++++showIconsBool%2C%0A++++++++iconActionsBool%2C%0A++++++++widgetMap%0A++++%29%3B%0A%0A%7D%3B%0A%0Afunction+initializeSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%2C+required%29+%7B%0A++++updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A++++setRequired%28widgetMap%2C+required%29%3B%0A++++appendSliderIndicator%28widgetMap.slider%29%3B%0A%7D%0A%0Afunction+updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++if+%28value+%21%3D%3D+undefined%29+%7B%0A++++++++widgetMap.slider.datavalue+%3D+Number%28value%29%3B%0A++++%7D%0A++++configureSliderAndSetStyles%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A++++setupStepsAndLabels%28widgetMap%29%3B%0A%7D%0A%0Afunction+updateSliderStep%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A%7D%0A%0Afunction+setRequired%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+appendSliderIndicator%28slider%29+%7B%0A++++const+sliderElement+%3D+slider.nativeElement%3B%0A++++if+%28sliderElement%29+%7B%0A++++++++const+indicator+%3D+document.createElement%28%27p%27%29%3B%0A++++++++const+labelContainer+%3D+document.createElement%28%27div%27%29%3B%0A++++++++labelContainer.className+%3D+%27stop-indicator%27%3B%0A++++++++indicator.className+%3D+%27active-slider%27%3B%0A++++++++sliderElement.appendChild%28indicator%29%3B%0A++++++++sliderElement.appendChild%28labelContainer%29%3B%0A%0A++++%7D%0A%7D%0A%0Afunction+configureSliderAndSetStyles%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++minValue+%3D+parseInt%28minValue%2C+10%29%3B%0A++++maxValue+%3D+parseInt%28maxValue%2C+10%29%3B%0A++++stepValue+%3D+parseInt%28stepValue%2C+10%29%3B%0A%0A++++if+%28isNaN%28minValue%29+%7C%7C+isNaN%28maxValue%29+%7C%7C+isNaN%28stepValue%29+%7C%7C+stepValue+%3C%3D+0%29+%7B%0A++++++++console.error%28%22Invalid+min%2C+max%2C+or+step+values%22%29%3B%0A++++++++return%3B%0A++++%7D%0A%0A++++slider.min+%3D+minValue%3B%0A++++slider.max+%3D+maxValue%3B%0A++++slider.step+%3D+stepValue%3B%0A++++slider.datavalue+%3D+clamp%28slider.datavalue%2C+minValue%2C+maxValue%29%3B%0A++++updateSliderStyles%28slider%2C+slider.datavalue%2C+minValue%2C+maxValue%29%3B%0A%7D%0A%0Afunction+updateSliderStyles%28slider%2C+value%2C+minValue%2C+maxValue%29+%7B%0A++++const+percentage+%3D+getSliderPercentage%28value%2C+minValue%2C+maxValue%29%3B%0A++++slider.nativeElement.style.setProperty%28%22--end%22%2C+%60%24%7B100+-+percentage%7D%25%60%29%0A%7D%0A%0Afunction+setupStepsAndLabels%28widgetMap%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++const+labelContainer+%3D+widgetMap.labelsContainer%3B%0A++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++if+%28%21labelContainer%29+return%3B%0A%0A++++const+numSteps+%3D+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29%3B%0A++++labelContainer.%24element%5B0%5D.innerHTML+%3D+%27%27%3B+%2F%2F+Clear+existing+labels%0A%0A++++for+%28let+i+%3D+0%3B+i+%3C%3D+numSteps%3B+i%2B%2B%29+%7B%0A++++++++const+labelValue+%3D+minValue+%2B+i+*+stepValue%3B%0A++++++++if+%28labelValue+%3E+maxValue%29+break%3B%0A%0A++++++++const+stepLabel+%3D+createStepLabel%28labelValue%2C+minValue%2C+maxValue%29%3B%0A++++++++labelContainer.%24element%5B0%5D.appendChild%28stepLabel%29%3B%0A++++%7D%0A%0A++++slider.%24element%5B0%5D.addEventListener%28%27input%27%2C+%28%29+%3D%3E+updateLabelVisibility%28widgetMap%29%29%3B%0A++++updateLabelVisibility%28widgetMap%29%3B%0A%7D%0A%0Afunction+createStepLabel%28labelValue%2C+minValue%2C+maxValue%29+%7B%0A++++const+stepLabel+%3D+document.createElement%28%27p%27%29%3B%0A++++stepLabel.className+%3D+%27step-label%27%3B%0A++++stepLabel.textContent+%3D+labelValue%3B%0A%0A++++const+position+%3D+%28%28labelValue+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A++++stepLabel.style.setProperty%28%27--position%27%2C+%60%24%7Bposition+-+1%7D%25%60%29%3B%0A++++stepLabel.setAttribute%28%27data-position%27%2C+position%29%3B%0A%0A++++return+stepLabel%3B%0A%7D%0A%0Afunction+updateLabelVisibility%28widgetMap%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++const+labels+%3D+widgetMap.labelsContainer.nativeElement.getElementsByClassName%28%27step-label%27%29%3B%0A++++const+sliderValue+%3D+slider.datavalue%3B%0A++++const+minValue+%3D+slider.min%3B%0A++++const+maxValue+%3D+slider.max%3B%0A++++const+stepValue+%3D+slider.step%3B%0A%0A++++const+validValues+%3D+Array.from%28%7B%0A++++++++++++length%3A+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29+%2B+1%0A++++++++%7D%2C+%28_%2C+i%29+%3D%3E+minValue+%2B+i+*+stepValue%29%0A++++++++.filter%28value+%3D%3E+value+%3C%3D+maxValue%29%3B%0A%0A++++for+%28const+label+of+labels%29+%7B%0A++++++++const+labelValue+%3D+parseInt%28label.textContent%2C+10%29%3B%0A++++++++label.classList.remove%28%27hidden%27%2C+%27inactive%27%2C+%27active%27%29%3B%0A%0A++++++++if+%28validValues.includes%28labelValue%29%29+%7B%0A++++++++++++if+%28labelValue+%3D%3D%3D+sliderValue%29+%7B%0A++++++++++++++++label.classList.add%28%27hidden%27%29%3B%0A++++++++++++%7D+else+if+%28labelValue+%3C+sliderValue%29+%7B%0A++++++++++++++++label.classList.add%28%27inactive%27%29%3B%0A++++++++++++%7D+else+%7B%0A++++++++++++++++label.classList.add%28%27active%27%29%3B%0A++++++++++++%7D%0A++++++++%7D%0A%0A++++++++label.style.display+%3D+%27block%27%3B%0A++++%7D%0A%7D%0A%0Afunction+getSliderPercentage%28value%2C+minValue%2C+maxValue%29+%7B%0A++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0Afunction+clamp%28value%2C+minValue%2C+maxValue%29+%7B%0A++++return+Math.min%28Math.max%28value%2C+minValue%29%2C+maxValue%29%3B%0A%7D%0A%0Afunction+toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29+%7B%0A++++if+%28showLabelsBool%29+%7B%0A++++++++widgetMap.slider.nativeElement.classList.remove%28%22hide-labels%22%29%3B%0A++++%7D+else+%7B%0A++++++++widgetMap.slider.nativeElement.classList.add%28%22hide-labels%22%29%3B%0A++++%7D%0A%7D%0A%0Afunction+toggleIconsVisibility%28%0A++++showIconsBool%2C%0A++++iconActionsBool%2C%0A++++widgetMap%0A%29+%7B%0A++++const+%7B%0A++++++++decrementButton%2C%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A%0A++++if+%28showIconsBool%29+%7B%0A++++++++updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++%7D+else+%7B%0A++++++++decrementButton.show+%3D+false%3B%0A++++++++incrementButton.show+%3D+false%3B%0A++++%7D%0A%7D%0A%0Afunction+updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++decrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++decrementButton.show+%3D+true%3B%0A++++decrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++incrementButton.show+%3D+true%3B%0A++++incrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+moveSlider%28direction%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++slider%0A++++%7D+%3D+widgetMap%3B%0A++++let+newValue+%3D+Number%28slider.datavalue%29+%2B+%28direction+*+slider.step%29%3B%0A++++newValue+%3D+Math.max%28Math.min%28newValue%2C+slider.maxvalue%29%2C+slider.minvalue%29%3B%0A++++slider.datavalue+%3D+newValue%3B%0A++++Widget.sliderChange%28null%2C+slider%2C+newValue%29%3B%0A%7D%0A%0Afunction+convertToBoolean%28value%29+%7B%0A++++return+value+%3D%3D%3D+true+%7C%7C+value+%3D%3D%3D+%22true%22%3B%0A%7D%0A%0A%0AWidget.sliderChange+%3D+function%28%24event%2C+widget%2C+newVal%29+%7B%0A++++updateSliderStyles%28widget%2C+newVal%2C+widget.min%2C+widget.max%29%3B%0A++++updateLabelVisibility%28Widget.Widgets%29%3B%0A%7D%3B%0A%0AWidget.decrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%28-1%2C+Widget.Widgets%29%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%281%2C+Widget.Widgets%29%3B%0A%7D%3B",
+    "styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+12px%3B%0A++++position%3A+relative%3B%0A++++width%3A+100%25%3B%0A%7D%0A%0A.app-container.discrete-slider.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.discrete-slider.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.discrete-slider.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider.discrete-slider+%7B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.discrete-slider.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.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.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.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.active-slider+%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++++display%3A+block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+36px%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-left+%7B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-right+%7B%0A++++right%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28+--wm-color-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.active-slider+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.discrete-slider.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%0A%0A%0A%2F*+Ensure+the+container+is+positioned+relatively+to+contain+absolutely+positioned+children+*%2F%0A%0A.app-container.stop-indicator+%7B%0A++++position%3A+relative%3B%0A++++box-sizing%3A+border-box%3B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A++++margin-inline%3A+auto%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28.discrete-slider+%3E+.btn-icon.btn%29+.app-container.stop-indicator+%7B%0A++++width%3A+calc%28100%25+-+168px%29%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28.discrete-slider+%3E+.btn-icon.btn%5Bhidden%5D%29+.app-container.stop-indicator+%7B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A%7D%0A%0A%0A%2F*+Style+for+individual+step+labels+*%2F%0A%0A.app-container.stop-indicator+.step-label+%7B%0A++++position%3A+absolute%3B%0A++++text-align%3A+center%3B%0A++++white-space%3A+nowrap%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.hidden+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.inactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.active%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%5Bdata-position%3D%2299%22%5D+%7B%0A++++--position%3A+98.5%25+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%3A%3Abefore+%7B%0A++++position%3A+absolute%3B%0A++++height%3A+4px%3B%0A++++width%3A+4px%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++content%3A+%27%27%3B%0A++++top%3A+-30px%3B%0A++++visibility%3A+visible%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-left+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right+%7B%0A++++display%3A+none%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%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%20the%20interactivity%20of%20the%20widget.%20%27Enabled%27%20allows%20interaction%20with%20the%20widget%2C%20while%20%27Disabled%27%20makes%20the%20widget%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%22Defines%20the%20text%20that%20appears%20on%20the%20widget%E2%80%99s%20label.%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%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%20initial%20value%20of%20the%20slider%20when%20the%20widget%20is%20first%20displayed.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22step_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%22Step%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20increment%20or%20decrement%20steps%20for%20the%20slider.%20This%20value%20controls%20the%20amount%20by%20which%20the%20slider%E2%80%99s%20value%20changes%20with%20each%20step.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2210%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22min_value%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%22Minimum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20smallest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22max_value%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%22Maximum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20largest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22100%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%22Triggered%20when%20the%20slider%E2%80%99s%20value%20changes.%20The%20function%20receives%20parameters%20including%20the%20event%2C%20the%20widget%2C%20the%20new%20value%2C%20and%20the%20previous%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"
+    "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%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%20the%20interactivity%20of%20the%20widget.%20%27Enabled%27%20allows%20interaction%20with%20the%20widget%2C%20while%20%27Disabled%27%20makes%20the%20widget%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%22Defines%20the%20text%20that%20appears%20on%20the%20widget%E2%80%99s%20label.%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_labels%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%20Labels%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20labels%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20lables%20will%20be%20shown.%20When%20false%2C%20labels%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%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%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%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%20initial%20value%20of%20the%20slider%20when%20the%20widget%20is%20first%20displayed.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22step_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%22Step%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20increment%20or%20decrement%20steps%20for%20the%20slider.%20This%20value%20controls%20the%20amount%20by%20which%20the%20slider%E2%80%99s%20value%20changes%20with%20each%20step.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2210%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22min_value%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%22Minimum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20smallest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22max_value%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%22Maximum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20largest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22100%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%22Triggered%20when%20the%20slider%E2%80%99s%20value%20changes.%20The%20function%20receives%20parameters%20including%20the%20event%2C%20the%20widget%2C%20the%20new%20value%2C%20and%20the%20previous%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22sliderChange(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22onDecrement%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%20Decrement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20decreased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22decrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22onIncrement%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%20Increment%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20increased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22incrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
 };

angular-codegen/dependencies/custom-widgets-m3/src/divider/divider.d.ts

@@ -0,0 +1,4 @@
+declare function updateDivider(divider: any, orientation_prop: any, vertical_height: any): void;
+declare function resetAndUpdateDividerClasses(divider: any, orientation: any, length: any): void;
+declare function calculateHeight(length: any, vertical_height: any): any;
+declare function setDividerHeight(divider: any, height: any): void;

angular-codegen/dependencies/custom-widgets-m3/src/divider/divider.js

@@ -1,28 +1,42 @@
-Widget.onReady = function () {
-    var orientation_array = Widget.props.orientation.toLowerCase().split("/");
-    var orientation = orientation_array[0]; // Vertical or Horizontal
-    var length = orientation_array[1];
-    Widget.Widgets.divider1.class = (" " + orientation + "-divider");
-    Widget.Widgets.divider1.class += (" " + length);
-    var divider1 = Widget.Widgets.divider1;
-    if (orientation === "vertical" && length === "full-width") {
-        var vertical_height = "".concat(Widget.props.vertical_height, "px");
-        divider1.$element.css({
-            'height': "".concat(vertical_height),
-        });
+Widget.onPropertyChange = function (propName, newValue, oldValue) {
+    var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
+    var widgetMap = Widget.Widgets;
+    var relevantProps = ["prop-vertical_height", "prop-orientation"];
+    if (relevantProps.includes(propName)) {
+        updateDivider(widgetMap.divider1, orientation, vertical_height);
     }
-    else if (orientation === "vertical" && length === "inset") {
-        var vertical_height = Widget.props.vertical_height - 16;
-        vertical_height = "".concat(vertical_height, "px");
-        divider1.$element.css({
-            'height': "".concat(vertical_height),
-        });
+};
+Widget.onReady = function () {
+    var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
+    var widgetMap = Widget.Widgets;
+    updateDivider(widgetMap.divider1, orientation, vertical_height);
+};
+function updateDivider(divider, orientation_prop, vertical_height) {
+    var orientationArray = orientation_prop.toLowerCase().split("/");
+    var orientation = orientationArray[0]; // Vertical or Horizontal
+    var length = orientationArray[1];
+    resetAndUpdateDividerClasses(divider, orientation, length);
+    if (orientation === "vertical") {
+        var height = calculateHeight(length, vertical_height);
+        setDividerHeight(divider, height);
     }
-    else if (orientation === "vertical" && length === "middle-inset") {
-        var vertical_height = Widget.props.vertical_height - 32;
-        vertical_height = "".concat(vertical_height, "px");
-        divider1.$element.css({
-            'height': "".concat(vertical_height),
-        });
+}
+function resetAndUpdateDividerClasses(divider, orientation, length) {
+    divider.nativeElement.classList.remove("full-width", "middle-inset", "horizontal-divider", "vertical-divider", "inset");
+    divider.nativeElement.classList.add("".concat(orientation, "-divider"), length);
+}
+function calculateHeight(length, vertical_height) {
+    switch (length) {
+        case "full-width":
+            return vertical_height;
+        case "inset":
+            return vertical_height - 16;
+        case "middle-inset":
+            return vertical_height - 32;
+        default:
+            return vertical_height;
     }
-};
+}
+function setDividerHeight(divider, height) {
+    divider.nativeElement.style.setProperty("height", "".concat(height, "px"));
+}

angular-codegen/dependencies/custom-widgets-m3/src/divider/page.min.js

@@ -1,7 +1,7 @@
 export var divider = {
-    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",
-    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",
-    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",
-    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%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"
+    "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",
+    "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",
+    "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",
+    "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%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"
 };

angular-codegen/dependencies/custom-widgets-m3/src/slider/slider.d.ts

@@ -1,11 +1,16 @@
 declare function convertToBoolean(value: any): boolean;
+declare function convertToBoolean(value: any): boolean;
+declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
 declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
 declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
+declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
 declare function updateSliderValue(datavalue: any, widgetMap: any): void;
+declare function toggleIconsVisibility(showIconsBool: any, iconActionsBool: any, widgetMap: any): void;
 declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
 declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
-declare function activeSliderElement(): void;
+declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
 declare function activeSliderElement(widgetMap: any): void;
+declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
 declare function getSliderPercentage(value: any): number;
-declare function getSliderPercentage(value: any): number;
+declare function moveSlider(direction: any, widgetMap: any): void;
 declare function moveSlider(direction: any, widgetMap: any): void;

angular-codegen/dependencies/custom-widgets-m3/src/switch_button/page.min.js

@@ -1,7 +1,7 @@
 export var switch_button = {
-    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%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",
+    "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",
+    "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",
+    "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",
+    "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%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"
 };

angular-codegen/dependencies/custom-widgets-m3/src/switch_button/switch_button.d.ts

@@ -0,0 +1,6 @@
+declare function handleTypeChange(switch_type: any, icon: any, unselected_icon: any, widgetMap: any): void;
+declare function handleRequiredChange(required: any, widgetMap: any): void;
+declare function handleCheckedValueChange(checked_value: any, selected: any, widgetMap: any): void;
+declare function handleIconVisibiltyChange(icon: any, widgetMap: any): void;
+declare function handleUnCheckedValueChange(unchecked_value: any, selected: any, widgetMap: any): void;
+declare function handleSelectedValueChange(selected: any, widgetMap: any): void;

angular-codegen/dependencies/custom-widgets-m3/src/switch_button/switch_button.js

@@ -1,33 +1,103 @@
 /*
  * 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 */
+Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
+    var widgetMap = Widget.Widgets;
+    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;
+    switch (propname) {
+        case 'prop-switch_type':
+            handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
+            break;
+        case 'prop-required':
+            handleRequiredChange(required, widgetMap);
+            break;
+        case 'prop-selected':
+            handleSelectedValueChange(selected, widgetMap);
+            break;
+        case 'prop-checked_value':
+            handleCheckedValueChange(checked_value, selected, widgetMap);
+            break;
+        case 'prop-unchecked_value':
+            handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
+            break;
+        case 'prop-icon':
+            handleIconVisibiltyChange(icon, widgetMap);
+            break;
+    }
+};
+/* 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'
-     */
-    if (Widget.props.switch_type === "filled") {
-        if (Widget.props.icon === "icon") {
-            Widget.Widgets.toggle.class += ' filled-switch icon';
-        }
-        else if (Widget.props.icon === "icon-checked") {
-            Widget.Widgets.toggle.class += ' filled-switch icon-checked';
+    var widgetMap = Widget.Widgets;
+    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;
+    handleTypeChange(switch_type, icon, unselected_icon, widgetMap);
+    handleRequiredChange(required, widgetMap);
+    handleCheckedValueChange(checked_value, selected, widgetMap);
+    handleUnCheckedValueChange(unchecked_value, selected, widgetMap);
+    handleSelectedValueChange(selected, widgetMap);
+};
+function handleTypeChange(switch_type, icon, unselected_icon, widgetMap) {
+    widgetMap.toggle.nativeElement.classList.remove('filled-switch', 'icon', 'unselected-icon', 'condensed-switch', 'ios-switch');
+    // Set CSS classes for the toggle widget based on the switch type
+    if (switch_type === "Filled") {
+        if (icon.toString().toLowerCase() === 'true') {
+            widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon');
         }
         else {
-            Widget.Widgets.toggle.class += ' filled-switch';
+            widgetMap.toggle.nativeElement.classList.add('filled-switch');
+        }
+        // Add 'unselected-icon' class if no unselected_icon is specified
+        if (unselected_icon == null || unselected_icon === "" || unselected_icon === " ") {
+            widgetMap.toggle.nativeElement.classList.add('filled-switch', 'icon', 'unselected-icon');
         }
     }
-    else if (Widget.props.switch_type === "condensed") {
-        Widget.Widgets.toggle.class += ' condensed-switch';
+    else if (switch_type === "Condensed") {
+        // Add 'condensed-switch' class
+        widgetMap.toggle.nativeElement.classList.add('condensed-switch');
     }
-    else if (Widget.props.switch_type === "iOS") {
-        Widget.Widgets.toggle.class += ' iOS-switch';
+    else if (switch_type === "IOS") {
+        // Add 'iOS-switch' class
+        widgetMap.toggle.nativeElement.classList.add('ios-switch');
     }
-};
+}
+function handleRequiredChange(required, widgetMap) {
+    // Set the 'required' property for the composite widget
+    widgetMap.composite.required = required;
+}
+function handleCheckedValueChange(checked_value, selected, widgetMap) {
+    // Set the 'checkedvalue' and 'uncheckedvalue' properties for the toggle widget
+    widgetMap.toggle.checkedvalue = checked_value;
+    handleSelectedValueChange(selected, widgetMap);
+}
+function handleIconVisibiltyChange(icon, widgetMap) {
+    if (icon.toString().toLowerCase() === 'true') {
+        widgetMap.toggle.nativeElement.classList.add('icon');
+    }
+    else {
+        widgetMap.toggle.nativeElement.classList.remove('icon');
+    }
+}
+function handleUnCheckedValueChange(unchecked_value, selected, widgetMap) {
+    widgetMap.toggle.uncheckedvalue = unchecked_value;
+    handleSelectedValueChange(selected, widgetMap);
+}
+function handleSelectedValueChange(selected, widgetMap) {
+    // Retrieve the selected value from page parameters
+    var selectedValue = selected;
+    // Determine the correct 'datavalue' based on the selected value
+    if (selectedValue === widgetMap.toggle.checkedvalue) {
+        // If selected value matches the checked value, set datavalue to checked value
+        widgetMap.toggle.datavalue = widgetMap.toggle.checkedvalue;
+    }
+    else if (selectedValue === widgetMap.toggle.uncheckedvalue) {
+        // If selected value matches the unchecked value, set datavalue to unchecked value
+        widgetMap.toggle.datavalue = widgetMap.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
+        widgetMap.toggle.datavalue = widgetMap.toggle.uncheckedvalue; // Default to unchecked
+    }
+}

angular-codegen/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-codegen",
-    "version": "12.0.0-next.45062",
+    "version": "12.0.0-next.45066",
     "description": "",
     "main": "index.js",
     "scripts": {