[NEW-FEATURE] Add possibility to inject css classes into renderer

docs/articles/blazor/RENDERABLECONTENT.md

@@ -11,6 +11,7 @@ This file describes the purpose, features and usage of the **RenderableContentCo
     - [RenderIgnore and custom labels](#id-renderingore)
 	- [Edit property](#id-editprop)
     - [Layouts](#id-layouts)
+	- [Layouts adjustment](#id-layouts-adj)
     - [Styling](#id-styling)
 
  ---   
@@ -193,9 +194,40 @@ When the twin connector is in polling mode, `RenderableContentControl` will take
 ### **Layouts**
 Auto-generated UI can be customized by layouts.
 More information about layout is in **[LAYOUTS](LAYOUTS.md)** file.
+
+<div id='id-layouts-adj'/>
+
+### **Layouts adjustment**
+Layouts can be adjusted by **passing CSS classes** as parameters into RenderableContentControl component.
+
+Renderer supports following parameters:
+
+- Class -- class wrapper around entire RenderableContentControl component
+- LayoutClass -- class wrapper around layouts
+- LayoutChildrenClass -- class wrapper around layouts children
+
+**Warning!** Layout classes are passed to all children (and layout wrappers) within RenderableContentControl, so use with caution!
+
+Example:
+```XML
+<RenderableContentControl 
+    Context="@Entry.Plc.test_example.compositeWrap" 
+    Presentation="Base-Control"
+    LayoutClass="align-items-end"
+    LayoutChildrenClass="p-3"
+    Class="p-5 mb-4 bg-light rounded-3 shadow" />
+```
+
+Result:
+
+![alt text](assets/wrap-css-inject.png "Edit property")
+
+
+
 <div id='id-styling'/>
 
 ### **Styling**
+
 Ix.Presentation.Blazor contains in-built styles. Styling is provided by [Bootstrap library](https://getbootstrap.com/). In-built styles can be customized with Sass technology, which will produce SCSS files. SCSS files can be compiled into one CSS file which can be used as application-wide style.
 
 Currently, the framework contains a default style that can be added as a reference in the Blazor application file *_Host.cshtml* in the following way:

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/GroupBoxLayout.razor

@@ -9,5 +9,5 @@
 @code
 {
     [Parameter]
-    public string GroupName { get; set; }
+    public string GroupName { get; set; }    
 }

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/LayoutSetters/ChildrenLayoutPropSetter.razor

@@ -12,31 +12,39 @@
         case "WrapPanelLayout":
             {
 
-                <div class="p-2">
+                <div class="p-2 @Class">
                     @ChildContent
                 </div>
                 break;
             }
         case "GroupBoxLayout":
             {
 
-                <div class="p-2">
+            <div class="p-2 @Class">
                     @ChildContent
                 </div>
                 break;
             }
         case "UniformGridLayout":
             {
 
-                <div class="p-2" style="flex: 1;" >
+                <div class="p-2 @Class" style="flex: 1;">
+                    @ChildContent
+                </div>
+                break;
+            }
+        case "StackPanelLayout":
+            {
+
+                <div class="@Class">
                     @ChildContent
                 </div>
                 break;
             }
 
         default:
+               @ChildContent
 
-            @ChildContent
             break;
     }
 
@@ -53,6 +61,8 @@
     public bool SetParentLayout { get; set; }
     [Parameter]
     public string ChildName { get; set; }
+    [Parameter]
+    public string Class { get; set; }
 
     public string LayoutName { get; set; }
 

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/LayoutSetters/GroupLayoutSetter.razor

@@ -1,5 +1,6 @@
 @*if it's only one group and the group layout it's not set, just render group and let set layout on kids setter*@
 
+<CascadingValue Value="@LayoutClass">
 @switch (LayoutName)
 {
     case "TabControlLayout":
@@ -67,7 +68,7 @@
         break;
 
 }
-
+</CascadingValue>
 @code
 {
     [Parameter]
@@ -85,6 +86,9 @@
     [Parameter]
     public int GroupedCount { get; set; }
 
+    [Parameter]
+    public string LayoutClass { get; set; }
+
     public string LayoutName { get; set; }
 
     protected override void OnInitialized()

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/LayoutSetters/MainLayoutSetter.razor

@@ -1,5 +1,5 @@
 
-
+<CascadingValue Value="@LayoutClass">
     @if (_layoutName == "GroupBoxLayout")
     {
         <GroupBoxLayout Body="@ChildContent" GroupName="@GroupBoxName" />
@@ -10,7 +10,7 @@
             @ChildContent
         </LayoutView>
     }
-
+</CascadingValue>
 
 
 
@@ -24,6 +24,8 @@
     public Type LayoutType { get; set; }
     [Parameter]
     public string GroupBoxName { get; set; }
+    [Parameter]
+    public string LayoutClass { get; set; }
 
     private string _layoutName;
 

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/StackPanelLayout.razor

@@ -1,6 +1,12 @@
 @inherits LayoutComponentBase
 
 
-<div name="StackPanel" class="content p-3">
+<div name="StackPanel" class="content p-3 @LayoutClass">
     @Body
 </div>
+
+@code
+{
+    [CascadingParameter]
+    protected string? LayoutClass { get; set; }
+}

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/TabControlLayout.razor

@@ -1,9 +1,15 @@
 @inherits LayoutComponentBase
 
-<div name="TabControl" class="w-100 ">
+<div name="TabControl" class="w-100 @LayoutClass">
     <TabControl>
         <div class="content">
             @Body
         </div>
     </TabControl>
-</div>
+</div>
+
+@code
+{
+    [CascadingParameter]
+    protected string? LayoutClass { get; set; }
+}

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/UniformGridLayout.razor

@@ -2,7 +2,13 @@
 
 
 
-<div name="UniformGrid" class="d-flex flex-nowrap w-100">
+<div name="UniformGrid" class="d-flex flex-nowrap w-100 @LayoutClass">
     @Body
 
-</div>
+</div>
+
+@code
+{
+    [CascadingParameter]
+    protected string? LayoutClass { get; set; }
+}

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Layouts/WrapPanelLayout.razor

@@ -1,5 +1,11 @@
 @inherits LayoutComponentBase
 
-<div name="WrapPanel" class="d-flex flex-wrap">
+<div name="WrapPanel" class="d-flex flex-wrap @LayoutClass">
     @Body  
-</div>
+</div>
+
+@code
+{
+    [CascadingParameter]
+    protected string? LayoutClass { get; set; }
+}

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/RenderableContent/RenderableContentControl.cs

@@ -39,10 +39,20 @@ public partial class RenderableContentControl : ComponentBase, IDisposable
         [Parameter]
         public string Presentation { get; set; }
         /// <summary>
-        /// Parameter Class serves for styling of elements.
+        /// Parameter Class, in which RenderableContentenControl will be wrapped.
         /// </summary>
         [Parameter]
         public string Class { get; set; }
+          /// <summary>
+        /// Parameter LayoutClass, in which layouts will be wrapped.
+        /// </summary>
+        [Parameter]
+        public string LayoutClass { get; set; }
+          /// <summary>
+        /// Parameter LayoutChildrenClass, in which children of layouts will be wrapped.
+        /// </summary>
+        [Parameter]
+        public string LayoutChildrenClass { get; set; }
 
         /// <summary>
         /// Gets or sets polling interval for PLC variables of this controls context in ms.

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/RenderableContent/RenderableContentControl.razor

@@ -31,7 +31,7 @@
             var groupName = String.IsNullOrEmpty(twin.AttributeName) ? twin.GetSymbolTail() : twin.AttributeName;
             //otherwise render children and set MainLayout
                 <GroupContainerAttributeSetter GroupType="_groupContainer" GroupName="@groupName">
-                    <MainLayoutSetter LayoutType="@MainLayoutType" GroupBoxName="@groupName">
+                    <MainLayoutSetter LayoutType="@MainLayoutType" GroupBoxName="@groupName" LayoutClass="@LayoutClass">
                         @RenderChildren(twin, MainLayoutType)
                     </MainLayoutSetter>
                 </GroupContainerAttributeSetter>
@@ -68,7 +68,8 @@
                     //otherwise is value tag or has mainLayout set, add children layout and continue
                     <ChildrenLayoutPropSetter ChildName="@name"
                                               ChildrenLayout="@parentLayout"
-                                              ChildContent="@Generator(child,null)" />
+                                              ChildContent="@Generator(child,null)"
+                                              Class="@LayoutChildrenClass"/>
                 }
                 canEnumerate = enumerator.MoveNext();
             }
@@ -81,7 +82,8 @@
                 <GroupLayoutSetter ParentLayout="@parentLayout"
                             GroupLayout="@groupLayout"
                             GroupContainer="@groupContainer"
-                            GroupName="@group.GroupName">
+                            GroupName="@group.GroupName"
+                            LayoutClass="@LayoutClass">
                 @RenderGroup(group, groupLayout)
                 </GroupLayoutSetter>
 
@@ -106,7 +108,8 @@
              var name = String.IsNullOrEmpty(child.AttributeName) ? child.GetSymbolTail() : child.AttributeName;
             <ChildrenLayoutPropSetter ChildName="@name"
                                       ChildrenLayout="@groupLayout"
-                                      ChildContent="@Generator(child, groupLayout)" />
+                                      ChildContent="@Generator(child, groupLayout)"
+                                      Class="@LayoutChildrenClass" />
             }
         }
 
@@ -143,7 +146,8 @@
             var name = String.IsNullOrEmpty(twin.AttributeName) ? twin.GetSymbolTail() : twin.AttributeName;
             <ChildrenLayoutPropSetter ChildName="@name"
                                       ChildrenLayout="layout"
-                                      ChildContent="@CreateComplexComponent(twin, component)" />
+                                      ChildContent="@CreateComplexComponent(twin, component)"
+                                      Class="@LayoutChildrenClass" />
         }
         else
         {
@@ -159,7 +163,7 @@
                     var groupContainer = TryLoadGroupType(twin);
                     var groupName = String.IsNullOrEmpty(twin.AttributeName) ? twin.GetSymbolTail() : twin.AttributeName;
                     <GroupContainerAttributeSetter GroupType="groupContainer" GroupName="@groupName">
-                        <MainLayoutSetter LayoutType="mainLayout" GroupBoxName="@groupName">
+                        <MainLayoutSetter LayoutType="mainLayout" GroupBoxName="@groupName" LayoutClass="@LayoutClass">
                             @RenderChildren(twin, mainLayout)
                         </MainLayoutSetter>
                     </GroupContainerAttributeSetter>