@wavemaker-ai/custom-widgets-m3 1.0.0-rc.647469

package/src/discrete_slider/discrete_slider.js

@@ -0,0 +1,219 @@
+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;
+    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':
+            updateSlider(widgetMap, value, min_value, max_value, step_value);
+            break;
+        case 'prop-step_value':
+            updateSliderStep(widgetMap, value, min_value, max_value, step_value);
+            break;
+        case 'prop-required':
+            setRequired(widgetMap, required);
+            break;
+        case "prop-show_labels":
+            toggleLabelVisibilty(showLabelsBool, widgetMap);
+            break;
+        case "prop-show_icons":
+            toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool);
+            break;
+        case "prop-start_icon":
+            updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+            break;
+        case "prop-end_icon":
+            updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+            break;
+    }
+};
+Widget.onReady = function () {
+    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;
+    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(widgetMap, showIconsBool, iconActionsBool);
+    Widget.getDatavalue = function () { return Widget.props.value; };
+};
+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);
+}
+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;
+    }
+    slider.min = minValue;
+    slider.max = maxValue;
+    slider.step = stepValue;
+    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(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');
+            }
+        }
+        label.style.display = 'block';
+    }
+}
+function getSliderPercentage(value, minValue, maxValue) {
+    return ((value - minValue) / (maxValue - minValue)) * 100;
+}
+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(widgetMap, showIconsBool, iconActionsBool) {
+    var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
+    if (showIconsBool) {
+        updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+        updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+    }
+    else {
+        decrementButton.show = false;
+        incrementButton.show = false;
+    }
+}
+function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
+    var decrementButton = widgetMap.decrementButton;
+    if (showIconsBool) {
+        decrementButton.show = true;
+        decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+            "auto" :
+            "none";
+    }
+    else {
+        decrementButton.show = false;
+    }
+}
+function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
+    var incrementButton = widgetMap.incrementButton;
+    if (showIconsBool) {
+        incrementButton.show = true;
+        incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+            "auto" :
+            "none";
+    }
+    else {
+        incrementButton.show = false;
+    }
+}
+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);
+};

package/src/discrete_slider/page.min.d.ts

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

package/src/discrete_slider/page.min.js

