npm - @wavemaker/custom-widgets-m3 - Versions diffs - 12.0.0-next.141130 → 12.0.0-next.141132 - Mend

@wavemaker/custom-widgets-m3 12.0.0-next.141130 → 12.0.0-next.141132

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

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

@@ -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"
+};

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

@@ -1,7 +1,7 @@
 export var input_chip = {
-    markup: "%3Cwm-custom-widget-container+name%3D%22custom-widget-container1%22%3E%0A++++%3Cwm-container+name%3D%22chip%22+class%3D%22input-chip%22+on-click%3D%22chipClick%28%24event%2C+widget%29%22+conditionalclass%3D%22bind%3A%28props.configuration.toLowerCase%28%29.includes%28%26quot%3Bavatar%26quot%3B%29+%3F+%26quot%3Brounded%26quot%3B%3A%26quot%3B%26quot%3B+%29%2B+%26quot%3B+%26quot%3B%2B+%28props.selected.toString%28%29.toLowerCase%28%29+%3D%3D+%26quot%3Btrue%26quot%3B%3F+%26quot%3Bselected%26quot%3B%3A%26quot%3B%26quot%3B%29%22%3E%0A++++++++%3Cwm-container+name%3D%22state-layer%22+class%3D%22state-layer%22%3E%0A++++++++++++%3Cwm-container+name%3D%22icon_avatar%22+show%3D%22bind%3Aprops.configuration.toLowerCase%28%29+%21%3D%3D+%26quot%3Blabel+only%26quot%3B%22%3E%0A++++++++++++++++%3Cwm-icon+name%3D%22displayIcon%22+iconclass%3D%22bind%3Aprops.leading_icon_class%22+show%3D%22bind%3Aprops.configuration.toLowerCase%28%29.includes%28%26quot%3Bicon%26quot%3B%29%22+class%3D%22leading_icon%22%3E%3C%2Fwm-icon%3E%0A++++++++++++++++%3Cwm-picture+name%3D%22pictureCase%22+class%3D%22avatarDisplay%22+picturesource%3D%22bind%3Aprops.picture_source%22+show%3D%22bind%3Aprops.configuration.toLowerCase%28%29.includes%28%26quot%3Bavatar%26quot%3B%29%22%3E%3C%2Fwm-picture%3E%0A++++++++++++%3C%2Fwm-container%3E%0A++++++++++++%3Cwm-label+padding%3D%22unset%22+class%3D%22p%22+type%3D%22p%22+name%3D%22displayLabel%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++++++%3Cwm-button+class%3D%22icon-button%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22closeIcon%22+iconclass%3D%22fa+fa-close%22+show%3D%22bind%3Aprops.show_closing_icon%22+on-click%3D%22button1Click%28%24event%2C+widget%29%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
-    script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0A%2F*%0A+*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+*+Widget.Variables.loggedInUser.getData%28%29%0A+*%0A+*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+*+%27Widget.Widgets.username.datavalue%27%0A+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%7D%3B%0A%0A%0A%2F%2F+handle+input+chip+selection+in+run+time%0AWidget.chipClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++handleSelection%28%29%3B%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++switch+%28propname%29+%7B%0A++++++++case+%27prop-selected%27%3A%0A++++++++++++handleSelection%28%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0Afunction+handleSelection%28%29+%7B%0A++++Widget.Widgets.chip.nativeElement.classList.toggle%28%22selected%22%29%3B%0A%7D",
-    styles: ".input-chip+%7B%0A++++--wm-selected-input-chip-background%3A+var%28--wm-color-secondary-fixed%29%3B%0A++++--wm-unselected-input-chip-background%3A+transparent%3B%0A++++--wm-input-chip-border-color%3A+var%28--wm-color-outline%29%3B%0A++++--wm-input-chip-text-color%3A+var%28--wm-color-on-surface-variant%29%3B%0A++++--wm-input-chip-font-family%3A+var%28--wm-label-large-font-family%29%3B%0A++++--wm-input-chip-font-size%3A+var%28--wm-label-large-font-size%29%3B%0A++++--wm-input-chip-line-height%3A+var%28--wm-label-large-line-height%29%3B%0A++++--wm-input-chip-letter-spacing%3A+var%28--wm-label-large-letter-spacing%29%3B%0A++++display%3A+flex%3B%0A++++justify-content%3A+center%3B%0A++++align-items%3A+center%3B%0A++++border-radius%3A+8px%3B%0A++++border%3A+1px+solid+var%28--wm-input-chip-border-color%29%3B%0A++++color%3A+var%28--wm-input-chip-text-color%29%3B%0A++++text-align%3A+center%3B%0A++++font-family%3A+var%28--wm-input-chip-font-family%29%3B%0A++++font-size%3A+var%28--wm-input-chip-font-size%29%3B%0A++++font-style%3A+normal%3B%0A++++font-weight%3A+500%3B%0A++++line-height%3A+var%28--wm-input-chip-line-height%29%3B%0A++++letter-spacing%3A+var%28--wm-input-chip-letter-spacing%29%3B%0A++++max-width%3A+fit-content%3B%0A%7D%0A%0A.input-chip%3Ahover+%7B%0A++++background%3A+var%28--wm-color-background%29%3B%0A%7D%0A%0A%0A%2F*+.input-chip.selected+%7B%0A++++background%3A+var%28--wm-selected-input-chip-background%29%3B%0A%7D+*%2F%0A%0A.state-layer+%7B%0A++++display%3A+flex%3B%0A++++flex-direction%3A+row%3B%0A++++align-items%3A+center%3B%0A++++justify-content%3A+center%3B%0A++++border-radius%3A+8px%3B%0A++++padding%3A+6px+8px%3B%0A++++gap%3A+8px%3B%0A%7D%0A%0A.state-layer%3Ahover+%7B%0A++++background%3A+var%28--wm-color-on-surface-variant-hover%29%3B%0A%7D%0A%0A.rounded+.state-layer+%7B%0A++++border-radius%3A+30px%3B%0A%7D%0A%0A.selected+%7B%0A++++border%3A+1px+solid+transparent%3B%0A++++border-radius%3A+8px%3B%0A++++background%3A+var%28--wm-selected-input-chip-background%29%3B%0A%7D%0A%0A.rounded+%7B%0A++++border-radius%3A+30px+%21important%3B%0A%7D%0A%0A.input-chip.clear+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.input-chip+.state-layer+.icon-button+%7B%0A++++background-color%3A+transparent%3B%0A++++border%3A+0%3B%0A++++padding%3A+0%3B%0A++++min-width%3A+fit-content%3B%0A++++min-height%3A+fit-content%3B%0A%7D%0A%0A.input-chip+.app-icon-wrapper+%7B%0A++++overflow%3A+visible%3B%0A%7D%0A%0A.input-chip.selected+.leading_icon+%7B%0A++++color%3A+var%28--wm-color-primary%29%3B%0A%7D%0A%0A.avatarDisplay+%7B%0A++++height%3A+24px%3B%0A++++width%3A+24px%3B%0A++++border-radius%3A+50%25%3B%0A++++vertical-align%3A+bottom%3B%0A%7D",
-    variables: "%7B+%7D",
-    config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%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%20and%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%22%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%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%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%22%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%22%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%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%22source%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%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",
+    "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"
 };

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

