@wavemaker/custom-widgets-m3 12.0.0-next.45067 → 12.0.0-next.45068
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.
- custom-widgets-m3/custom-widgets-bundle.cjs.js +23 -24
- custom-widgets-m3/package.json +1 -1
- custom-widgets-m3/src/checkbox_set/checkbox_set.d.ts +10 -0
- custom-widgets-m3/src/checkbox_set/checkbox_set.js +46 -32
- custom-widgets-m3/src/checkbox_set/page.min.js +5 -5
- custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +8 -8
- custom-widgets-m3/src/discrete_slider/discrete_slider.js +29 -19
- custom-widgets-m3/src/icon_button/icon_button.js +0 -8
- custom-widgets-m3/src/icon_button/page.min.js +5 -5
- custom-widgets-m3/src/progressbar/page.min.js +5 -5
- custom-widgets-m3/src/progressbar/progressbar.d.ts +2 -0
- custom-widgets-m3/src/progressbar/progressbar.js +35 -39
- custom-widgets-m3/src/radio_set/page.min.js +3 -3
- custom-widgets-m3/src/radio_set/radio_set.d.ts +9 -0
- custom-widgets-m3/src/radio_set/radio_set.js +39 -29
- custom-widgets-m3/src/slider/slider.d.ts +9 -9
- custom-widgets-m3/src/slider/slider.js +37 -31
- custom-widgets-m3/src/switch_button/switch_button.d.ts +2 -0
custom-widgets-m3/package.json
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
2
|
+
declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
|
|
3
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
4
|
+
declare function updateClasses(element: any, classMap: any): void;
|
|
5
|
+
declare function handleIntermediateChange(widgetMap: any, show_intermediate: any): void;
|
|
6
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
7
|
+
declare function handleLayoutChange(widgetMap: any, layout: any): void;
|
|
8
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
9
|
+
declare function handleRequiredChange(widgetMap: any, required: any): void;
|
|
10
|
+
declare function handleRequiredChange(required: any, widgetMap: any): void;
|
|
@@ -2,37 +2,51 @@
|
|
|
2
2
|
* Use App.getDependency for Dependency Injection
|
|
3
3
|
* eg: var DialogService = App.getDependency('DialogService');
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
Widget.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
if (Widget.props.show_intermediate.toString().toLowerCase() === 'true') {
|
|
17
|
-
Widget.Widgets.checkboxset.class += ' intermediate-checkbox';
|
|
18
|
-
}
|
|
19
|
-
if (Widget.props.layout === "horizontal") {
|
|
20
|
-
Widget.Widgets.checkboxset.class += ' horizontal';
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
Widget.Widgets.checkboxset.class += ' vertical';
|
|
24
|
-
}
|
|
25
|
-
if (Widget.props.label_placement === "top") {
|
|
26
|
-
Widget.Widgets.checkboxset.class += ' top-placement';
|
|
27
|
-
}
|
|
28
|
-
else if (Widget.props.label_placement === "bottom") {
|
|
29
|
-
Widget.Widgets.checkboxset.class += ' bottom-placement';
|
|
5
|
+
Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
|
6
|
+
var _a = Widget.props, show_intermediate = _a.show_intermediate, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
|
|
7
|
+
var widgetMap = Widget.Widgets;
|
|
8
|
+
var propertyHandlers = {
|
|
9
|
+
'prop-required': function () { return handleRequiredChange(widgetMap, required); },
|
|
10
|
+
'prop-layout': function () { return handleLayoutChange(widgetMap, layout); },
|
|
11
|
+
'prop-show_intermediate': function () { return handleIntermediateChange(widgetMap, show_intermediate); },
|
|
12
|
+
'prop-label_placement': function () { return handleLabelPlacementChange(widgetMap, label_placement); }
|
|
13
|
+
};
|
|
14
|
+
if (propertyHandlers[propName]) {
|
|
15
|
+
propertyHandlers[propName]();
|
|
30
16
|
}
|
|
31
|
-
else if (Widget.props.label_placement === "start") {
|
|
32
|
-
Widget.Widgets.checkboxset.class += ' start-placement';
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
Widget.Widgets.checkboxset.class += '';
|
|
36
|
-
}
|
|
37
|
-
Widget.Widgets.composite.required = Widget.props.required;
|
|
38
17
|
};
|
|
18
|
+
Widget.onReady = function () {
|
|
19
|
+
var _a = Widget.props, show_intermediate = _a.show_intermediate, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
|
|
20
|
+
var widgetMap = Widget.Widgets;
|
|
21
|
+
handleLayoutChange(widgetMap, layout);
|
|
22
|
+
handleLabelPlacementChange(widgetMap, label_placement);
|
|
23
|
+
handleIntermediateChange(widgetMap, show_intermediate);
|
|
24
|
+
handleRequiredChange(widgetMap, required);
|
|
25
|
+
};
|
|
26
|
+
function handleLabelPlacementChange(widgetMap, label_placement) {
|
|
27
|
+
updateClasses(widgetMap.checkboxset.nativeElement, {
|
|
28
|
+
'top-placement': label_placement === "top",
|
|
29
|
+
'bottom-placement': label_placement === "bottom",
|
|
30
|
+
'start-placement': label_placement === "start"
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
// Utility function to manage class additions and removals
|
|
34
|
+
function updateClasses(element, classMap) {
|
|
35
|
+
Object.keys(classMap).forEach(function (className) {
|
|
36
|
+
element.classList.toggle(className, classMap[className]);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function handleIntermediateChange(widgetMap, show_intermediate) {
|
|
40
|
+
updateClasses(widgetMap.checkboxset.nativeElement, {
|
|
41
|
+
'intermediate-checkbox': show_intermediate.toString().toLowerCase() === 'true'
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function handleLayoutChange(widgetMap, layout) {
|
|
45
|
+
updateClasses(widgetMap.checkboxset.nativeElement, {
|
|
46
|
+
'horizontal': layout === "horizontal",
|
|
47
|
+
'vertical': layout === "vertical"
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
function handleRequiredChange(widgetMap, required) {
|
|
51
|
+
widgetMap.composite1.required = required;
|
|
52
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var checkbox_set = {
|
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%
|
|
3
|
-
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%
|
|
4
|
-
styles: ".app-checkboxset
|
|
5
|
-
variables: "%7B+%7D",
|
|
6
|
-
config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%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%22show_intermediate%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%22Intermediate%20checkbox%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Controls%20whether%20the%20checkbox%20shows%20an%20indeterminate%20state.%20True%20displays%20the%20intermediate%20state%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%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%2C%20with%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%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22top%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%20checkboxSet%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%27yes%27%2C%20%27no%27%2C%20%27maybe%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%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%27yes%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%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%20checkboxSet%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"
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite1%22+class%3D%22caption-top%22+required%3D%22false%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22%3E%0A++++++++++++%3Cwm-checkboxset+height%3D%22auto%22+name%3D%22checkboxset%22+dataset%3D%22bind%3Aprops.data_set%22+datafield%3D%22All+Fields%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22+required%3D%22bind%3Aprops.required%22+datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-checkboxset%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
+
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0AWidget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++show_intermediate%2C%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-show_intermediate%27%3A+%28%29+%3D%3E+handleIntermediateChange%28widgetMap%2C+show_intermediate%29%2C%0A++++++++%27prop-label_placement%27%3A+%28%29+%3D%3E+handleLabelPlacementChange%28widgetMap%2C+label_placement%29%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++++++++show_intermediate%2C%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++++handleIntermediateChange%28widgetMap%2C+show_intermediate%29%3B%0A++++handleRequiredChange%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0Afunction+handleLabelPlacementChange%28widgetMap%2C+label_placement%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.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%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%0Afunction+handleIntermediateChange%28widgetMap%2C+show_intermediate%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.nativeElement%2C+%7B%0A++++++++%27intermediate-checkbox%27%3A+show_intermediate.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%0A++++%7D%29%3B%0A%7D%0A%0A%0Afunction+handleLayoutChange%28widgetMap%2C+layout%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.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",
|
|
4
|
+
"styles": ".app-checkboxset+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-checkboxset.horizontal+%7B%0A++++flex-direction%3A+row%3B%0A++++justify-content%3A+center%3B%0A%7D%0A%0A%0A%2F*+start+label+placement+styles++*%2F%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkboxset-label%3E.caption%2C%0A.app-checkboxset.vertical.start-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Abefore%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+1px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Aafter%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++right%3A+7px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2C%0A.app-checkboxset.vertical.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+unset%3B%0A++++right%3A+-10px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-checkboxset.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++padding-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+11px%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-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-checkboxset.top-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+11px%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%0A%0A.app-checkboxset.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%3B%0A%7D%0A%0A.app-checkboxset.bottom-placement+%7B%0A++++display%3A+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-checkboxset.bottom-placement+.app-checkboxset-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-checkboxset.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%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-checkboxset.bottom-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-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-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++top%3A+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++top%3A+0px%3B%0A%7D%0A%0A.app-checkboxset+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore%2C%0A.app-checkboxset+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-checkbox-border-color%29%3B%0A++++background-color%3A+var%28--wm-checkbox-border-color%29%3B%0A%7D%0A%0A.app-checkboxset.top-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter%2C%0A.app-checkboxset.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter%2C%0A.app-checkboxset.start-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.app-checkboxset.top-placement.horizontal.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.top-placement.vertical.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29+-+1px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%28-6px%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++left%3A+50%25%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.vertical.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+-+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29+%2B+7px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%280deg%29+scale%281%29%3B%0A++++left%3A+50%25%3B%0A%7D%0A%0A.app-checkboxset.start-placement.horizontal.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.start-placement.vertical.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+-+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29%29%3B%0A++++height%3A+0px%3B%0A++++left%3A+unset%3B%0A++++transform%3A+translate%283px%2C+11px%29+rotate%280deg%29+scale%281%29%3B%0A%7D",
|
|
5
|
+
"variables": "%7B+%7D",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%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%22show_intermediate%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%22Intermediate%20checkbox%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Controls%20whether%20the%20checkbox%20shows%20an%20indeterminate%20state.%20True%20displays%20the%20intermediate%20state%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%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%2C%20with%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%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22top%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%20checkboxSet%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%27yes%27%2C%20%27no%27%2C%20%27maybe%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%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%27yes%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%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%20checkboxSet%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"
|
|
7
7
|
};
|
|
@@ -12,14 +12,14 @@ declare function getSliderPercentage(value: any, minValue: any, maxValue: any):
|
|
|
12
12
|
declare function getSliderPercentage(value: any): number;
|
|
13
13
|
declare function clamp(value: any, minValue: any, maxValue: any): number;
|
|
14
14
|
declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
|
|
15
|
-
declare function toggleLabelVisibilty(
|
|
16
|
-
declare function toggleIconsVisibility(
|
|
17
|
-
declare function toggleIconsVisibility(
|
|
18
|
-
declare function updateStartIconVisibility(iconActionsBool: any,
|
|
19
|
-
declare function updateStartIconVisibility(iconActionsBool: any,
|
|
20
|
-
declare function updateEndIconVisibility(iconActionsBool: any,
|
|
21
|
-
declare function updateEndIconVisibility(iconActionsBool: any,
|
|
22
|
-
declare function moveSlider(direction: any, widgetMap: any): void;
|
|
15
|
+
declare function toggleLabelVisibilty(widgetMap: any, showLabelsBool: any): void;
|
|
16
|
+
declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, iconActionsBool: any): void;
|
|
17
|
+
declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any): void;
|
|
18
|
+
declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
19
|
+
declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
20
|
+
declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
21
|
+
declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
|
|
23
22
|
declare function moveSlider(direction: any, widgetMap: any): void;
|
|
23
|
+
declare function moveSlider(widgetMap: any, direction: any): void;
|
|
24
24
|
declare function convertToBoolean(value: any): boolean;
|
|
25
25
|
declare function convertToBoolean(value: any): boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
|
2
|
-
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions
|
|
2
|
+
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions;
|
|
3
3
|
var widgetMap = Widget.Widgets;
|
|
4
4
|
var showIconsBool = convertToBoolean(show_icons);
|
|
5
5
|
var showLabelsBool = convertToBoolean(show_labels);
|
|
@@ -20,18 +20,18 @@ Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
|
|
20
20
|
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
|
21
21
|
break;
|
|
22
22
|
case "prop-show_icons":
|
|
23
|
-
toggleIconsVisibility(showIconsBool, iconActionsBool
|
|
23
|
+
toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool);
|
|
24
24
|
break;
|
|
25
25
|
case "prop-start_icon":
|
|
26
|
-
updateStartIconVisibility(iconActionsBool,
|
|
26
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
27
27
|
break;
|
|
28
28
|
case "prop-end_icon":
|
|
29
|
-
updateEndIconVisibility(iconActionsBool,
|
|
29
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
30
30
|
break;
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
Widget.onReady = function () {
|
|
34
|
-
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions
|
|
34
|
+
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions;
|
|
35
35
|
var widgetMap = Widget.Widgets;
|
|
36
36
|
var showIconsBool = convertToBoolean(show_icons);
|
|
37
37
|
var showLabelsBool = convertToBoolean(show_labels);
|
|
@@ -39,7 +39,7 @@ Widget.onReady = function () {
|
|
|
39
39
|
widgetMap.sliderContainer.nativeElement.classList.add('filled-slider', 'discrete-slider');
|
|
40
40
|
initializeSlider(widgetMap, value, min_value, max_value, step_value, required);
|
|
41
41
|
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
|
42
|
-
toggleIconsVisibility(showIconsBool, iconActionsBool
|
|
42
|
+
toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool);
|
|
43
43
|
};
|
|
44
44
|
function initializeSlider(widgetMap, value, minValue, maxValue, stepValue, required) {
|
|
45
45
|
updateSlider(widgetMap, value, minValue, maxValue, stepValue);
|
|
@@ -161,30 +161,40 @@ function toggleLabelVisibilty(showLabelsBool, widgetMap) {
|
|
|
161
161
|
widgetMap.slider.nativeElement.classList.add("hide-labels");
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
|
-
function toggleIconsVisibility(showIconsBool, iconActionsBool
|
|
164
|
+
function toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool) {
|
|
165
165
|
var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
|
|
166
166
|
if (showIconsBool) {
|
|
167
|
-
updateStartIconVisibility(iconActionsBool,
|
|
168
|
-
updateEndIconVisibility(iconActionsBool,
|
|
167
|
+
updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
168
|
+
updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
|
|
169
169
|
}
|
|
170
170
|
else {
|
|
171
171
|
decrementButton.show = false;
|
|
172
172
|
incrementButton.show = false;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
function updateStartIconVisibility(iconActionsBool,
|
|
175
|
+
function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
176
176
|
var decrementButton = widgetMap.decrementButton;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
177
|
+
if (showIconsBool) {
|
|
178
|
+
decrementButton.show = true;
|
|
179
|
+
decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
180
|
+
"auto" :
|
|
181
|
+
"none";
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
decrementButton.show = false;
|
|
185
|
+
}
|
|
181
186
|
}
|
|
182
|
-
function updateEndIconVisibility(iconActionsBool,
|
|
187
|
+
function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
|
|
183
188
|
var incrementButton = widgetMap.incrementButton;
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
189
|
+
if (showIconsBool) {
|
|
190
|
+
incrementButton.show = true;
|
|
191
|
+
incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
|
192
|
+
"auto" :
|
|
193
|
+
"none";
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
incrementButton.show = false;
|
|
197
|
+
}
|
|
188
198
|
}
|
|
189
199
|
function moveSlider(direction, widgetMap) {
|
|
190
200
|
var slider = widgetMap.slider;
|
|
@@ -13,12 +13,4 @@ Widget.onReady = function () {
|
|
|
13
13
|
* e.g. to get value of text widget named 'username' use following script
|
|
14
14
|
* 'Widget.Widgets.username.datavalue'
|
|
15
15
|
*/
|
|
16
|
-
Widget.Widgets.iconButton.class += " " + Widget.props.style;
|
|
17
|
-
Widget.Widgets.iconButton.class += " " + Widget.props.tonal;
|
|
18
|
-
if (Widget.props.button_size == "small") {
|
|
19
|
-
Widget.Widgets.iconButton.class += " " + "icon-btn-sm";
|
|
20
|
-
}
|
|
21
|
-
else if (Widget.props.button_size == "large") {
|
|
22
|
-
Widget.Widgets.iconButton.class += " " + "icon-btn-lg";
|
|
23
|
-
}
|
|
24
16
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var icon_button = {
|
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-button+class%3D%
|
|
3
|
-
script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A%
|
|
4
|
-
styles: "
|
|
5
|
-
variables: "%7B+%7D",
|
|
6
|
-
config: "%7B%0A%
|
|
2
|
+
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+name%3D%22iconButton%22+iconclass%3D%22bind%3Aprops.icon_class%22+disabled%3D%22bind%3Aprops.state.toLowerCase%28%29+%3D%3D+%26quot%3Bdisabled%26quot%3B%22+conditionalclass%3D%22bind%3A%27+btn-%27+%2B+props.style.toLowerCase%28%29+%2B+%27+btn-%27+%2B+props.button_size.toLowerCase%28%29+%2B+%27+btn-%27+%2B+props.color.toLowerCase%28%29%22%3E%3C%2Fwm-button%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
|
3
|
+
"script": "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A%7D%3B",
|
|
4
|
+
"styles": "",
|
|
5
|
+
"variables": "%7B+%7D",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22style%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Style%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Filled%22%2C%20%22Standard%22%2C%20%22Outlined%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Filled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon_class%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Icon%20class%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22fa%20fa-gear%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22button_size%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Button%20size%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20the%20value%20for%20this%20property%20must%20be%20either%20%27xs%27%20for%20extrasmall%20etc.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22xs%22%2C%20%22sm%22%2C%20%22md%22%2C%20%22lg%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22md%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22color%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Tonal%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22This%20is%20an%20optinal%20property.%20The%20value%20for%20this%20property%20must%20be%20either%20secondary%2C%20tertiary%2C%20success%2C%20error%2C%20info%2C%20warning.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Primary%22%2C%22Secondary%22%2C%22Tertiary%22%2C%20%22Success%22%2C%20%22Info%22%2C%20%22Warning%22%2C%20%22Error%22%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Primary%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"
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var progressbar = {
|
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%
|
|
3
|
-
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++++
|
|
4
|
-
styles: ".app-container.progress-wrapper+%7B%0A
|
|
5
|
-
variables: "%7B
|
|
6
|
-
config: "%7B%0A%
|
|
2
|
+
"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",
|
|
3
|
+
"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",
|
|
4
|
+
"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+10px%3B%0A++++--wm-progress-linear-gap%3A+6px%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",
|
|
5
|
+
"variables": "%7B+%7D",
|
|
6
|
+
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%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.5s%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"
|
|
7
7
|
};
|
|
@@ -10,43 +10,39 @@ Widget.onReady = function () {
|
|
|
10
10
|
* e.g. to get value of text widget named 'username' use following script
|
|
11
11
|
* 'Widget.Widgets.username.datavalue'
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// Check if the value is in percentage or pixels
|
|
20
|
-
if (unit === "%") {
|
|
21
|
-
// Compare if the percentage value is equal to or greater than 100
|
|
22
|
-
if (numericValue >= 100) {
|
|
23
|
-
Widget.Widgets.container4.class += " full-width";
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
else if (unit === "p") {
|
|
27
|
-
// Assume "px" value, convert to numeric and compare if it's >= 100 pixels
|
|
28
|
-
if (numericValue >= 100) {
|
|
29
|
-
Widget.Widgets.container4.class += "";
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
// Apply indeterminate or determinate class based on progress_type
|
|
33
|
-
if (Widget.props.progress_type === "Indeterminate") {
|
|
34
|
-
Widget.Widgets.container1.class += " indeterminate";
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
Widget.Widgets.container1.class += " determinate";
|
|
38
|
-
}
|
|
39
|
-
// Set the progress width based on progress_value
|
|
40
|
-
Widget.Variables.staticVariable1.dataSet.dataValue = progressValue + "%";
|
|
41
|
-
Widget.Widgets.container2.$element[0].style.setProperty("--progress-width", progressValue + "%");
|
|
42
|
-
var transitionDuration = Widget.props.transition_duration ? Widget.props.transition_duration : 1;
|
|
43
|
-
console.log(transitionDuration);
|
|
44
|
-
// debugger;
|
|
45
|
-
var progressTrack = Widget.Widgets.container4.$element[0];
|
|
46
|
-
var progress = Widget.Widgets.container2.$element[0];
|
|
47
|
-
var transitionValue = "".concat(parseFloat(transitionDuration), "s");
|
|
48
|
-
progress.style.setProperty("--transition-duration", transitionValue);
|
|
49
|
-
progressTrack.style.setProperty("--transition-duration", transitionValue); // Apply to the track as well
|
|
50
|
-
console.log('transition :', transitionValue);
|
|
51
|
-
}, 500);
|
|
13
|
+
var _a = Widget.props, progress = _a.progress, transition_duration = _a.transition_duration;
|
|
14
|
+
var widgetMap = Widget.Widgets;
|
|
15
|
+
// change width of progress and inactive-tracker
|
|
16
|
+
handleProgress(widgetMap, progress);
|
|
17
|
+
// change transition duration
|
|
18
|
+
handleTransitionDuration(widgetMap, transition_duration);
|
|
52
19
|
};
|
|
20
|
+
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
|
21
|
+
var _a = Widget.props, progress = _a.progress, transition_duration = _a.transition_duration;
|
|
22
|
+
var widgetMap = Widget.Widgets;
|
|
23
|
+
switch (propname) {
|
|
24
|
+
case "prop-progress":
|
|
25
|
+
handleProgress(widgetMap, progress);
|
|
26
|
+
break;
|
|
27
|
+
case "prop-transition_duration":
|
|
28
|
+
handleTransitionDuration(widgetMap, transition_duration);
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
function handleProgress(widgetMap, progress) {
|
|
33
|
+
var progressValue = progress;
|
|
34
|
+
var numericValue = parseFloat(progressValue);
|
|
35
|
+
var progressWrapper = widgetMap.containerProgressLinearWrapper.$element[0];
|
|
36
|
+
progressWrapper.style.setProperty("gap", "var(--wm-progress-linear-gap)");
|
|
37
|
+
if (numericValue >= 100) {
|
|
38
|
+
progressWrapper.style.setProperty("gap", 0);
|
|
39
|
+
}
|
|
40
|
+
progressWrapper.style.setProperty("--wm-progress-linear-width-active", progressValue + "%");
|
|
41
|
+
widgetMap.containerProgressLinearTrackActive.$element[0].setAttribute('title', progressValue + "%");
|
|
42
|
+
}
|
|
43
|
+
function handleTransitionDuration(widgetMap, transition_duration) {
|
|
44
|
+
var transitionDuration = transition_duration ? transition_duration : 1;
|
|
45
|
+
var progressWrapper = widgetMap.containerProgressLinearWrapper.$element[0];
|
|
46
|
+
var transitionValue = "".concat(parseFloat(transitionDuration), "s");
|
|
47
|
+
progressWrapper.style.setProperty("--wm-progress-linear-transition-duration", transitionValue);
|
|
48
|
+
}
|