@@ -0,0 +1,7 @@
+export var discrete_slider = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite%22%20class%3D%22slider-composite%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22sliderContainer%22%20class%3D%22filled-slider%20discrete-slider%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22decrementButton%22%20iconclass%3D%22bind%3Aprops.start_icon%22%20on-click%3D%22decrementButtonClick(%24event%2C%20widget)%22%20show%3D%22false%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-slider%20name%3D%22slider%22%20class%3D%22cst-slider%22%20datavalue%3D%22bind%3Aprops.value%22%20on-change%3D%22sliderChange(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%20minvalue%3D%22bind%3Aprops.min_value%22%20maxvalue%3D%22bind%3Aprops.max_value%22%3E%3C%2Fwm-slider%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22incrementButton%22%20iconclass%3D%22bind%3Aprops.end_icon%22%20on-click%3D%22incrementButtonClick(%24event%2C%20widget)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22labelsContainer%22%20class%3D%22stop-indicator%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "Widget.onPropertyChange%20%3D%20function(propName%2C%20newValue%2C%20oldValue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20value%2C%0A%20%20%20%20%20%20%20%20step_value%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20min_value%2C%0A%20%20%20%20%20%20%20%20max_value%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%0A%20%20%20%20%20%20%20%20show_icons%2C%0A%20%20%20%20%20%20%20%20icon_actions%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20showIconsBool%20%3D%20convertToBoolean(show_icons)%3B%0A%20%20%20%20const%20showLabelsBool%20%3D%20convertToBoolean(show_labels)%3B%0A%20%20%20%20const%20iconActionsBool%20%3D%20convertToBoolean(icon_actions)%3B%0A%0A%20%20%20%20switch%20(propName)%20%7B%0A%20%20%20%20%20%20%20%20case%20'prop-value'%3A%0A%20%20%20%20%20%20%20%20case%20'prop-min_value'%3A%0A%20%20%20%20%20%20%20%20case%20'prop-max_value'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSlider(widgetMap%2C%20value%2C%20min_value%2C%20max_value%2C%20step_value)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20'prop-step_value'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderStep(widgetMap%2C%20value%2C%20min_value%2C%20max_value%2C%20step_value)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20'prop-required'%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20setRequired(widgetMap%2C%20required)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-show_labels%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20toggleLabelVisibilty(showLabelsBool%2C%20widgetMap)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-show_icons%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20toggleIconsVisibility(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widgetMap%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20showIconsBool%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-start_icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20case%20%22prop-end_icon%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20value%2C%0A%20%20%20%20%20%20%20%20step_value%2C%0A%20%20%20%20%20%20%20%20required%2C%0A%20%20%20%20%20%20%20%20min_value%2C%0A%20%20%20%20%20%20%20%20max_value%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%0A%20%20%20%20%20%20%20%20show_icons%2C%0A%20%20%20%20%20%20%20%20icon_actions%2C%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20const%20showIconsBool%20%3D%20convertToBoolean(show_icons)%3B%0A%20%20%20%20const%20showLabelsBool%20%3D%20convertToBoolean(show_labels)%3B%0A%20%20%20%20const%20iconActionsBool%20%3D%20convertToBoolean(icon_actions)%3B%0A%20%20%20%20widgetMap.sliderContainer.nativeElement.classList.add('filled-slider'%2C%20'discrete-slider')%3B%0A%20%20%20%20initializeSlider(widgetMap%2C%20value%2C%20min_value%2C%20max_value%2C%20step_value%2C%20required)%3B%0A%20%20%20%20toggleLabelVisibilty(showLabelsBool%2C%20widgetMap)%3B%0A%20%20%20%20toggleIconsVisibility(%0A%20%20%20%20%20%20%20%20widgetMap%2C%0A%20%20%20%20%20%20%20%20showIconsBool%2C%0A%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.value%3B%0A%0A%0A%7D%3B%0A%0Afunction%20initializeSlider(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue%2C%20required)%20%7B%0A%20%20%20%20updateSlider(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%3B%0A%20%20%20%20setRequired(widgetMap%2C%20required)%3B%0A%20%20%20%20appendSliderIndicator(widgetMap.slider)%3B%0A%7D%0A%0Afunction%20updateSlider(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%20%7B%0A%20%20%20%20if%20(value%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider.datavalue%20%3D%20Number(value)%3B%0A%20%20%20%20%7D%0A%20%20%20%20configureSliderAndSetStyles(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%3B%0A%20%20%20%20setupStepsAndLabels(widgetMap)%3B%0A%7D%0A%0Afunction%20updateSliderStep(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%20%7B%0A%20%20%20%20updateSlider(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%3B%0A%7D%0A%0Afunction%20setRequired(widgetMap%2C%20required)%20%7B%0A%20%20%20%20widgetMap.composite.required%20%3D%20required%3B%0A%7D%0A%0Afunction%20appendSliderIndicator(slider)%20%7B%0A%20%20%20%20const%20sliderElement%20%3D%20slider.nativeElement%3B%0A%20%20%20%20if%20(sliderElement)%20%7B%0A%20%20%20%20%20%20%20%20const%20indicator%20%3D%20document.createElement('p')%3B%0A%20%20%20%20%20%20%20%20const%20labelContainer%20%3D%20document.createElement('div')%3B%0A%20%20%20%20%20%20%20%20labelContainer.className%20%3D%20'stop-indicator'%3B%0A%20%20%20%20%20%20%20%20indicator.className%20%3D%20'active-slider'%3B%0A%20%20%20%20%20%20%20%20sliderElement.appendChild(indicator)%3B%0A%20%20%20%20%20%20%20%20sliderElement.appendChild(labelContainer)%3B%0A%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20configureSliderAndSetStyles(widgetMap%2C%20value%2C%20minValue%2C%20maxValue%2C%20stepValue)%20%7B%0A%20%20%20%20const%20slider%20%3D%20widgetMap.slider%3B%0A%20%20%20%20minValue%20%3D%20parseInt(minValue%2C%2010)%3B%0A%20%20%20%20maxValue%20%3D%20parseInt(maxValue%2C%2010)%3B%0A%20%20%20%20stepValue%20%3D%20parseInt(stepValue%2C%2010)%3B%0A%0A%20%20%20%20if%20(isNaN(minValue)%20%7C%7C%20isNaN(maxValue)%20%7C%7C%20isNaN(stepValue)%20%7C%7C%20stepValue%20%3C%3D%200)%20%7B%0A%20%20%20%20%20%20%20%20console.error(%22Invalid%20min%2C%20max%2C%20or%20step%20values%22)%3B%0A%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20slider.min%20%3D%20minValue%3B%0A%20%20%20%20slider.max%20%3D%20maxValue%3B%0A%20%20%20%20slider.step%20%3D%20stepValue%3B%0A%20%20%20%20slider.datavalue%20%3D%20clamp(slider.datavalue%2C%20minValue%2C%20maxValue)%3B%0A%20%20%20%20updateSliderStyles(slider%2C%20slider.datavalue%2C%20minValue%2C%20maxValue)%3B%0A%7D%0A%0Afunction%20updateSliderStyles(slider%2C%20value%2C%20minValue%2C%20maxValue)%20%7B%0A%20%20%20%20const%20percentage%20%3D%20getSliderPercentage(value%2C%20minValue%2C%20maxValue)%3B%0A%20%20%20%20slider.nativeElement.style.setProperty(%22--end%22%2C%20%60%24%7B100%20-%20percentage%7D%25%60)%0A%7D%0A%0Afunction%20setupStepsAndLabels(widgetMap)%20%7B%0A%20%20%20%20const%20slider%20%3D%20widgetMap.slider%3B%0A%20%20%20%20const%20labelContainer%20%3D%20widgetMap.labelsContainer%3B%0A%20%20%20%20const%20minValue%20%3D%20parseInt(slider.min%2C%2010)%3B%0A%20%20%20%20const%20maxValue%20%3D%20parseInt(slider.max%2C%2010)%3B%0A%20%20%20%20const%20stepValue%20%3D%20parseInt(slider.step%2C%2010)%3B%0A%0A%20%20%20%20if%20(!labelContainer)%20return%3B%0A%0A%20%20%20%20const%20numSteps%20%3D%20Math.ceil((maxValue%20-%20minValue)%20%2F%20stepValue)%3B%0A%20%20%20%20labelContainer.%24element%5B0%5D.innerHTML%20%3D%20''%3B%20%2F%2F%20Clear%20existing%20labels%0A%0A%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%3D%20numSteps%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20const%20labelValue%20%3D%20minValue%20%2B%20i%20*%20stepValue%3B%0A%20%20%20%20%20%20%20%20if%20(labelValue%20%3E%20maxValue)%20break%3B%0A%0A%20%20%20%20%20%20%20%20const%20stepLabel%20%3D%20createStepLabel(labelValue%2C%20minValue%2C%20maxValue)%3B%0A%20%20%20%20%20%20%20%20labelContainer.%24element%5B0%5D.appendChild(stepLabel)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20slider.%24element%5B0%5D.addEventListener('input'%2C%20()%20%3D%3E%20updateLabelVisibility(widgetMap))%3B%0A%20%20%20%20updateLabelVisibility(widgetMap)%3B%0A%7D%0A%0Afunction%20createStepLabel(labelValue%2C%20minValue%2C%20maxValue)%20%7B%0A%20%20%20%20const%20stepLabel%20%3D%20document.createElement('p')%3B%0A%20%20%20%20stepLabel.className%20%3D%20'step-label'%3B%0A%20%20%20%20stepLabel.textContent%20%3D%20labelValue%3B%0A%0A%20%20%20%20const%20position%20%3D%20((labelValue%20-%20minValue)%20%2F%20(maxValue%20-%20minValue))%20*%20100%3B%0A%20%20%20%20stepLabel.style.setProperty('--position'%2C%20%60%24%7Bposition%20-%201%7D%25%60)%3B%0A%20%20%20%20stepLabel.setAttribute('data-position'%2C%20position)%3B%0A%0A%20%20%20%20return%20stepLabel%3B%0A%7D%0A%0Afunction%20updateLabelVisibility(widgetMap)%20%7B%0A%20%20%20%20const%20slider%20%3D%20widgetMap.slider%3B%0A%20%20%20%20const%20labels%20%3D%20widgetMap.labelsContainer.nativeElement.getElementsByClassName('step-label')%3B%0A%20%20%20%20const%20sliderValue%20%3D%20slider.datavalue%3B%0A%20%20%20%20const%20minValue%20%3D%20slider.min%3B%0A%20%20%20%20const%20maxValue%20%3D%20slider.max%3B%0A%20%20%20%20const%20stepValue%20%3D%20slider.step%3B%0A%0A%20%20%20%20const%20validValues%20%3D%20Array.from(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20length%3A%20Math.ceil((maxValue%20-%20minValue)%20%2F%20stepValue)%20%2B%201%0A%20%20%20%20%20%20%20%20%7D%2C%20(_%2C%20i)%20%3D%3E%20minValue%20%2B%20i%20*%20stepValue)%0A%20%20%20%20%20%20%20%20.filter(value%20%3D%3E%20value%20%3C%3D%20maxValue)%3B%0A%0A%20%20%20%20for%20(const%20label%20of%20labels)%20%7B%0A%20%20%20%20%20%20%20%20const%20labelValue%20%3D%20parseInt(label.textContent%2C%2010)%3B%0A%20%20%20%20%20%20%20%20label.classList.remove('hidden'%2C%20'inactive'%2C%20'active')%3B%0A%0A%20%20%20%20%20%20%20%20if%20(validValues.includes(labelValue))%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(labelValue%20%3D%3D%3D%20sliderValue)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label.classList.add('hidden')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(labelValue%20%3C%20sliderValue)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label.classList.add('inactive')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label.classList.add('active')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20label.style.display%20%3D%20'block'%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20getSliderPercentage(value%2C%20minValue%2C%20maxValue)%20%7B%0A%20%20%20%20return%20((value%20-%20minValue)%20%2F%20(maxValue%20-%20minValue))%20*%20100%3B%0A%7D%0A%0Afunction%20clamp(value%2C%20minValue%2C%20maxValue)%20%7B%0A%20%20%20%20return%20Math.min(Math.max(value%2C%20minValue)%2C%20maxValue)%3B%0A%7D%0A%0Afunction%20toggleLabelVisibilty(showLabelsBool%2C%20widgetMap)%20%7B%0A%20%20%20%20if%20(showLabelsBool)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider.nativeElement.classList.remove(%22hide-labels%22)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider.nativeElement.classList.add(%22hide-labels%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20toggleIconsVisibility(%0A%20%20%20%20widgetMap%2C%0A%20%20%20%20showIconsBool%2C%0A%20%20%20%20iconActionsBool%0A)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20decrementButton%2C%0A%20%20%20%20%20%20%20%20incrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%20%20%20%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20false%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20updateStartIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20decrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20decrementButton.nativeElement.style.pointerEvents%20%3D%20iconActionsBool%20%3F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22auto%22%20%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%22none%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20decrementButton.show%20%3D%20false%0A%20%20%20%20%7D%0A%0A%7D%0A%0Afunction%20updateEndIconVisibility(widgetMap%2C%20iconActionsBool%2C%20showIconsBool)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20incrementButton%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%20%20%20%20if%20(showIconsBool)%20%7B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20incrementButton.nativeElement.style.pointerEvents%20%3D%20iconActionsBool%20%3F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22auto%22%20%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%22none%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20incrementButton.show%20%3D%20false%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20moveSlider(direction%2C%20widgetMap)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%20%20%20%20let%20newValue%20%3D%20Number(slider.datavalue)%20%2B%20(direction%20*%20slider.step)%3B%0A%20%20%20%20newValue%20%3D%20Math.max(Math.min(newValue%2C%20slider.maxvalue)%2C%20slider.minvalue)%3B%0A%20%20%20%20slider.datavalue%20%3D%20newValue%3B%0A%20%20%20%20Widget.sliderChange(null%2C%20slider%2C%20newValue)%3B%0A%7D%0A%0Afunction%20convertToBoolean(value)%20%7B%0A%20%20%20%20return%20value%20%3D%3D%3D%20true%20%7C%7C%20value%20%3D%3D%3D%20%22true%22%3B%0A%7D%0A%0A%0AWidget.sliderChange%20%3D%20function(%24event%2C%20widget%2C%20newVal)%20%7B%0A%20%20%20%20updateSliderStyles(widget%2C%20newVal%2C%20widget.min%2C%20widget.max)%3B%0A%20%20%20%20updateLabelVisibility(Widget.Widgets)%3B%0A%7D%3B%0A%0AWidget.decrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(-1%2C%20Widget.Widgets)%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(1%2C%20Widget.Widgets)%3B%0A%7D%3B%0A",
+    "styles": ".discrete-slider%2C%0A.stop-indicator%20%7B%0A%20%20%20%20--wm-discrete-slider-gap%3A%20var(--wm-space-3)%3B%0A%20%20%20%20--wm-discrete-slider-height%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-discrete-slider-border-radius%3A%20var(--wm-radius-lg)%3B%0A%20%20%20%20--wm-discrete-slider-filled-active-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-discrete-slider-filled-active-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-discrete-slider-filled-background-disabled%3A%20var(--wm-color-on-surface-focus)%3B%0A%20%20%20%20--wm-discrete-slider-filled-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-discrete-slider-filled-disabled-opacity%3A%200.38%3B%0A%20%20%20%20--wm-discrete-slider-filled-thumb-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-discrete-slider-filled-thumb-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-discrete-slider-filled-thumb-width%3A%20var(--wm-space-1)%3B%0A%20%20%20%20--wm-discrete-slider-filled-thumb-height%3A%20var(--wm-space-11)%3B%0A%20%20%20%20--wm-discrete-slider-filled-thumb-border-radius%3A%20var(--wm-radius-xs)%3B%0A%20%20%20%20--wm-discrete-slider-step-label-height%3A%20var(--wm-space-1)%3B%0A%20%20%20%20--wm-discrete-slider-step-label-width%3A%20var(--wm-space-1)%3B%0A%20%20%20%20--wm-discrete-slider-step-label-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-discrete-slider-step-label-active-background%3A%20var(--wm-color-surface-tint)%3B%0A%7D%0A%0A.app-composite-widget.form-group%3Ahas(.filled-slider)%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20align-items%3A%20start%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20gap%3A%20var(--wm-discrete-slider-gap)%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%20%7B%0A%20%20%20%20--start%3A%200%25%3B%0A%20%20%20%20--end%3A%20100%25%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20inline-size%3A%20auto%3B%0A%20%20%20%20block-size%3A%20calc(var(--wm-discrete-slider-height)%20%2B%20var(--wm-space-1))%3B%0A%20%20%20%20margin%3A%20calc(var(--wm-discrete-slider-height)%20%2B%202px)%200%3B%0A%20%20%20%20flex%3A%20none%3B%0A%20%20%20%20direction%3A%20ltr%3B%0A%20%20%20%20flex-grow%3A%201%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider.vertical%20%7B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20margin%3A%20var(--wm-space-2)%20auto%3B%0A%20%20%20%20padding%3A%2050%25%200%3B%0A%20%20%20%20transform%3A%20rotate(-90deg)%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%3Ahas(.app-slider.slider.cst-slider.vertical)%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider.discrete-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D%20.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%20%7B%0A%20%20%20%20transform%3A%20scaleX(-1)%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%20%20%20%20block-size%3A%20var(--wm-discrete-slider-height)%3B%0A%20%20%20%20background%3A%20none%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20opacity%3A%20unset%3B%0A%20%20%20%20color%3A%20unset%3B%0A%20%20%20%20height%3A%20unset%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Aonly-of-type%20%7B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%2Binput%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%20%20%20%20block-size%3A%20var(--wm-discrete-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-discrete-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-discrete-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-filled-thumb-background)%3B%0A%20%20%20%20cursor%3A%20grab%3B%0A%20%20%20%20margin%3A%200%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20appearance%3A%20none%3B%0A%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20pointer-events%3A%20all%3B%0A%20%20%20%20block-size%3A%20var(--wm-discrete-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-discrete-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-discrete-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-filled-thumb-background)%3B%0A%20%20%20%20cursor%3A%20grab%3B%0A%20%20%20%20margin%3A%200%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive%20%7B%0A%20%20%20%20cursor%3A%20grabbing%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive%20%7B%0A%20%20%20%20cursor%3A%20grabbing%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Anot(%3Adisabled)%3Ais(%3Afocus)%3A%3A-webkit-slider-thumb%20%7B%0A%20%20%20%20transform%3A%20scaleX(0.6)%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Anot(%3Adisabled)%3Ais(%3Afocus)%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20transform%3A%20scaleX(0.6)%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb%20%7B%0A%20%20%20%20cursor%3A%20not-allowed%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb%20%7B%0A%20%20%20%20cursor%3A%20not-allowed%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3A%3Abefore%20%7B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20inline-size%3A%20100%25%3B%0A%20%20%20%20block-size%3A%20var(--wm-discrete-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-discrete-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-filled-background)%3B%0A%20%20%20%20clip-path%3A%20polygon(calc(var(--start)%20-%200.5rem)%200%2C%200%200%2C%200%20100%25%2C%20calc(var(--start)%20-%200.5rem)%20100%25%2C%20calc(var(--start)%20-%200.5rem)%200%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%200%2C%20100%25%200%2C%20100%25%20100%25%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%20100%25%2C%20calc(100%25%20-%20var(--end)%20%2B%200.5rem)%200)%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3E.active-slider%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20block-size%3A%20var(--wm-discrete-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-discrete-slider-border-radius)%200%200%20var(--wm-discrete-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-filled-active-background)%3B%0A%20%20%20%20z-index%3A%200%3B%0A%20%20%20%20float%3A%20unset%3B%0A%20%20%20%20vertical-align%3A%20baseline%3B%0A%20%20%20%20inset%3A%20calc(50%25%20-%200.5rem)%20var(--end)%20auto%20var(--start)%3B%0A%20%20%20%20clip-path%3A%20polygon(0%200%2C%20calc(100%25%20-%200.5rem)%200%2C%20calc(100%25%20-%200.5rem)%20100%25%2C%200%20100%25)%3B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%2036px%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value.pull-left%20%7B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%3E.app-slider-value.pull-right%20%7B%0A%20%20%20%20right%3A%200%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider%20input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track%20%7B%0A%20%20%20%20background%3A%20unset%3B%0A%20%20%20%20height%3A%20unset%3B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A%0A%0A%2F*%20Ensure%20the%20container%20is%20positioned%20relatively%20to%20contain%20absolutely%20positioned%20children%20*%2F%0A%0A.app-container.stop-indicator%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20width%3A%20calc(100%25%20-%2048px)%3B%0A%20%20%20%20margin-inline%3A%20auto%3B%0A%7D%0A%0A.app-composite-widget%3Ahas(.discrete-slider%20%3E%20.btn-icon.btn)%20.app-container.stop-indicator%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20-%20168px)%3B%0A%7D%0A%0A.app-composite-widget%3Ahas(.discrete-slider%20%3E%20.btn-icon.btn%5Bhidden%5D)%20.app-container.stop-indicator%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20-%2048px)%3B%0A%7D%0A%0A%0A%2F*%20Style%20for%20individual%20step%20labels%20*%2F%0A%0A.app-container.stop-indicator%20.step-label%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20left%3A%20var(--position%2C%200%25)%3B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A%0A.app-container.stop-indicator%20.step-label.hidden%20%7B%0A%20%20%20%20display%3A%20none%20!important%3B%0A%7D%0A%0A.app-container.stop-indicator%20.step-label.inactive%3A%3Abefore%20%7B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-step-label-background)%3B%0A%7D%0A%0A.app-container.stop-indicator%20.step-label.active%3A%3Abefore%20%7B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-step-label-active-background)%3B%0A%7D%0A%0A.app-container.stop-indicator%20.step-label%5Bdata-position%3D%2299%22%5D%20%7B%0A%20%20%20%20--position%3A%2098.5%25%20!important%3B%0A%7D%0A%0A.app-container.stop-indicator%20.step-label%3A%3Abefore%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20height%3A%20var(--wm-discrete-slider-step-label-height)%3B%0A%20%20%20%20width%3A%20var(--wm-discrete-slider-step-label-width)%3B%0A%20%20%20%20left%3A%20var(--position%2C%200%25)%3B%0A%20%20%20%20content%3A%20''%3B%0A%20%20%20%20top%3A%20-30px%3B%0A%20%20%20%20visibility%3A%20visible%3B%0A%20%20%20%20background%3A%20var(--wm-discrete-slider-step-label-active-background)%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-left%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%20.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A",
+    "variables": "%7B%20%7D",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-slider%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'Enabled'%20allows%20interaction%20with%20the%20widget%2C%20while%20'Disabled'%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%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%22wi%20wi-minus%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%22wi%20wi-plus%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"
+};