@@ -1,7 +1,7 @@
 export var progressbar = {
-    "markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22containerProgressLinearWrapper%22+class%3D%22progress-linear-wrapper%22+conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase%28%29+%2B+%27+%27+%2B+props.color.toLowerCase%28%29%22%3E%0A++++++++%3Cwm-container+name%3D%22containerProgressLinearEndPoint%22+conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase%28%29+%3D%3D+%26quot%3Bdeterminate%26quot%3B+%3F+%26quot%3Bprogress-linear-stop-indicator%26quot%3B%3A%26quot%3Bprogress-linear-track-inactive%26quot%3B%22%3E%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22containerProgressLinearTrackActive%22+class%3D%22progress-linear-track-active%22%3E%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22containerProgressLinearTrackInactive%22+class%3D%22progress-linear-track-inactive%22%3E%3C%2Fwm-container%3E%0A++++%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E",
-    "script": "%2F*+*+Use+App.getDependency+for+Dependency+Injection+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B+*%2F%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A++++const+%7B%0A++++++++progress%2C%0A++++++++transition_duration%0A++++%7D+%3D+Widget.props%3B%0A%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++%2F%2F+change+width+of+progress+and+inactive-tracker+%0A++++handleProgress%28widgetMap%2C+progress%29%3B%0A%0A++++%2F%2F+change+transition+duration%0A++++handleTransitionDuration%28widgetMap%2C+transition_duration%29%3B%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%0A++++const+%7B%0A++++++++progress%2C%0A++++++++transition_duration%0A++++%7D+%3D+Widget.props%3B%0A%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++switch+%28propname%29+%7B%0A++++++++case+%22prop-progress%22%3A%0A++++++++++++handleProgress%28widgetMap%2C+progress%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-transition_duration%22%3A%0A++++++++++++handleTransitionDuration%28widgetMap%2C+transition_duration%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0Afunction+handleProgress%28widgetMap%2C+progress%29+%7B%0A++++let+progressValue+%3D+progress%3B%0A++++let+numericValue+%3D+parseFloat%28progressValue%29%3B%0A++++let+progressWrapper+%3D+widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A++++progressWrapper.style.setProperty%28%22gap%22%2C+%22var%28--wm-progress-linear-gap%29%22%29%3B%0A++++if+%28numericValue+%3E%3D+100%29+%7B%0A++++++++progressWrapper.style.setProperty%28%22gap%22%2C+0%29%3B%0A++++%7D%0A++++setTimeout%28%28%29+%3D%3E+%7B%0A++++++++progressWrapper.style.setProperty%28%22--wm-progress-linear-width-active%22%2C+progressValue+%2B+%22%25%22%29%0A++++%7D%2C+500%29%3B%0A++++widgetMap.containerProgressLinearTrackActive.%24element%5B0%5D.setAttribute%28%27title%27%2C+progressValue+%2B+%22%25%22%29%3B%0A%7D%0A%0Afunction+handleTransitionDuration%28widgetMap%2C+transition_duration%29+%7B%0A++++let+transitionDuration+%3D+transition_duration+%3F+transition_duration+%3A+1%3B%0A++++let+progressWrapper+%3D+widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A++++let+transitionValue+%3D+%60%24%7BparseFloat%28transitionDuration%29%7Ds%60%3B%0A++++progressWrapper.style.setProperty%28%22--wm-progress-linear-transition-duration%22%2C+transitionValue%29%3B%0A%7D",
-    "styles": ".app-container.progress-linear-wrapper+%7B%0A++++--wm-progress-linear-width%3A+100%25%3B%0A++++--wm-progress-linear-width-active%3A+0%25%3B%0A++++--wm-progress-linear-height%3A+4px%3B%0A++++--wm-progress-linear-gap%3A+4px%3B%0A++++--wm-progress-linear-radius%3A+8px%3B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-primary-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-primary%29%3B%0A++++--wm-progress-linear-transition-duration%3A+1s%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A++++gap%3A+var%28--wm-progress-linear-gap%29%3B%0A++++width%3A+var%28--wm-progress-linear-width%29%3B%0A++++height%3A+var%28--wm-progress-linear-height%29%3B%0A++++border-radius%3A+var%28--wm-progress-linear-radius%29%3B%0A++++overflow%3A+hidden%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper+.app-container.progress-linear-stop-indicator+%7B%0A++++height%3A+var%28--wm-progress-linear-height%29%3B%0A++++width%3A+var%28--wm-progress-linear-height%29%3B%0A++++background%3A+var%28--wm-progress-linear-background-active%29%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+inline-block%3B%0A++++position%3A+absolute%3B%0A++++top%3A+0%3B%0A++++right%3A+0%3B%0A++++z-index%3A+1%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper+.app-container.progress-linear-track-inactive+%7B%0A++++height%3A+100%25%3B%0A++++background%3A+var%28--wm-progress-linear-background%29%3B%0A++++width%3A+calc%28100%25+-+var%28--wm-progress-linear-width-active%29%29%3B%0A++++%2F*+Full+width+initially+*%2F%0A++++border-radius%3A+var%28--wm-progress-linear-radius%29%3B%0A++++position%3A+relative%3B%0A++++transition%3A+width+var%28--wm-progress-linear-transition-duration%29+ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper+.app-container.progress-linear-track-active+%7B%0A++++height%3A+100%25%3B%0A++++background%3A+var%28--wm-progress-linear-background-active%29%3B%0A++++width%3A+var%28--wm-progress-linear-width-active%29%3B%0A++++%2F*+Width+controlled+by+custom+property+*%2F%0A++++border-radius%3A+var%28--wm-progress-linear-radius%29%3B%0A++++transition%3A+width+var%28--wm-progress-linear-transition-duration%29+ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate+%7B%0A++++transition%3A+none%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate+.app-container.progress-linear-track-inactive%3Afirst-child+%7B%0A++++width%3A+0%25%3B%0A++++animation%3A+var%28--wm-progress-linear-transition-duration%29+ease-in-out+0s+infinite+normal+none+running+animation-indeterminate-start%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate+.app-container.progress-linear-track-inactive%3Alast-child+%7B%0A++++width%3A+0%25%3B%0A++++animation%3A+var%28--wm-progress-linear-transition-duration%29+ease-in-out+0s+infinite+normal+none+running+animation-indeterminate-end%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate+.app-container.progress-linear-track-active+%7B%0A++++width%3A+100%25%3B%0A++++animation%3A+var%28--wm-progress-linear-transition-duration%29+ease-in-out+0s+infinite+normal+none+running+animation-indeterminate-active%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.secondary+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-secondary-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-secondary%29%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.tertiary+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-tertiary-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-tertiary%29%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.success+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-success-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-success%29%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.info+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-info-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-info%29%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.warning+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-warning-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-warning%29%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.error+%7B%0A++++--wm-progress-linear-background%3A+var%28--wm-color-error-container%29%3B%0A++++--wm-progress-linear-background-active%3A+var%28--wm-color-error%29%3B%0A%7D",
-    "variables": "%7B+%7D",
-    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22progress%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%22Progress%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20current%20progress%20of%20the%20bar.%20This%20value%20represents%20the%20percentage%20of%20completion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22linear_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Progress%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20progress%20bar.%20Options%20include%20%27determinate%27%20for%20a%20fixed%20progress%20bar%20or%20%27indeterminate%27%20for%20an%20animated%20progress%20bar%20without%20a%20fixed%20end.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Determinate%22%2C%20%22Indeterminate%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Determinate%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%22Color%20Variant%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20color%20for%20progress%20indicator.%20Options%20include%20like%20%27Success%27%20for%20a%20success%20color%20progress%20indicator.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%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%22Primary%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22transition_duration%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%22Transition%20Duration%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20duration%20of%20the%20progress%20transition%20animation.%20This%20value%20should%20be%20specified%20in%20a%20time%20format%20such%20as%20%27500ms%27%20or%20%272s%27.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220.75s%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
+    "markup": "%3Cwm-custom-widget-container%3E%0A%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearWrapper%22%20class%3D%22progress-linear-wrapper%22%20conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase()%20%2B%20'%20'%20%2B%20props.color.toLowerCase()%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearEndPoint%22%20conditionalclass%3D%22bind%3Aprops.linear_type.toLowerCase()%20%3D%3D%20%26quot%3Bdeterminate%26quot%3B%20%3F%20%26quot%3Bprogress-linear-stop-indicator%26quot%3B%3A%26quot%3Bprogress-linear-track-inactive%26quot%3B%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearTrackActive%22%20class%3D%22progress-linear-track-active%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22containerProgressLinearTrackInactive%22%20class%3D%22progress-linear-track-inactive%22%3E%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-container%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
+    "script": "%2F*%20*%20Use%20App.getDependency%20for%20Dependency%20Injection%20*%20eg%3A%20var%20DialogService%20%3D%20App.getDependency('DialogService')%3B%20*%2F%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%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20progress%2C%0A%20%20%20%20%20%20%20%20transition_duration%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%20%20%20%20%2F%2F%20change%20width%20of%20progress%20and%20inactive-tracker%20%0A%20%20%20%20handleProgress(widgetMap%2C%20progress)%3B%0A%0A%20%20%20%20%2F%2F%20change%20transition%20duration%0A%20%20%20%20handleTransitionDuration(widgetMap%2C%20transition_duration)%3B%0A%7D%0A%0AWidget.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%20progress%2C%0A%20%20%20%20%20%20%20%20transition_duration%0A%20%20%20%20%7D%20%3D%20Widget.props%3B%0A%0A%20%20%20%20const%20widgetMap%20%3D%20Widget.Widgets%3B%0A%0A%20%20%20%20switch%20(propname)%20%7B%0A%20%20%20%20%20%20%20%20case%20%22prop-progress%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleProgress(widgetMap%2C%20progress)%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-transition_duration%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20handleTransitionDuration(widgetMap%2C%20transition_duration)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20handleProgress(widgetMap%2C%20progress)%20%7B%0A%20%20%20%20let%20progressValue%20%3D%20progress%3B%0A%20%20%20%20let%20numericValue%20%3D%20parseFloat(progressValue)%3B%0A%20%20%20%20let%20progressWrapper%20%3D%20widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A%20%20%20%20progressWrapper.style.setProperty(%22gap%22%2C%20%22var(--wm-progress-linear-gap)%22)%3B%0A%20%20%20%20if%20(numericValue%20%3E%3D%20100)%20%7B%0A%20%20%20%20%20%20%20%20progressWrapper.style.setProperty(%22gap%22%2C%200)%3B%0A%20%20%20%20%7D%0A%20%20%20%20progressWrapper.style.setProperty(%22--wm-progress-linear-width-active%22%2C%20progressValue%20%2B%20%22%25%22)%3B%0A%20%20%20%20widgetMap.containerProgressLinearTrackActive.%24element%5B0%5D.setAttribute('title'%2C%20progressValue%20%2B%20%22%25%22)%3B%0A%7D%0A%0Afunction%20handleTransitionDuration(widgetMap%2C%20transition_duration)%20%7B%0A%20%20%20%20let%20transitionDuration%20%3D%20transition_duration%20%3F%20transition_duration%20%3A%201%3B%0A%20%20%20%20let%20progressWrapper%20%3D%20widgetMap.containerProgressLinearWrapper.%24element%5B0%5D%3B%0A%20%20%20%20let%20transitionValue%20%3D%20%60%24%7BparseFloat(transitionDuration)%7Ds%60%3B%0A%20%20%20%20progressWrapper.style.setProperty(%22--wm-progress-linear-transition-duration%22%2C%20transitionValue)%3B%0A%7D%0A",
+    "styles": ".app-container.progress-linear-wrapper%20%7B%0A%20%20%20%20--wm-progress-linear-width%3A%20100%25%3B%0A%20%20%20%20--wm-progress-linear-width-active%3A%200%25%3B%0A%20%20%20%20--wm-progress-linear-height%3A%204px%3B%0A%20%20%20%20--wm-progress-linear-gap%3A%204px%3B%0A%20%20%20%20--wm-progress-linear-radius%3A%208px%3B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-primary)%3B%0A%20%20%20%20--wm-progress-linear-transition-duration%3A%201s%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20gap%3A%20var(--wm-progress-linear-gap)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-width)%3B%0A%20%20%20%20height%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-stop-indicator%20%7B%0A%20%20%20%20height%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-height)%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background-active)%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20right%3A%200%3B%0A%20%20%20%20z-index%3A%201%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-track-inactive%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background)%3B%0A%20%20%20%20width%3A%20calc(100%25%20-%20var(--wm-progress-linear-width-active))%3B%0A%20%20%20%20%2F*%20Full%20width%20initially%20*%2F%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20transition%3A%20width%20var(--wm-progress-linear-transition-duration)%20ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper%20.app-container.progress-linear-track-active%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20background%3A%20var(--wm-progress-linear-background-active)%3B%0A%20%20%20%20width%3A%20var(--wm-progress-linear-width-active)%3B%0A%20%20%20%20%2F*%20Width%20controlled%20by%20custom%20property%20*%2F%0A%20%20%20%20border-radius%3A%20var(--wm-progress-linear-radius)%3B%0A%20%20%20%20transition%3A%20width%20var(--wm-progress-linear-transition-duration)%20ease-in-out%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20%7B%0A%20%20%20%20transition%3A%20none%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-inactive%3Afirst-child%20%7B%0A%20%20%20%20width%3A%200%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-start%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-inactive%3Alast-child%20%7B%0A%20%20%20%20width%3A%200%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-end%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.indeterminate%20.app-container.progress-linear-track-active%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20animation%3A%20var(--wm-progress-linear-transition-duration)%20ease-in-out%200s%20infinite%20normal%20none%20running%20animation-indeterminate-active%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.secondary%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-secondary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-secondary)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.tertiary%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-tertiary-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-tertiary)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.success%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-success-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-success)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.info%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-info-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-info)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.warning%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-warning-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-warning)%3B%0A%7D%0A%0A.app-container.progress-linear-wrapper.error%20%7B%0A%20%20%20%20--wm-progress-linear-background%3A%20var(--wm-color-error-container)%3B%0A%20%20%20%20--wm-progress-linear-background-active%3A%20var(--wm-color-error)%3B%0A%7D%0A",
+    "variables": "%7B%20%7D%0A",
+    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-progress-bar%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22progress%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%22Progress%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20current%20progress%20of%20the%20bar.%20This%20value%20represents%20the%20percentage%20of%20completion.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22linear_type%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Progress%20Type%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20progress%20bar.%20Options%20include%20'determinate'%20for%20a%20fixed%20progress%20bar%20or%20'indeterminate'%20for%20an%20animated%20progress%20bar%20without%20a%20fixed%20end.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Determinate%22%2C%20%22Indeterminate%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Determinate%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%22Color%20Variant%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20type%20of%20color%20for%20progress%20indicator.%20Options%20include%20like%20'Success'%20for%20a%20success%20color%20progress%20indicator.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%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%22Primary%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22transition_duration%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%22Transition%20Duration%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20duration%20of%20the%20progress%20transition%20animation.%20This%20value%20should%20be%20specified%20in%20a%20time%20format%20such%20as%20'500ms'%20or%20'2s'.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220.75s%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
 };

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

