Add read-only mode to map and array editors

frontend-reactive/app/components/util/mail-entry.hbs

@@ -1,7 +1,7 @@
 <div class="mail-entry {{@wrapper-classes}}">
   <label>
     Email
-    <!--<div class="filling-spacer"/>-->
+    {{!--<div class="filling-spacer"/>--}}
     <Input
       class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
       @type="text"

frontend-reactive/app/components/util/map-edit.hbs

@@ -1,27 +1,40 @@
 <div class="{{@wrapper-classes}}">
-  <ul>
-    {{#each this.args.list as |element index|}}
-      <li>
-        <div class="string-array-element-wrapper">
-          <Input @type="text" @value={{element.key}} />
-          <Input @type="text" @value={{element.value}} />
-          <div
-            class="{{@remove-element-classes}}"
-            type="button"
-            {{on "click" (fn this.removeElement index)}}
-          >
-            X
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.list as |element|}}
+        <li>
+          <div class="string-array-element-wrapper">
+            <p class="{{@element-key-classes}}">{{element.key}}</p>
+            <p class="{{@element-value-classes}}">{{element.value}}</p>
           </div>
-        </div>
-      </li>
-    {{/each}}
+        </li>
+      {{/each}}
+    </ul>
+  {{else}}
+    <ul>
+      {{#each this.args.list as |element index|}}
+        <li>
+          <div class="string-array-element-wrapper">
+            <Input @type="text" @value={{element.key}} />
+            <Input @type="text" @value={{element.value}} />
+            <div
+              class="{{@remove-element-classes}}"
+              type="button"
+              {{on "click" (fn this.removeElement index)}}
+            >
+              X
+            </div>
+          </div>
+        </li>
+      {{/each}}
 
-  </ul>
-  <div
-    class="{{@add-element-classes}}"
-    type="button"
-    {{on "click" this.addElement}}
-  >
-    Add element
-  </div>
+    </ul>
+    <div
+      class="{{@add-element-classes}}"
+      type="button"
+      {{on "click" this.addElement}}
+    >
+      Add element
+    </div>
+  {{/if}}
 </div>

frontend-reactive/app/components/util/multiselect.hbs

@@ -1,14 +1,26 @@
 <div class={{@wrapper-class}}>
-  {{#each this.args.elements as |element|}}
-    <label class={{@label-class}}>
-      {{element.description}}
-      <Input
-        @type="checkbox"
-        name="{{element.name}}"
-        class="{{@input-classes}}"
-        @checked={{element.checked}}
-        {{on "change" this.onChange}}
-      />
-    </label>
-  {{/each}}
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.elements as |element|}}
+        {{#if element.checked}}
+          <li>
+            <p>{{element.name}}</p>
+          </li>
+        {{/if}}
+      {{/each}}
+    </ul>
+  {{else}}
+    {{#each this.args.elements as |element|}}
+      <label class={{@label-class}}>
+        {{element.description}}
+        <Input
+          @type="checkbox"
+          name="{{element.name}}"
+          class="{{@input-classes}}"
+          @checked={{element.checked}}
+          {{on "change" this.onChange}}
+        />
+      </label>
+    {{/each}}
+  {{/if}}
 </div>

frontend-reactive/app/components/util/one-of-array.hbs

@@ -1,12 +1,16 @@
 <div class="{{@wrapper-class}}">
-  {{#each @elements as |element index|}}
-    <RadioButton
-      @value="{{element}}"
-      @groupValue={{@selected}}
-      @name={{@name}}
-      @required={{@required}}
-    >
-      {{element}}
-    </RadioButton>
-  {{/each}}
+  {{#if @readonly}}
+    <p class="{{@element-classes}}">{{@selected}}</p>
+  {{else}}
+    {{#each @elements as |element index|}}
+      <RadioButton
+        @value="{{element}}"
+        @groupValue={{@selected}}
+        @name={{@name}}
+        @required={{@required}}
+      >
+        {{element}}
+      </RadioButton>
+    {{/each}}
+  {{/if}}
 </div>

frontend-reactive/app/components/util/string-array.hbs

@@ -1,4 +1,11 @@
 <div class="{{@wrapper-classes}}">
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.list as |element|}}
+        <p class="{{@readonly-element-classes}}">{{element.value}}</p>
+      {{/each}}
+    </ul>
+  {{else}}
   <ul>
     {{#each this.args.list as |element index|}}
       <li>
@@ -27,4 +34,5 @@
   >
     Add element
   </div>
+  {{/if}}
 </div>