package/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;

package/src/divider/divider.js

@@ -0,0 +1,42 @@
+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);
+    }
+};
+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);
+    }
+}
+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"));
+}

package/src/divider/page.min.d.ts

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

package/src/divider/page.min.js

@@ -0,0 +1,7 @@
+export var divider = {
+    "markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-container%20name%3D%22divider1%22%20class%3D%22divider%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%3C!--%20Height%20of%20vertical%20divider%20will%20be%20supplied%20using%20inline%20styles%20and%20the%20value%20can%20be%20picked%20up%20from%20node%20css.%20%0A%20%20%20%20A%20minimum%20height%20has%20been%20defined%20in%20the%20event%20that%20the%20user%20uses%20a%20custom%20widget%20divider.%20--%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "Widget.onPropertyChange%20%3D%20function(propName%2C%20newValue%2C%20oldValue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20orientation%2C%0A%20%20%20%20%20%20%20%20vertical_height%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20const%20relevantProps%20%3D%20%5B%22prop-vertical_height%22%2C%20%22prop-orientation%22%5D%3B%0A%20%20%20%20if%20(relevantProps.includes(propName))%20%7B%0A%20%20%20%20%20%20%20%20updateDivider(widgetMap.divider1%2C%20orientation%2C%20vertical_height)%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20orientation%2C%0A%20%20%20%20%20%20%20%20vertical_height%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20updateDivider(widgetMap.divider1%2C%20orientation%2C%20vertical_height)%3B%0A%7D%3B%0A%0Afunction%20updateDivider(divider%2C%20orientation_prop%2C%20vertical_height)%20%7B%0A%20%20%20%20const%20orientationArray%20%3D%20orientation_prop.toLowerCase().split(%22%2F%22)%3B%0A%20%20%20%20const%20orientation%20%3D%20orientationArray%5B0%5D%3B%20%2F%2F%20Vertical%20or%20Horizontal%0A%20%20%20%20const%20length%20%3D%20orientationArray%5B1%5D%3B%0A%20%20%20%20resetAndUpdateDividerClasses(divider%2C%20orientation%2C%20length)%3B%0A%0A%20%20%20%20if%20(orientation%20%3D%3D%3D%20%22vertical%22)%20%7B%0A%20%20%20%20%20%20%20%20const%20height%20%3D%20calculateHeight(length%2C%20vertical_height)%3B%0A%20%20%20%20%20%20%20%20setDividerHeight(divider%2C%20height)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20resetAndUpdateDividerClasses(divider%2C%20orientation%2C%20length)%20%7B%0A%20%20%20%20divider.nativeElement.classList.remove(%0A%20%20%20%20%20%20%20%20%22full-width%22%2C%0A%20%20%20%20%20%20%20%20%22middle-inset%22%2C%0A%20%20%20%20%20%20%20%20%22horizontal-divider%22%2C%0A%20%20%20%20%20%20%20%20%22vertical-divider%22%2C%0A%20%20%20%20%20%20%20%20%22inset%22%0A%20%20%20%20)%3B%0A%0A%20%20%20%20divider.nativeElement.classList.add(%60%24%7Borientation%7D-divider%60%2C%20length)%3B%0A%7D%0A%0Afunction%20calculateHeight(length%2C%20vertical_height)%20%7B%0A%20%20%20%20switch%20(length)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22full-width%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20vertical_height%3B%0A%20%20%20%20%20%20%20%20case%20%22inset%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20vertical_height%20-%2016%3B%0A%20%20%20%20%20%20%20%20case%20%22middle-inset%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20vertical_height%20-%2032%3B%0A%20%20%20%20%20%20%20%20default%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20vertical_height%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20setDividerHeight(divider%2C%20height)%20%7B%0A%20%20%20%20divider.nativeElement.style.setProperty(%22height%22%2C%20%60%24%7Bheight%7Dpx%60)%3B%0A%7D%0A",
+    "styles": ".divider%20%7B%0A%20%20%20%20--wm-divider-border-width%3A%20var(--wm-border-width)%3B%0A%20%20%20%20--wm-divider-border-style%3A%20var(--wm-border-style)%3B%0A%20%20%20%20--wm-divider-border-color%3A%20var(--wm-color-outline-variant)%3B%0A%20%20%20%20--wm-divider-inset-width%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-vertical-divider-width%3A%201px%3B%0A%7D%0A%0A.divider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20border-top%3A%20var(--wm-divider-border-width)%20var(--wm-divider-border-style)%20var(--wm-divider-border-color)%3B%0A%20%20%20%20height%3A%201px%3B%0A%20%20%20%20margin-block%3A%208px%3B%0A%7D%0A%0A.app-container%3E.divider.full-width%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20margin%3A%20auto%3B%0A%20%20%20%20padding%3A%200px%3B%0A%7D%0A%0A.divider.inset%20%7B%0A%20%20%20%20margin-left%3A%20var(--wm-divider-inset-width)%3B%0A%7D%0A%0A.divider.middle-inset%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20margin-inline%3A%20var(--wm-divider-inset-width)%3B%0A%7D%0A%0A.vertical-divider%20%7B%0A%20%20%20%20width%3A%20var(--wm-vertical-divider-width)%3B%0A%20%20%20%20border-left%3A%20var(--wm-divider-border-width)%20var(--wm-divider-border-style)%20var(--wm-divider-border-color)%3B%0A%20%20%20%20min-height%3A%201px%3B%0A%20%20%20%20margin-inline%3A%208px%3B%0A%7D%0A%0A.vertical-divider.full-width%20%7B%0A%20%20%20%20margin-top%3A%200%3B%0A%20%20%20%20margin-bottom%3A%200%3B%0A%7D%0A%0A.vertical-divider.inset%20%7B%0A%20%20%20%20margin-top%3A%20var(--wm-divider-inset-width)%3B%0A%7D%0A%0A.vertical-divider.middle-inset%20%7B%0A%20%20%20%20margin-block%3A%20var(--wm-divider-inset-width)%3B%0A%7D%0A",
+    "variables": "%7B%20%7D%0A",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-container%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%2050%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%0A"
+};

package/src/icon_button/icon_button.js

@@ -0,0 +1,16 @@
+/*
+ * Use App.getDependency for Dependency Injection
+ * eg: var DialogService = App.getDependency('DialogService');
+ */
+/* perform any action on widgets/variables within this block */
+Widget.onReady = function () {
+    /*
+     * variables can be accessed through 'Widget.Variables' property here
+     * e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
+     * Widget.Variables.loggedInUser.getData()
+     *
+     * widgets can be accessed through 'Widget.Widgets' property here
+     * e.g. to get value of text widget named 'username' use following script
+     * 'Widget.Widgets.username.datavalue'
+     */
+};

package/src/icon_button/page.min.d.ts

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

package/src/icon_button/page.min.js

@@ -0,0 +1,7 @@
+export var icon_button = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%22%20caption%3D%22%22%20type%3D%22button%22%20name%3D%22iconButton%22%20iconclass%3D%22bind%3Aprops.icon_class%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%20%3D%3D%20%26quot%3Bdisabled%26quot%3B%22%20conditionalclass%3D%22bind%3A'%20btn-'%20%2B%20props.style.toLowerCase()%20%2B%20'%20btn-'%20%2B%20props.button_size.toLowerCase()%20%2B%20'%20btn-'%20%2B%20props.color.toLowerCase()%22%3E%3C%2Fwm-button%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0A%2F*%20perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20%2F*%0A%20%20%20%20%20*%20variables%20can%20be%20accessed%20through%20'Widget.Variables'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20dataSet%20in%20a%20staticVariable%20named%20'loggedInUser'%20use%20following%20script%0A%20%20%20%20%20*%20Widget.Variables.loggedInUser.getData()%0A%20%20%20%20%20*%0A%20%20%20%20%20*%20widgets%20can%20be%20accessed%20through%20'Widget.Widgets'%20property%20here%0A%20%20%20%20%20*%20e.g.%20to%20get%20value%20of%20text%20widget%20named%20'username'%20use%20following%20script%0A%20%20%20%20%20*%20'Widget.Widgets.username.datavalue'%0A%20%20%20%20%20*%2F%0A%7D%3B%0A",
+    "styles": "%0A",
+    "variables": "%7B%20%7D%0A",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-button%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22style%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20of%20the%20widget.%20Options%20include%20'Filled'%2C%20'Standard'%2C%20and%20'Outlined'.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Standard%22%2C%20%22Outlined%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'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20'disabled'%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%22icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Icon%20class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20class%20to%20be%20used%20inside%20icon%20button%20%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-gear%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%22button_size%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%22Button%20size%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20the%20value%20for%20this%20property%20must%20be%20either%20'xs'%20for%20extrasmall%20etc.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22xs%22%2C%20%22sm%22%2C%20%22md%22%2C%20%22lg%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22md%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22color%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%22Tonal%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20The%20value%20for%20this%20property%20must%20be%20either%20secondary%2C%20tertiary%2C%20success%2C%20error%2C%20info%2C%20warning.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Default%22%2C%20%22Primary%22%2C%20%22Secondary%22%2C%20%22Tertiary%22%2C%20%22Success%22%2C%20%22Info%22%2C%20%22Warning%22%2C%20%22Error%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Default%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%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%0A"
+};