@@ -1,7 +1,7 @@
 export var radio_set = {
     "markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite1%22%20captionposition%3D%22top%22%20required%3D%22false%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-label%20class%3D%22control-label%22%20notag%3D%22true%22%20name%3D%22label1%22%20required%3D%22false%22%20caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cwm-radioset%20height%3D%22auto%22%20name%3D%22radioset%22%20disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%20readonly%3D%22false%22%20dataset%3D%22bind%3Aprops.data_set%22%20datafield%3D%22All%20Fields%22%20required%3D%22bind%3Aprops.required%22%20usekeys%3D%22false%22%20datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-radioset%3E%0A%20%20%20%20%20%20%20%20%3C%2Fwm-container%3E%0A%20%20%20%20%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E%0A",
-    "script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%0AWidget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+propertyHandlers+%3D+%7B%0A++++++++%27prop-required%27%3A+%28%29+%3D%3E+handleRequiredChange%28widgetMap%2C+required%29%2C%0A++++++++%27prop-layout%27%3A+%28%29+%3D%3E+handleLayoutChange%28widgetMap%2C+layout%29%2C%0A++++++++%27prop-label_placement%27%3A+%28%29+%3D%3E+handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A%0A++++%7D%3B%0A%0A++++if+%28propertyHandlers%5BpropName%5D%29+%7B%0A++++++++propertyHandlers%5BpropName%5D%28%29%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++handleLayoutChange%28widgetMap%2C+layout%29%3B%0A++++handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A++++handleRequiredChange%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0A%2F%2F+Utility+function+to+manage+class+additions+and+removals%0Afunction+updateClasses%28element%2C+classMap%29+%7B%0A++++Object.keys%28classMap%29.forEach%28%28className%29+%3D%3E+%7B%0A++++++++element.classList.toggle%28className%2C+classMap%5BclassName%5D%29%3B%0A++++%7D%29%3B%0A%7D%0A%0A%0Afunction+handleLabelPlacementChange%28widgetMap%2C+label_placement%29+%7B%0A++++updateClasses%28widgetMap.radioset.nativeElement%2C+%7B%0A++++++++%27top-placement%27%3A+label_placement+%3D%3D%3D+%22top%22%2C%0A++++++++%27bottom-placement%27%3A+label_placement+%3D%3D%3D+%22bottom%22%2C%0A++++++++%27start-placement%27%3A+label_placement+%3D%3D%3D+%22start%22%0A++++%7D%29%3B%0A%7D%0A%0A%0A%0Afunction+handleLayoutChange%28widgetMap%2C+layout%29+%7B%0A++++updateClasses%28widgetMap.radioset.nativeElement%2C+%7B%0A++++++++%27horizontal%27%3A+layout+%3D%3D%3D+%22horizontal%22%2C%0A++++++++%27vertical%27%3A+layout+%3D%3D%3D+%22vertical%22%0A++++%7D%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite1.required+%3D+required%3B%0A%7D",
-    "styles": ".app-radioset.list-group.inline%2C%0A.app-radioset.list-group+%7B%0A++++flex-direction%3A+column%3B%0A++++display%3A+inline-flex%3B%0A%7D%0A%0A.wm-app+.app-radio.radio+%7B%0A++++width%3A+auto%3B%0A%7D%0A%0A.app-radioset.list-group.inline.horizontal%2C%0A.app-radioset.list-group.horizontal+%7B%0A++++flex-direction%3A+row%3B%0A++++display%3A+inline-flex%3B%0A%7D%0A%0A%0A%2F*+start+label+placement+styles++*%2F%0A%0A.app-radioset.horizontal.start-placement+.app-radioset-label%3E.caption%2C%0A.app-radioset.vertical.start-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.radio%3Elabel+.caption%3Abefore%2C%0A.app-radioset.vertical.start-placement+.radio%3Elabel+.caption%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.radio%3Elabel+.caption%3Aafter%2C%0A.app-radioset.vertical.start-placement+.radio%3Elabel+.caption%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-size%29+*+0.25%29%29%3B%0A++++right%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-size%29+*+0.25%29%29%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical.start-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+unset%3B%0A++++right%3A+0px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-radioset.top-placement+%7B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++padding-top%3A+unset%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29+%2B+calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29%29%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.top-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++top%3A+calc%28calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-radioset.top-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+*+0.5%29+%2B+calc%28var%28--wm-radiobutton-caption-line-height%29+%2B+var%28--wm-radiobutton-gap%29%29+%2B+calc%28var%28--wm-radiobutton-size%29*+0.25%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-50%25%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unsetal%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%0A%0A.app-radioset.top-placement+%7B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A%7D%0A%0A.app-radioset.bottom-placement+%7B%0A++++display%3A+inline-flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-radioset.bottom-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-50%25%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radio.radio%3Elabel+.caption%3Aafter+%7B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-radiobutton-state-layer-size%29+%2B+var%28--wm-radiobutton-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A++++transform%3A+translate%28-50%25%2C+5px%29+rotate%280deg%29+scale%281%29%3B%0A++++transition%3A+unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radioset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+calc%28%28var%28--wm-radiobutton-state-layer-size%29+-+var%28--wm-radiobutton-size%29%29+%2F+2%29%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement+.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+0px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D",
-    "variables": "%7B+%7D",
-    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20%27horizontal%27%20indicates%20that%20the%20element%27s%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20%27vertical%27%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_placement%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%22Label%20Placement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20label%27s%20position%20relative%20to%20the%20component.%20Options%3A%20%27top%27%20(Label%20appears%20above%20the%20component)%2C%20%27bottom%27%20(Label%20appears%20below%20the%20component)%2C%20%27start%27%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%2C%20%22end%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22end%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%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20RadioSet%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22data_set%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%22Data%20Set%20Values%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20%27Option1%27%2C%20%27Option2%27%2C%20%27Option3%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Option1%2COption2%2COption3%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20%27Option1%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20RadioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
+    "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%0AWidget.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%20required%2C%0A%20%20%20%20%20%20%20%20layout%2C%0A%20%20%20%20%20%20%20%20label_placement%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%20propertyHandlers%20%3D%20%7B%0A%20%20%20%20%20%20%20%20'prop-required'%3A%20()%20%3D%3E%20handleRequiredChange(widgetMap%2C%20required)%2C%0A%20%20%20%20%20%20%20%20'prop-layout'%3A%20()%20%3D%3E%20handleLayoutChange(widgetMap%2C%20layout)%2C%0A%20%20%20%20%20%20%20%20'prop-label_placement'%3A%20()%20%3D%3E%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%0A%0A%20%20%20%20%7D%3B%0A%0A%20%20%20%20if%20(propertyHandlers%5BpropName%5D)%20%7B%0A%20%20%20%20%20%20%20%20propertyHandlers%5BpropName%5D()%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%20required%2C%0A%20%20%20%20%20%20%20%20layout%2C%0A%20%20%20%20%20%20%20%20label_placement%2C%0A%20%20%20%20%20%20%20%20default_value%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%20handleLayoutChange(widgetMap%2C%20layout)%3B%0A%20%20%20%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%0A%20%20%20%20handleRequiredChange(widgetMap%2C%20required)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.default_value%3B%0A%7D%3B%0A%0A%2F%2F%20Utility%20function%20to%20manage%20class%20additions%20and%20removals%0Afunction%20updateClasses(element%2C%20classMap)%20%7B%0A%20%20%20%20Object.keys(classMap).forEach((className)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20element.classList.toggle(className%2C%20classMap%5BclassName%5D)%3B%0A%20%20%20%20%7D)%3B%0A%7D%0A%0A%0Afunction%20handleLabelPlacementChange(widgetMap%2C%20label_placement)%20%7B%0A%20%20%20%20updateClasses(widgetMap.radioset.nativeElement%2C%20%7B%0A%20%20%20%20%20%20%20%20'top-placement'%3A%20label_placement%20%3D%3D%3D%20%22top%22%2C%0A%20%20%20%20%20%20%20%20'bottom-placement'%3A%20label_placement%20%3D%3D%3D%20%22bottom%22%2C%0A%20%20%20%20%20%20%20%20'start-placement'%3A%20label_placement%20%3D%3D%3D%20%22start%22%0A%20%20%20%20%7D)%3B%0A%7D%0A%0A%0A%0Afunction%20handleLayoutChange(widgetMap%2C%20layout)%20%7B%0A%20%20%20%20updateClasses(widgetMap.radioset.nativeElement%2C%20%7B%0A%20%20%20%20%20%20%20%20'horizontal'%3A%20layout%20%3D%3D%3D%20%22horizontal%22%2C%0A%20%20%20%20%20%20%20%20'vertical'%3A%20layout%20%3D%3D%3D%20%22vertical%22%0A%20%20%20%20%7D)%3B%0A%7D%0A%0Afunction%20handleRequiredChange(widgetMap%2C%20required)%20%7B%0A%20%20%20%20widgetMap.composite1.required%20%3D%20required%3B%0A%7D%0A",
+    "styles": ".app-radioset.list-group.inline%2C%0A.app-radioset.list-group%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%7D%0A%0A.wm-app%20.app-radio.radio%20%7B%0A%20%20%20%20width%3A%20auto%3B%0A%7D%0A%0A.app-radioset.list-group.inline.horizontal%2C%0A.app-radioset.list-group.horizontal%20%7B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%7D%0A%0A%0A%2F*%20start%20label%20placement%20styles%20%20*%2F%0A%0A.app-radioset.horizontal.start-placement%20.app-radioset-label%3E.caption%2C%0A.app-radioset.vertical.start-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-right%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.radio%3Elabel%20.caption%3Abefore%2C%0A.app-radioset.vertical.start-placement%20.radio%3Elabel%20.caption%3Abefore%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20right%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.radio%3Elabel%20.caption%3Aafter%2C%0A.app-radioset.vertical.start-placement%20.radio%3Elabel%20.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-size)%20*%200.25))%3B%0A%20%20%20%20right%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-size)%20*%200.25))%3B%0A%7D%0A%0A.app-radioset.horizontal.start-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%2C%0A.app-radioset.vertical.start-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%20unset%3B%0A%20%20%20%20right%3A%200px%3B%0A%7D%0A%0A%0A%2F*%20top%20label%20placement%20styles%20%20*%2F%0A%0A.app-radioset.top-placement%20%7B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-bottom%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%20%20%20%20min-width%3A%2020px%3B%0A%20%20%20%20padding-top%3A%20unset%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%20%2B%20calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap)))%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.top-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20top%3A%20calc(calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap)))%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.wm-app%20.app-radioset.top-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20top%3A%20calc(calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20*%200.5)%20%2B%20calc(var(--wm-radiobutton-caption-line-height)%20%2B%20var(--wm-radiobutton-gap))%20%2B%20calc(var(--wm-radiobutton-size)*%200.25))%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%200px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unsetal%3B%0A%7D%0A%0A%0A%2F*%20bottom%20label%20placement%20style%20%20*%2F%0A%0A.app-radioset.top-placement%20%7B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-bottom%3A%20unset%3B%0A%20%20%20%20padding-top%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20%7B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20min-width%3A%2040px%3B%0A%20%20%20%20max-width%3A%20max-content%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.wm-app%20.app-radioset.bottom-placement%3E.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%200px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radio.radio%3Elabel%20.caption%3Aafter%20%7B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radioset-label%3E.caption%20%7B%0A%20%20%20%20padding-left%3A%20unset%3B%0A%20%20%20%20padding-top%3A%20calc(var(--wm-radiobutton-state-layer-size)%20%2B%20var(--wm-radiobutton-gap))%3B%0A%20%20%20%20min-width%3A%2020px%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20margin-top%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%3Achecked%2B.caption%3Aafter%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%20%20%20%20transform%3A%20translate(-50%25%2C%205px)%20rotate(0deg)%20scale(1)%3B%0A%20%20%20%20transition%3A%20unset%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radioset-label%3E.caption%3A%3Abefore%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%20calc((var(--wm-radiobutton-state-layer-size)%20-%20var(--wm-radiobutton-size))%20%2F%202)%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A%0A.app-radioset.horizontal.bottom-placement%20.app-radio.radio%3Elabel%3Einput%5Btype%3D%22radio%22%5D%20%7B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20top%3A%200px%3B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%7D%0A",
+    "variables": "%7B%20%7D",
+    "config": "%7B%0A%09%22widgetType%22%20%3A%20%22wm-radioset%22%2C%0A%09%22properties%22%20%3A%20%7B%0A%09%20%20%22layout%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Layout%22%2C%0A%09%09%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20'horizontal'%20indicates%20that%20the%20element's%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20'vertical'%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%09%09%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22horizontal%22%0A%09%20%20%7D%2C%0A%09%20%20%22state%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22State%22%2C%0A%09%09%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%09%09%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22Enabled%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_placement%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20Placement%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20the%20label's%20position%20relative%20to%20the%20component.%20Options%3A%20'top'%20(Label%20appears%20above%20the%20component)%2C%20'bottom'%20(Label%20appears%20below%20the%20component)%2C%20'start'%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%09%09%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%2C%20%22end%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22end%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_text%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%09%09%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20RadioSet%22%2C%0A%09%09%22value%22%20%3A%20%22Label%20Text%22%0A%09%20%20%7D%2C%0A%09%20%20%22data_set%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Data%20Set%20Values%22%2C%0A%09%09%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20'Option1'%2C%20'Option2'%2C%20'Option3'%22%2C%0A%09%09%22value%22%20%3A%20%22Option1%2COption2%2COption3%22%0A%09%20%20%7D%2C%0A%09%20%20%22default_value%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20'Option1'%22%2C%0A%09%09%22value%22%20%3A%20%22%22%0A%09%20%20%7D%2C%0A%09%20%20%22required%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22boolean%22%2C%0A%09%09%22displayName%22%20%3A%20%22Required%22%2C%0A%09%09%22description%22%20%3A%20%22Indicates%20whether%20the%20RadioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%09%09%22value%22%20%3A%20false%0A%09%20%20%7D%0A%09%7D%2C%0A%09%22events%22%20%3A%20%7B%20%7D%0A%20%20%7D%0A%20%20"
 };

