SVY-20864 Web Components "Group Buttons" doesn't react on

controller.readOnly

Author: lvostinar

bootstrapextracomponents/buttonsGroup/buttonsGroup.spec

@@ -20,7 +20,8 @@
 	   "size": 						{ "type": "dimension",  "default" : {"width":180, "height":32}, "pushToServer": "deep"},
 	   "format": 					{ "type": "format", "for": "dataProviderID", "tags": { "scope" :"private" }},
 	   "tabSeq": 					{ "type": "tabseq", "tags": { "scope" :"design" }},
-	   "showAs": 					{ "type": "string", "values": [{"text":null}, {"html":"html"}, {"trusted_html":"trusted_html"}]}
+	   "showAs": 					{ "type": "string", "values": [{"text":null}, {"html":"html"}, {"trusted_html":"trusted_html"}]},
+	   "readOnly":					{ "type": "protected", "blockingOn": true, "default": false, "for": ["dataProviderID","onDataChangeMethodID"], "tags": {"scope":"private"} }
 	},
 	"handlers": {
 		"onDataChangeMethodID" : {

bootstrapextracomponents/projects/bootstrapextracomponents/src/buttonsgroup/buttonsgroup.html

@@ -7,6 +7,7 @@
       class= "btn {{styleClass()}}"
       [sabloTabseq]="tabSeq()"
       [ngClass]="selectedValues[item.realValue] ? 'active' : ''"
+	  [disabled]="!enabled() || readOnly()"
       (click)="onClick(item)">
       @if (showAs() != "html" && showAs() != "trusted_html") {
         <span [textContent]='item.displayValue'></span>

bootstrapextracomponents/projects/bootstrapextracomponents/src/buttonsgroup/buttonsgroup.ts

@@ -13,6 +13,7 @@ export class ServoyBootstrapExtraButtonsGroup extends ServoyBaseComponent<HTMLEl
     readonly valuelistID = input<IValuelist>(undefined);
     readonly showAs = input<string>(undefined);
     readonly enabled = input<boolean>(undefined);
+	readonly readOnly = input<boolean>(undefined);
     readonly tabSeq = input<number>(undefined);
     readonly inputType = input<string>(undefined);
     readonly toolTipText = input<string>(undefined);
@@ -34,13 +35,6 @@ export class ServoyBootstrapExtraButtonsGroup extends ServoyBaseComponent<HTMLEl
         for (const property of Object.keys(changes)) {
             const change = changes[property];
             switch (property) {
-                case 'enabled':
-                    if (change.currentValue)
-                        this.renderer.removeAttribute(this.getNativeElement(), 'disabled');
-                    else
-                        this.renderer.setAttribute(this.getNativeElement(), 'disabled', 'disabled');
-                    break;
-
                 case 'dataProviderID':
                     this._dataProviderID.set(this.dataProviderID());
                     this.updateSelectedValues(this.dataProviderID());

bootstrapextracomponents/projects/bootstrapextracomponents/src/rating/rating.html

@@ -3,7 +3,7 @@
     [id]="servoyApi.getMarkupId()"
     [(rate)]="_dataProviderID"
     [max]="max()"
-    [readonly]="!enabled()"
+    [readonly]="!enabled() || readOnly()"
     (leave)="onLeaveEvent()"
     (hover)="onHoverEvent($event)"
     (rateChange)="onChange()">

bootstrapextracomponents/projects/bootstrapextracomponents/src/rating/rating.ts

@@ -13,6 +13,7 @@ export class ServoyBootstrapExtraRating extends ServoyBaseComponent<HTMLDivEleme
     readonly onDataChangeMethodID = input<(oldValue: any, newValue: any, e: Event) => boolean>(undefined);
 
     readonly enabled = input<boolean>(undefined);
+	readonly readOnly = input<boolean>(undefined);
     readonly dataProviderID = input<number>(undefined);
     readonly dataProviderIDChange = output<number>();
     readonly max = input<number>(undefined);

bootstrapextracomponents/projects/bootstrapextracomponents/src/switch/switch.html

@@ -1,7 +1,7 @@
 <div class="bts-extra-switch" [ngClass]="styleClass()" [sabloTabseq]="tabSeq()" [sabloTabseqConfig]="{container: false, tabSeqSetter: this}" [id]="servoyApi.getMarkupId()" #element>
     <bSwitch
-        [disabled]="!enabled()"
-        [switch-disabled]="!enabled()"
+        [disabled]="!enabled() || readOnly()"
+        [switch-disabled]="!enabled() || readOnly()"
         [switch-size]="componentSize()"
         [switch-animate]="animate()"
         [switch-label-text]="label()"

bootstrapextracomponents/projects/bootstrapextracomponents/src/switch/switch.ts

@@ -15,6 +15,7 @@ export class ServoyBootstrapExtraSwitch extends ServoyBaseComponent<HTMLDivEleme
     readonly styleClass = input<string>(undefined);
     readonly tabSeq = input<number>(undefined);
     readonly enabled = input<boolean>(undefined);
+	readonly readOnly = input<boolean>(undefined);
     readonly componentSize = input<string>(undefined);
     readonly animate = input<boolean>(undefined);
     readonly label = input<string>(undefined);

bootstrapextracomponents/rating/rating.spec

@@ -20,7 +20,8 @@
 		"visible" 				: { "type": "boolean", "default": true}, 
 		"location" 				: { "type": "point", "pushToServer": "deep"}, 
 		"showPercentageOnHover"	: { "type": "boolean" }, 
-	    "size" 					: { "type": "dimension", "default" : {"width":200, "height":32}, "pushToServer": "deep"}
+	    "size" 					: { "type": "dimension", "default" : {"width":200, "height":32}, "pushToServer": "deep"},
+	    "readOnly"				: { "type": "protected", "blockingOn": true, "default": false, "for": ["dataProviderID","onDataChangeMethodID"], "tags": {"scope":"private"} }
 	},
 	"handlers": 
 	{

bootstrapextracomponents/switch/switch.spec

@@ -29,7 +29,8 @@
 	        "componentSize" : { "type" : "tagstring" ,"default": "Normal", "values":[{"Mini":"mini"},{"Small":"small"},{"Normal":"normal"},{"Large":"large"}] },
 			"tabSeq" : {"type" :"tabseq", "tags": { "scope" :"design" }},	
 			"size" : {"type" :"dimension",  "default" : {"width":300, "height":40}},				
-	        "visible" : "visible"
+	        "visible" : "visible",
+	        "readOnly" : { "type": "protected", "blockingOn": true, "default": false, "for": ["dataProviderID","onDataChangeMethodID"], "tags": {"scope":"private"} }
 	},
 	"handlers":
 	{