package/src/icon_button_toggleable/icon_button_toggleable.js

@@ -0,0 +1,17 @@
+/*
+ * Use App.getDependency for Dependency Injection
+ * eg: var DialogService = App.getDependency('DialogService');
+ */
+/* perform any action on widgets/variables within this block */
+/*
+ * 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'
+ */
+Widget.onReady = function () {
+    Widget.getDatavalue = function () { return Widget.props.selected; };
+};

package/src/icon_button_toggleable/page.min.d.ts

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

package/src/icon_button_toggleable/page.min.js

@@ -0,0 +1,7 @@
+export var icon_button_toggleable = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-container%20name%3D%22containerIconButtonToggle%22%20class%3D%22btn%20btn-icon%20toggle-button%22%20conditionalclass%3D%22bind%3A'btn-'%20%2B%20props.style.toLowerCase()%20%2B%20'%20'%20%2B%20(props.selected%20%3D%3D%20true%20%3F%20'selected'%3A'')%20%2B%20'%20btn-'%20%2B%20props.color.toLowerCase()%20%2B%20'%20btn-'%20%2B%20props.button_size.toLowerCase()%20%2B%20(props.state.toLowerCase()%20%3D%3D%20%26quot%3Bdisabled%26quot%3B%3F%26quot%3B%20disabled%26quot%3B%3A%26quot%3B%26quot%3B)%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-checkbox%20name%3D%22checkboxIconBtnToggle%22%20class%3D%22toggle-checkbox%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%20%3D%3D%3D%20%26quot%3Bdisabled%26quot%3B%22%20datavalue%3D%22bind%3Aprops.selected%22%3E%3C%2Fwm-checkbox%3E%0A%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22iconUnselected%22%20class%3D%22toggle-icon%22%20iconclass%3D%22bind%3Aprops.icon_class_unselected%22%20show%3D%22bind%3Aprops.selected%20!%3D%20true%20%3F%20true%3Afalse%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22iconSelected%22%20class%3D%22toggle-icon%22%20show%3D%22bind%3Aprops.selected%20%3D%3D%20true%20%3F%20true%3Afalse%22%20iconclass%3D%22bind%3Aprops.icon_class_selected%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0A%2F*%20perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0A%2F*%0A%20*%20variables%20can%20be%20accessed%20through%20'Widget.Variables'%20property%20here%0A%20*%20e.g.%20to%20get%20dataSet%20in%20a%20staticVariable%20named%20'loggedInUser'%20use%20following%20script%0A%20*%20Widget.Variables.loggedInUser.getData()%0A%20*%0A%20*%20widgets%20can%20be%20accessed%20through%20'Widget.Widgets'%20property%20here%0A%20*%20e.g.%20to%20get%20value%20of%20text%20widget%20named%20'username'%20use%20following%20script%0A%20*%20'Widget.Widgets.username.datavalue'%0A%20*%2F%0AWidget.onReady%20%3D%20function()%20%7B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.selected%3B%0A%7D%3B%0A",
+    "styles": ".btn.toggle-button%20.app-checkbox.toggle-checkbox%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20inset%3A%200%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-default%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-secondary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-default-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-default%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-secondary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-default-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-primary%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-surface-container-highest)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-primary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-primary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-secondary%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-outline-variant)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-outline-variant)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-secondary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-secondary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-tertiary%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-tertiary-container)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-tertiary-container)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-tertiary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-tertiary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-success%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-success-active)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-success-active)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-success-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-success-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-info%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-info-active)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-info-active)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-info-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-info-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-warning%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-warning-active)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-warning-active)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-warning-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-warning-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-error%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-error-active)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-error-active)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-error)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-danger-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-standard.btn-default%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-default-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-primary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-secondary-background)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-info-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-secondary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-outline-variant)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-info-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-tertiary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-tertiary-fixed)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-color-tertiary-container)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-success%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-success-container)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-color-success-container)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-info%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-info-container)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-color-info-container)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-warning%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-warning-container)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-color-warning-container)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-standard.btn-error%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-error-container)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-color-error-container)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-default%20%7B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-inverse-surface)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-inverse-surface)%3B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-inverse-on-surface)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-secondary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-default%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-default-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-default-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-default-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-default-outlined-state-layer-color)%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-primary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-primary)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-primary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-primary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-primary-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-primary-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-primary-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-primary-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-secondary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-secondary)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-secondary)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-secondary)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-secondary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-secondary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-secondary-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-secondary-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-secondary-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-secondary-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-tertiary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-tertiary)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-tertiary)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-tertiary)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-tertiary-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-tertiary%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-tertiary-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-tertiary-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-tertiary-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-tertiary-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-success%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-success)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-success)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-success)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-success-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-success%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-success-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-success-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-success-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-success-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-info%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-info)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-info)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-info)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-info-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-info%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-info-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-info-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-info-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-info-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-warning%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-warning)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-warning)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-warning)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-warning-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-warning%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-warning-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-warning-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-warning-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-warning-outlined-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button.selected%3Anot(.disabled).btn-outlined.btn-error%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-color-on-error)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-color-error)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-color-error)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-danger-state-layer-color)%3B%0A%7D%0A%0A.btn.toggle-button%3Anot(.selected)%3Anot(.disabled).btn-outlined.btn-error%20%7B%0A%20%20%20%20--wm-btn-color%3A%20var(--wm-btn-danger-outlined-color)%3B%0A%20%20%20%20--wm-btn-background%3A%20var(--wm-btn-danger-outlined-background)%3B%0A%20%20%20%20--wm-btn-border-color%3A%20var(--wm-btn-danger-outlined-border-color)%3B%0A%20%20%20%20--wm-btn-state-layer-color%3A%20var(--wm-btn-danger-outlined-state-layer-color)%3B%0A%7D%0A",
+    "variables": "%7B%20%7D%0A",
+    "config": "%7B%0A%20%20%20%20%22widgetType%22%20%3A%20%22wm-checkbox%22%2C%0A%20%20%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20'disabled'%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%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%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22style%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Style%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20style%20of%20the%20widget.%20Options%20include%20'Filled'%2C%20'Standard'%2C%20and%20'Outlined'.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Standard%22%2C%20%22Outlined%22%20%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22Filled%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22button_size%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Button%20size%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20the%20value%20for%20this%20property%20must%20be%20either%20'xs'%20for%20extrasmall%20etc.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22xs%22%2C%20%22sm%22%2C%20%22md%22%2C%20%22lg%22%20%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22md%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22color%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Tonal%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20The%20value%20for%20this%20property%20must%20be%20either%20secondary%2C%20tertiary%2C%20success%2C%20error%2C%20info%2C%20warning.%22%2C%0A%20%20%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Default%22%2C%20%22Primary%22%2C%20%22Secondary%22%2C%20%22Tertiary%22%2C%20%22Success%22%2C%20%22Info%22%2C%20%22Warning%22%2C%20%22Error%22%20%5D%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22Default%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22icon_class_unselected%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Unselected%20Icon%20class%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20class%20to%20use%20when%20the%20icon%20button%20toggleable%20is%20in%20the%20unselected%20state.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-gear%22%2C%0A%20%20%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22icon_class_selected%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Selected%20Icon%20class%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20icon%20class%20to%20use%20when%20the%20icon%20button%20toggleable%20is%20in%20the%20selected%20state.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-gear%22%2C%0A%20%20%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22selected%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Selected%22%2C%0A%20%20%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20icon%20button%20toggleable.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20widget.%20For%20example%2C%20'true'%20for%20checked%20and%20'false'%20for%20unchecked.%22%2C%0A%20%20%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%20%20%22onRender%22%20%3A%20%7B%0A%20%20%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%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20"
+};