custom-widgets-m3/src/radio_set/radio_set.js CHANGED Viewed

@@ -15,11 +15,12 @@ Widget.onPropertyChange = function (propName, newValue, oldValue) {
     }
 };
 Widget.onReady = function () {
-    var _a = Widget.props, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
+    var _a = Widget.props, required = _a.required, layout = _a.layout, label_placement = _a.label_placement, default_value = _a.default_value;
     var widgetMap = Widget.Widgets;
     handleLayoutChange(widgetMap, layout);
     handleLabelPlacementChange(widgetMap, label_placement);
     handleRequiredChange(widgetMap, required);
+    Widget.getDatavalue = function () { return Widget.props.default_value; };
 };
 // Utility function to manage class additions and removals
 function updateClasses(element, classMap) {

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

@@ -1,7 +1,7 @@
 export var slider = {
-    "markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite1%22%3E%0A++++++++%3Cwm-container+name%3D%22container1%22+class%3D%22filled-slider%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22decrementButton%22+iconclass%3D%22bind%3Aprops.start_icon%22+on-click%3D%22decrementButtonClick%28%24event%2C+widget%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22slider1Change%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-slider%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22incrementButton%22+iconclass%3D%22bind%3Aprops.end_icon%22+on-click%3D%22incrementButtonClick%28%24event%2C+widget%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
-    "script": "Widget.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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%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%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20case%20%22prop-value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%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(widgetMap%2C%20showLabelsBool)%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-max_value%22%3A%0A%20%20%20%20%20%20%20%20case%20%22prop-min_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%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%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%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20)%3B%0A%20%20%20%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%3B%0A%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%3B%0A%20%20%20%20activeSliderElement(widgetMap)%3B%0A%7D%3B%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%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%3B%0A%20%20%20%20%7D%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%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20updateSliderValue(widgetMap%2C%20datavalue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20if%20(datavalue%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20slider1.datavalue%20%3D%20Number(datavalue)%3B%0A%20%20%20%20%7D%0A%20%20%20%20slider1.nativeElement.style.setProperty(%22--end%22%2C%20(100%20-%20getSliderPercentage(slider1.datavalue))%20%2B%20%27%25%27)%3B%0A%7D%0A%0Afunction%20toggleIconsVisibility(%0A%20%20%20%20widgetMap%2C%0A%20%20%20%20showIconsBool%2C%0A%20%20%20%20startIcon%2C%0A%20%20%20%20endIcon%2C%0A%20%20%20%20iconActionsBool%2C%0A%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%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%20%7B%0A%20%20%20%20if%20(showLabelsBool)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider1.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.slider1.nativeElement.classList.add(%22hide-labels%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20activeSliderElement(widgetMap)%20%7B%0A%20%20%20%20const%20activeSlider%20%3D%20widgetMap.slider1.nativeElement%3B%20%2F%2F%20Get%20the%20slider%20element%0A%20%20%20%20if%20(activeSlider)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20new%20div%20element%0A%20%20%20%20%20%20%20%20const%20newDiv%20%3D%20document.createElement(%22p%22)%3B%0A%20%20%20%20%20%20%20%20newDiv.className%20%3D%20%22active-slider%22%3B%20%2F%2F%20Set%20a%20class%20for%20styling%0A%20%20%20%20%20%20%20%20%2F%2F%20Append%20the%20new%20element%20to%20slider%20container%0A%20%20%20%20%20%20%20%20activeSlider.appendChild(newDiv)%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%2F*%0A%20*%20Convert%20slider%20value%20to%20percentage%20based%20on%20min%20and%20max%0A%20*%2F%0Afunction%20getSliderPercentage(value)%20%7B%0A%20%20%20%20const%20minValue%20%3D%20parseInt(Widget.props.min_value%2C%2010)%3B%0A%20%20%20%20const%20maxValue%20%3D%20parseInt(Widget.props.max_value%2C%2010)%3B%0A%20%20%20%20return%20((value%20-%20minValue)%20%2F%20(maxValue%20-%20minValue))%20*%20100%3B%0A%7D%0A%0AWidget.slider1Change%20%3D%20function(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%20%7B%0A%20%20%20%20const%20sliderValue%20%3D%0A%20%20%20%20%20%20%20%20100%20-%20getSliderPercentage(newVal)%20%2B%20%22%25%22%3B%0A%20%20%20%20widget.nativeElement.style.setProperty(%22--end%22%2C%20sliderValue)%3B%0A%7D%3B%0A%0Afunction%20moveSlider(widgetMap%2C%20direction)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20let%20newValue%20%3D%20Number(slider1.datavalue)%20%2B%20direction%3B%0A%20%20%20%20newValue%20%3D%20Math.max(Math.min(newValue%2C%20slider1.maxvalue)%2C%20slider1.minvalue)%3B%0A%20%20%20%20slider1.datavalue%20%3D%20newValue%3B%0A%20%20%20%20Widget.slider1Change(null%2C%20slider1%2C%20newValue%2C%20slider1.datavalue)%3B%0A%7D%0A%0AWidget.decrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%20-1)%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%201)%3B%0A%7D%3B%0A",
-    "styles": ".filled-slider+%7B%0A++++--wm-slider-gap%3A+var%28--wm-space-3%29%3B%0A++++--wm-slider-height%3A+var%28--wm-space-4%29%3B%0A++++--wm-slider-border-radius%3A+var%28--wm-radius-lg%29%3B%0A++++--wm-slider-filled-active-background%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-slider-filled-active-background-disabled%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-slider-filled-background-disabled%3A+var%28--wm-color-on-surface-focus%29%3B%0A++++--wm-slider-filled-background%3A+var%28--wm-color-primary-container%29%3B%0A++++--wm-slider-filled-disabled-opacity%3A+0.38%3B%0A++++--wm-slider-filled-thumb-background-disabled%3A+var%28--wm-color-on-surface%29%3B%0A++++--wm-slider-filled-thumb-background%3A+var%28--wm-color-surface-tint%29%3B%0A++++--wm-slider-filled-thumb-width%3A+var%28--wm-space-1%29%3B%0A++++--wm-slider-filled-thumb-height%3A+var%28--wm-space-11%29%3B%0A++++--wm-slider-filled-thumb-border-radius%3A+var%28+--wm-radius-xs%29%3B%0A%7D%0A%0A.app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%3B%0A%7D%0A%0A.app-container.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+var%28--wm-slider-gap%29%3B%0A++++position%3A+relative%3B%0A++++width%3A+100%25%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++--start%3A+0%25%3B%0A++++--end%3A+100%25%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A++++inline-size%3A+auto%3B%0A++++block-size%3A+calc%28var%28--wm-slider-height%29+%2B+var%28--wm-space-1%29%29%3B%0A++++margin%3A+calc%28var%28--wm-slider-height%29+%2B+2px%29+0%3B%0A++++flex%3A+none%3B%0A++++direction%3A+ltr%3B%0A++++flex-grow%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.vertical+%7B%0A++++flex-direction%3A+row%3B%0A++++margin%3A+var%28--wm-space-2%29+auto%3B%0A++++padding%3A+50%25+0%3B%0A++++transform%3A+rotate%28-90deg%29%3B%0A++++inline-size%3A+100%25%3B%0A%7D%0A%0A.app-container.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.continous-slider+%7B%0A++++display%3A+flex%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+none%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+var%28--wm-slider-height%29%3B%0A++++background%3A+none%3B%0A++++z-index%3A+1%3B%0A++++padding%3A+0%3B%0A++++margin%3A+0%3B%0A++++opacity%3A+unset%3B%0A++++color%3A+unset%3B%0A++++height%3A+unset%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+var%28--wm-slider-filled-thumb-height%29%3B%0A++++inline-size%3A+var%28--wm-slider-filled-thumb-width%29%3B%0A++++border-radius%3A+var%28--wm-slider-filled-thumb-border-radius%29%3B%0A++++background%3A+var%28--wm-slider-filled-thumb-background%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+var%28--wm-slider-filled-thumb-height%29%3B%0A++++inline-size%3A+var%28--wm-slider-filled-thumb-width%29%3B%0A++++border-radius%3A+var%28--wm-slider-filled-thumb-border-radius%29%3B%0A++++background%3A+var%28--wm-slider-filled-thumb-background%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-webkit-slider-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-moz-range-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb+%7B%0A++++background%3A+var%28--wm-slider-filled-thumb-background-disabled%29%3B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+var%28--wm-slider-filled-disabled-opacity%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+var%28--wm-slider-height%29%3B%0A++++border-radius%3A+var%28--wm-slider-border-radius%29%3B%0A++++background%3A+var%28--wm-slider-filled-background%29%3B%0A++++clip-path%3A+polygon%28calc%28var%28--start%29+-+0.5rem%29+0%2C+0+0%2C+0+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+0%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%2C+100%25+0%2C+100%25+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-slider-filled-background-disabled%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider+input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track+%7B%0A++++background%3A+unset%3B%0A++++height%3A+unset%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.active-slider+%7B%0A++++background%3A+var%28--wm-slider-filled-active-background-disabled%29%3B%0A++++opacity%3A+var%28--wm-slider-filled-disabled-opacity%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.active-slider+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+0px%3B%0A++++block-size%3A+var%28--wm-slider-height%29%3B%0A++++border-radius%3A+var%28--wm-slider-border-radius%29+0+0+var%28--wm-slider-border-radius%29%3B%0A++++background%3A+var%28--wm-slider-filled-active-background%29%3B%0A++++z-index%3A+0%3B%0A++++float%3A+unset%3B%0A++++vertical-align%3A+baseline%3B%0A++++inset%3A+calc%2850%25+-+0.5rem%29+var%28--end%29+auto+var%28--start%29%3B%0A++++clip-path%3A+polygon%280+0%2C+calc%28100%25+-+0.5rem%29+0%2C+calc%28100%25+-+0.5rem%29+100%25%2C+0+100%25%29%3B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+var%28--wm-space-6%29%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-left+%7B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-right+%7B%0A++++right%3A+0%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-left+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right+%7B%0A++++display%3A+none%3B%0A%7D",
-    "variables": "%7B+%7D",
-    "config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20whether%20the%20widget%20is%20interactive%20or%20not.%20%27Enabled%27%20means%20the%20widget%20is%20interactive%20and%20functional%2C%20while%20%27Disabled%27%20means%20it%20is%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%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%20default%20value%20for%20the%20slider.%20This%20value%20is%20used%20when%20the%20widget%20is%20initially%20rendered.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%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%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%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"
+    "markup": "%3Cwm-custom-widget-container%20name%3D%22partial1%22%3E%0A%20%20%20%20%3Cwm-composite%20name%3D%22composite1%22%3E%0A%20%20%20%20%20%20%20%20%3Cwm-container%20name%3D%22container1%22%20class%3D%22filled-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%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%22slider1%22%20class%3D%22cst-slider%22%20minvalue%3D%22bind%3Aprops.min_value%22%20maxvalue%3D%22bind%3Aprops.max_value%22%20datavalue%3D%22bind%3Aprops.value%22%20on-change%3D%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%20disabled%3D%22bind%3Aprops.state.toLowerCase()%3D%3D%26quot%3Bdisabled%26quot%3B%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%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%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%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20case%20%22prop-value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%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(widgetMap%2C%20showLabelsBool)%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-max_value%22%3A%0A%20%20%20%20%20%20%20%20case%20%22prop-min_value%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%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%20%20%20%20value%3A%20datavalue%2C%0A%20%20%20%20%20%20%20%20show_labels%2C%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%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%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%20start_icon%2C%0A%20%20%20%20%20%20%20%20end_icon%2C%0A%20%20%20%20%20%20%20%20iconActionsBool%2C%0A%20%20%20%20)%3B%0A%20%20%20%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%3B%0A%20%20%20%20updateSliderValue(widgetMap%2C%20datavalue)%3B%0A%20%20%20%20activeSliderElement(widgetMap)%3B%0A%20%20%20%20Widget.getDatavalue%20%3D%20()%20%3D%3E%20Widget.props.value%3B%0A%7D%3B%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%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%3B%0A%20%20%20%20%7D%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%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20updateSliderValue(widgetMap%2C%20datavalue)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20if%20(datavalue%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20slider1.datavalue%20%3D%20Number(datavalue)%3B%0A%20%20%20%20%7D%0A%20%20%20%20slider1.nativeElement.style.setProperty(%22--end%22%2C%20(100%20-%20getSliderPercentage(slider1.datavalue))%20%2B%20'%25')%3B%0A%7D%0A%0Afunction%20toggleIconsVisibility(%0A%20%20%20%20widgetMap%2C%0A%20%20%20%20showIconsBool%2C%0A%20%20%20%20startIcon%2C%0A%20%20%20%20endIcon%2C%0A%20%20%20%20iconActionsBool%2C%0A%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%20toggleLabelVisibilty(widgetMap%2C%20showLabelsBool)%20%7B%0A%20%20%20%20if%20(showLabelsBool)%20%7B%0A%20%20%20%20%20%20%20%20widgetMap.slider1.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.slider1.nativeElement.classList.add(%22hide-labels%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20activeSliderElement(widgetMap)%20%7B%0A%20%20%20%20const%20activeSlider%20%3D%20widgetMap.slider1.nativeElement%3B%20%2F%2F%20Get%20the%20slider%20element%0A%20%20%20%20if%20(activeSlider)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20new%20div%20element%0A%20%20%20%20%20%20%20%20const%20newDiv%20%3D%20document.createElement(%22p%22)%3B%0A%20%20%20%20%20%20%20%20newDiv.className%20%3D%20%22active-slider%22%3B%20%2F%2F%20Set%20a%20class%20for%20styling%0A%20%20%20%20%20%20%20%20%2F%2F%20Append%20the%20new%20element%20to%20slider%20container%0A%20%20%20%20%20%20%20%20activeSlider.appendChild(newDiv)%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%2F*%0A%20*%20Convert%20slider%20value%20to%20percentage%20based%20on%20min%20and%20max%0A%20*%2F%0Afunction%20getSliderPercentage(value)%20%7B%0A%20%20%20%20const%20minValue%20%3D%20parseInt(Widget.props.min_value%2C%2010)%3B%0A%20%20%20%20const%20maxValue%20%3D%20parseInt(Widget.props.max_value%2C%2010)%3B%0A%20%20%20%20return%20((value%20-%20minValue)%20%2F%20(maxValue%20-%20minValue))%20*%20100%3B%0A%7D%0A%0AWidget.slider1Change%20%3D%20function(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%20%7B%0A%20%20%20%20const%20sliderValue%20%3D%0A%20%20%20%20%20%20%20%20100%20-%20getSliderPercentage(newVal)%20%2B%20%22%25%22%3B%0A%20%20%20%20widget.nativeElement.style.setProperty(%22--end%22%2C%20sliderValue)%3B%0A%7D%3B%0A%0Afunction%20moveSlider(widgetMap%2C%20direction)%20%7B%0A%20%20%20%20const%20%7B%0A%20%20%20%20%20%20%20%20slider1%0A%20%20%20%20%7D%20%3D%20widgetMap%3B%0A%0A%20%20%20%20let%20newValue%20%3D%20Number(slider1.datavalue)%20%2B%20direction%3B%0A%20%20%20%20newValue%20%3D%20Math.max(Math.min(newValue%2C%20slider1.maxvalue)%2C%20slider1.minvalue)%3B%0A%20%20%20%20slider1.datavalue%20%3D%20newValue%3B%0A%20%20%20%20Widget.slider1Change(null%2C%20slider1%2C%20newValue%2C%20slider1.datavalue)%3B%0A%7D%0A%0AWidget.decrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%20-1)%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick%20%3D%20function(%24event%2C%20widget)%20%7B%0A%20%20%20%20moveSlider(Widget.Widgets%2C%201)%3B%0A%7D%3B%0A",
+    "styles": ".filled-slider%20%7B%0A%20%20%20%20--wm-slider-gap%3A%20var(--wm-space-3)%3B%0A%20%20%20%20--wm-slider-height%3A%20var(--wm-space-4)%3B%0A%20%20%20%20--wm-slider-border-radius%3A%20var(--wm-radius-lg)%3B%0A%20%20%20%20--wm-slider-filled-active-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-slider-filled-active-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-slider-filled-background-disabled%3A%20var(--wm-color-on-surface-focus)%3B%0A%20%20%20%20--wm-slider-filled-background%3A%20var(--wm-color-primary-container)%3B%0A%20%20%20%20--wm-slider-filled-disabled-opacity%3A%200.38%3B%0A%20%20%20%20--wm-slider-filled-thumb-background-disabled%3A%20var(--wm-color-on-surface)%3B%0A%20%20%20%20--wm-slider-filled-thumb-background%3A%20var(--wm-color-surface-tint)%3B%0A%20%20%20%20--wm-slider-filled-thumb-width%3A%20var(--wm-space-1)%3B%0A%20%20%20%20--wm-slider-filled-thumb-height%3A%20var(--wm-space-11)%3B%0A%20%20%20%20--wm-slider-filled-thumb-border-radius%3A%20var(%20--wm-radius-xs)%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.filled-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20gap%3A%20var(--wm-slider-gap)%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%7D%0A%0A.app-container.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-slider-height)%20%2B%20var(--wm-space-1))%3B%0A%20%20%20%20margin%3A%20calc(var(--wm-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.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.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.filled-slider.continous-slider%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D%20.app-container.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.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-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.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.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.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-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-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.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-slider-filled-thumb-height)%3B%0A%20%20%20%20inline-size%3A%20var(--wm-slider-filled-thumb-width)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-filled-thumb-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-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.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.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.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.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.filled-slider%20.app-slider.slider.cst-slider%3Einput%3Adisabled%20%7B%0A%20%20%20%20cursor%3A%20not-allowed%3B%0A%7D%0A%0A.app-container.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.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-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-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.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.app-container.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%20top%3A%200px%3B%0A%20%20%20%20block-size%3A%20var(--wm-slider-height)%3B%0A%20%20%20%20border-radius%3A%20var(--wm-slider-border-radius)%200%200%20var(--wm-slider-border-radius)%3B%0A%20%20%20%20background%3A%20var(--wm-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.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%20var(--wm-space-6)%3B%0A%7D%0A%0A.app-container.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.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.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.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%22Defines%20whether%20the%20widget%20is%20interactive%20or%20not.%20'Enabled'%20means%20the%20widget%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%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%20default%20value%20for%20the%20slider.%20This%20value%20is%20used%20when%20the%20widget%20is%20initially%20rendered.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%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%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20changes.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget%2C%20new%20value%2C%20and%20old%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%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"
 };

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

@@ -36,6 +36,7 @@ Widget.onReady = function () {
     toggleLabelVisibilty(widgetMap, showLabelsBool);
     updateSliderValue(widgetMap, datavalue);
     activeSliderElement(widgetMap);
+    Widget.getDatavalue = function () { return Widget.props.value; };
 };
 function convertToBoolean(value) {
     return value === true || value === "true";