package/src/input_chip/input_chip.d.ts

@@ -0,0 +1 @@
+declare function handleSelection(): void;

package/src/input_chip/input_chip.js

@@ -0,0 +1,29 @@
+/*
+ * Use App.getDependency for Dependency Injection
+ * eg: var DialogService = App.getDependency('DialogService');
+ */
+/* perform any action on widgets/variables within this block */
+/*
+ * 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'
+ */
+Widget.onReady = function () { };
+// handle input chip selection in run time
+Widget.chipClick = function ($event, widget) {
+    handleSelection();
+};
+Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
+    switch (propname) {
+        case "prop-selected":
+            handleSelection();
+            break;
+    }
+};
+function handleSelection() {
+    Widget.Widgets.chip.nativeElement.classList.toggle("selected");
+}

package/src/input_chip/page.min.d.ts

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

package/src/input_chip/page.min.js

@@ -0,0 +1,7 @@
+export var input_chip = {
+    "markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-container%20name%3D%22chip%22%20class%3D%22input-chip-wrapper%22%20on-click%3D%22chipClick(%24event%2C%20widget)%22%20conditionalclass%3D%22bind%3A(props.configuration.toLowerCase().includes(%26quot%3Bavatar%26quot%3B)%20%3F%20%26quot%3Bwith-avatar%26quot%3B%3A%26quot%3B%26quot%3B%20)%2B%20%26quot%3B%20%26quot%3B%2B%20(props.selected.toString().toLowerCase()%20%3D%3D%20%26quot%3Btrue%26quot%3B%3F%20%26quot%3Bselected%26quot%3B%3A%26quot%3B%26quot%3B)%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22icon_avatar%22%20class%3D%22input-chip-leading-wrapper%20d-inline-flex%22%20show%3D%22bind%3Aprops.configuration.toLowerCase()%20!%3D%3D%20%26quot%3Blabel%20only%26quot%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-icon%20name%3D%22displayIcon%22%20iconclass%3D%22bind%3A'text-primary%20'%20%2B%20props.leading_icon_class%22%20show%3D%22bind%3Aprops.configuration.toLowerCase().includes(%26quot%3Bicon%26quot%3B)%22%20class%3D%22leading_icon%22%3E%3C%2Fwm-icon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-picture%20name%3D%22pictureCase%22%20class%3D%22input-chip-avatar%22%20picturesource%3D%22bind%3Aprops.picture_source%22%20show%3D%22bind%3Aprops.configuration.toLowerCase().includes(%26quot%3Bavatar%26quot%3B)%22%20resizemode%3D%22cover%22%3E%3C%2Fwm-picture%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-label%20padding%3D%22unset%22%20class%3D%22p%22%20type%3D%22p%22%20name%3D%22displayLabel%22%20caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-button%20class%3D%22btn-icon%20btn-sm%20btn-chip-remove%22%20caption%3D%22%22%20type%3D%22button%22%20margin%3D%22unset%22%20name%3D%22buttonRemoveChip%22%20iconclass%3D%22bind%3Aprops.closing_icon_class%22%20show%3D%22bind%3Aprops.show_closing_icon%22%20on-click%3D%22buttonRemoveChipClick(%24event%2C%20widget)%22%3E%3C%2Fwm-button%3E%0A%20%20%20%20%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "%2F*%0A%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%0A%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%0A%20*%2F%0A%0A%2F*%20perform%20any%20action%20on%20widgets%2Fvariables%20within%20this%20block%20*%2F%0A%2F*%0A%20*%20variables%20can%20be%20accessed%20through%20'Widget.Variables'%20property%20here%0A%20*%20e.g.%20to%20get%20dataSet%20in%20a%20staticVariable%20named%20'loggedInUser'%20use%20following%20script%0A%20*%20Widget.Variables.loggedInUser.getData()%0A%20*%0A%20*%20widgets%20can%20be%20accessed%20through%20'Widget.Widgets'%20property%20here%0A%20*%20e.g.%20to%20get%20value%20of%20text%20widget%20named%20'username'%20use%20following%20script%0A%20*%20'Widget.Widgets.username.datavalue'%0A%20*%2F%0AWidget.onReady%20%3D%20function%20()%20%7B%7D%3B%0A%0A%2F%2F%20handle%20input%20chip%20selection%20in%20run%20time%0AWidget.chipClick%20%3D%20function%20(%24event%2C%20widget)%20%7B%0A%09handleSelection()%3B%0A%7D%3B%0A%0AWidget.onPropertyChange%20%3D%20function%20(propname%2C%20newvalue%2C%20oldvalue)%20%7B%0A%09switch%20(propname)%20%7B%0A%09%09case%20%22prop-selected%22%3A%0A%09%09%09handleSelection()%3B%0A%09%09%09break%3B%0A%09%7D%0A%7D%3B%0A%0Afunction%20handleSelection()%20%7B%0A%09Widget.Widgets.chip.nativeElement.classList.toggle(%22selected%22)%3B%0A%7D%0A",
+    "styles": ".input-chip-wrapper%20%7B%0A%20%20%20%20--wm-input-chip-height%3A%2032px%3B%0A%20%20%20%20--wm-input-chip-padding%3A%20var(--wm-space-1)%20var(--wm-space-3)%3B%0A%20%20%20%20--wm-input-chip-gap%3A%20var(--wm-space-2)%3B%0A%20%20%20%20--wm-input-chip-color%3A%20var(--wm-color-on-surface-variant)%3B%0A%20%20%20%20--wm-input-chip-background%3A%20none%3B%0A%20%20%20%20--wm-input-chip-background-selected%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-input-chip-border-width%3A%20var(--wm-border-width)%3B%0A%20%20%20%20--wm-input-chip-border-style%3A%20var(--wm-border-style)%3B%0A%20%20%20%20--wm-input-chip-border-color%3A%20var(--wm-color-outline)%3B%0A%20%20%20%20--wm-input-chip-border-color-selected%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-input-chip-border-radius%3A%20var(--wm-radius-sm)%3B%0A%20%20%20%20--wm-input-chip-border-radius-with-icon%3A%20var(--wm-radius-sm)%3B%0A%20%20%20%20--wm-input-chip-border-radius-with-avatar%3A%20var(--wm-radius-pill)%3B%0A%20%20%20%20--wm-input-chip-font-family%3A%20var(--wm-label-large-font-family)%3B%0A%20%20%20%20--wm-input-chip-font-weight%3A%20var(--wm-label-large-font-weight)%3B%0A%20%20%20%20--wm-input-chip-font-size%3A%20var(--wm-label-large-font-size)%3B%0A%20%20%20%20--wm-input-chip-line-height%3A%20var(--wm-label-large-line-height)%3B%0A%20%20%20%20--wm-input-chip-letter-spacing%3A%20var(--wm-label-large-letter-spacing)%3B%0A%20%20%20%20--wm-input-chip-layer-color%3A%20var(--wm-color-on-surface-variant)%3B%0A%20%20%20%20--wm-input-chip-layer-opacity-hover%3A%20var(--wm-opacity-hover)%3B%0A%20%20%20%20--wm-input-chip-layer-opacity-focus%3A%20var(--wm-opacity-focus)%3B%0A%20%20%20%20--wm-input-chip-layer-opacity-active%3A%20var(--wm-opacity-active)%3B%0A%20%20%20%20--wm-input-chip-avatar-size%3A%20var(--wm-icon-size)%3B%0A%20%20%20%20--wm-input-chip-avatar-radius%3A%20var(--wm-radius-pill)%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20gap%3A%20var(--wm-input-chip-gap)%3B%0A%20%20%20%20min-height%3A%20var(--wm-input-chip-height)%3B%0A%20%20%20%20height%3A%20var(--wm-input-chip-height)%3B%0A%20%20%20%20padding%3A%20var(--wm-input-chip-padding)%3B%0A%20%20%20%20color%3A%20var(--wm-input-chip-color)%3B%0A%20%20%20%20background%3A%20var(--wm-input-chip-background)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-input-chip-border-radius)%3B%0A%20%20%20%20border%3A%20var(--wm-input-chip-border-width)%20var(--wm-input-chip-border-style)%20var(--wm-input-chip-border-color)%3B%0A%20%20%20%20font-family%3A%20var(--wm-input-chip-font-family)%3B%0A%20%20%20%20font-weight%3A%20var(--wm-input-chip-font-weight)%3B%0A%20%20%20%20font-size%3A%20var(--wm-input-chip-font-size)%3B%0A%20%20%20%20line-height%3A%20var(--wm-input-chip-line-height)%3B%0A%20%20%20%20letter-spacing%3A%20var(--wm-input-chip-letter-spacing)%3B%0A%7D%0A%0A.input-chip-wrapper%3Abefore%20%7B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20right%3A%200%3B%0A%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20border-radius%3A%20inherit%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20background%3A%20var(--wm-input-chip-layer-color)%3B%0A%7D%0A%0A.input-chip-wrapper%3Ahover%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-input-chip-layer-opacity-hover)%3B%0A%7D%0A%0A.input-chip-wrapper%3Afocus%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-input-chip-layer-opacity-focus)%3B%0A%7D%0A%0A.input-chip-wrapper%3Aactive%3Abefore%2C%0A.input-chip-wrapper%3Aactive%3Ahover%3Abefore%2C%0A.input-chip-wrapper%3Aactive%3Afocus%3Abefore%20%7B%0A%20%20%20%20opacity%3A%20var(--wm-input-chip-layer-opacity-active)%3B%0A%7D%0A%0A.input-chip-wrapper.selected%20%7B%0A%20%20%20%20--wm-input-chip-background%3A%20var(--wm-input-chip-background-selected)%3B%0A%20%20%20%20--wm-input-chip-border-color%3A%20var(--wm-input-chip-border-color-selected)%3B%0A%7D%0A%0A.input-chip-wrapper%20.input-chip-leading-wrapper%20%7B%0A%20%20%20%20margin-left%3A%20calc(var(--wm-space-1)%20*%20-1)%3B%0A%7D%0A%0A.input-chip-wrapper.with-avatar%20%7B%0A%20%20%20%20border-radius%3A%20var(--wm-input-chip-avatar-radius)%3B%0A%7D%0A%0A.input-chip-wrapper.with-avatar%20.input-chip-leading-wrapper%20%7B%0A%20%20%20%20margin-left%3A%20calc(var(--wm-space-2)%20*%20-1)%3B%0A%7D%0A%0A.input-chip-wrapper%20.btn.btn-chip-remove%20%7B%0A%20%20%20%20width%3A%20auto%3B%0A%20%20%20%20padding%3A%20var(--wm-space-0)%3B%0A%20%20%20%20min-height%3A%20var(--wm-btn-icon-size)%3B%0A%20%20%20%20height%3A%20var(--wm-btn-icon-size)%3B%0A%20%20%20%20margin%3A%20var(--wm-space-0)%20calc(var(--wm-space-1)%20*%20-1)%20var(--wm-space-0)%20var(--wm-space-0)%3B%0A%7D%0A%0A.input-chip-wrapper%20.input-chip-avatar%20%7B%0A%20%20%20%20width%3A%20var(--wm-input-chip-avatar-size)%3B%0A%20%20%20%20height%3A%20var(--wm-input-chip-avatar-size)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-input-chip-avatar-radius)%3B%0A%7D%0A",
+    "variables": "%7B%20%7D%0A",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-container%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%20whether%20the%20component%20is%20active%20or%20inactive.%20'enabled'%20means%20the%20component%20is%20interactive%20and%20functional%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22enabled%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%22configuration%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%22options%22%20%3A%20%5B%20%22Label%20only%22%2C%20%22Label%20%26%20Leading%20icon%22%2C%20%22Label%20%26%20avatar%22%20%5D%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Configuration%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20Label%2C%20Leading%20Icon%20and%20avatar.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20only%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_closing_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20Closing%20icon%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20to%20show%2Fhide%20the%20closing%20Icon.%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%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Selected%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20of%20the%20input%20chip.%20This%20value%20is%20used%20to%20represent%20the%20state%20of%20the%20input%20chip.%20For%20example%2C%20'true'%20for%20selected%20and%20'false'%20for%20unselected.%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%22Specifies%20the%20label%20value%20of%20the%20Input%20chip.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22leading_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Leading%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Leading%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-user%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22trailing_icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Trailing%20Icon%20Class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20to%20specify%20the%20icon%20for%20the%20Trailing%20Icon%2FButton%20from%20wm%20icon%20library.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22wi%20wi-clear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22picture_source%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%22Avatar%20Source%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Allows%20you%20to%20specify%20the%20source%20URL%20for%20the%20avatar%20image.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22resources%2Fimages%2Fimagelists%2Fdefault-image.png%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%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%0A"
+};

package/src/progressbar/page.min.d.ts

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