Updated template to BS5 styles

deform/templates/checkbox.pt

@@ -1,23 +1,21 @@
-<div class="checkbox">
-  <label for="${field.oid}">
-    <input tal:define="name name|field.name;
-                       true_val true_val|field.widget.true_val;
-                       css_class css_class|field.widget.css_class;
-                       style style|field.widget.style;
-                       oid oid|field.oid;
-                       autofocus autofocus|field.autofocus|None"
-           type="checkbox"
-           name="${name}" value="${true_val}"
-           id="${oid}"
-           tal:attributes="checked cstruct == true_val;
-                           class css_class;
-                           style style;
-                           autofocus autofocus;
-                           attributes|field.widget.attributes|{};" />
+<div class="form-check">
+  <input tal:define="name name|field.name;
+                     true_val true_val|field.widget.true_val;
+                     css_class css_class|field.widget.css_class;
+                     style style|field.widget.style;
+                     oid oid|field.oid;
+                     autofocus autofocus|field.autofocus|None"
+         type="checkbox"
+         name="${name}" value="${true_val}"
+         id="${oid}"
+         tal:attributes="checked cstruct == true_val;
+                         class string:form-check-input ${css_class};
+                         style style;
+                         autofocus autofocus;
+                         attributes|field.widget.attributes|{};" />
 
-    <span tal:condition="hasattr(field, 'schema') and hasattr(field.schema, 'label')"
-          tal:replace="field.schema.label" class="checkbox-label" >
-    </span>
-
-  </label>
+  <label for="${field.oid}"
+         tal:condition="hasattr(field, 'schema') and hasattr(field.schema, 'label')"
+         tal:content="field.schema.label"
+         class="form-check-label"></label>
 </div>

deform/templates/checkbox_choice.pt

@@ -2,26 +2,24 @@
                  style style|field.widget.style;
                  oid oid|field.oid;
                  inline getattr(field.widget, 'inline', False);
-                 autofocus autofocus|field.autofocus"
-     tal:omit-tag="not inline">
+                 autofocus autofocus|field.autofocus">
   ${field.start_sequence()}
   <div tal:repeat="choice values | field.widget.values"
-       tal:omit-tag="inline"
-       class="checkbox">
-    <label for="${oid}-${repeat.choice.index}"
-           tal:define="(value, title) choice"
-           tal:attributes="class inline and 'checkbox-inline'">
+       tal:attributes="class string:form-check ${inline and 'form-check-inline' or ''}">
+    <tal:choice tal:define="(value, title) choice">
       <input tal:attributes="checked value in cstruct;
-                             class css_class;
+                             class string:form-check-input css_class;
                              style style;
                              autofocus not repeat.choice.index and autofocus;
                              attributes|field.widget.attributes|{};"
              type="checkbox"
              name="checkbox"
              value="${value}"
              id="${oid}-${repeat.choice.index}"/>
-      ${title}
-    </label>
+      <label class="form-check-label" for="${oid}-${repeat.choice.index}">
+        ${title}
+      </label>
+    </tal:choice>
   </div>
   ${field.end_sequence()}
 </div>

deform/templates/mapping_item.pt

@@ -13,7 +13,7 @@
      i18n:domain="deform">
 
   <label for="${oid}"
-         class="control-label ${required and 'required' or ''}"
+         class="form-label ${required and 'required' or ''}"
          tal:condition="not structural"
          id="req-${oid}"
          >
@@ -31,7 +31,7 @@
             tal:condition="input_append">${input_append}</span>
   </div>
 
-  <p class="form-text text-danger"
+  <p class="invalid-feedback"
      tal:define="errstr 'error-%s' % field.oid"
      tal:repeat="msg field.error.messages()"
      i18n:translate=""

deform/templates/radio_choice.pt

@@ -2,29 +2,28 @@
                  css_class css_class|field.widget.css_class;
                  style style|field.widget.style;
                  inline getattr(field.widget, 'inline', False);
-                 autofocus autofocus|field.autofocus"
-     tal:omit-tag="not inline">
+                 autofocus autofocus|field.autofocus">
   ${field.start_rename()}
   <div tal:repeat="choice values | field.widget.values"
-       tal:omit-tag="inline"
-       class="radio">
-    <label for="${oid}-${repeat.choice.index}"
-           tal:define="(value, title) choice"
-           tal:attributes="class inline and 'radio-inline'">
+       tal:attributes="class string:form-check ${inline and 'form-check-inline' or ''}">
+    <tal:choice tal:define="(value, title) choice">
       <input tal:attributes="checked value == cstruct;
-                             class css_class;
+                             class string:form-check-input ${css_class};
                              style style;
                              autofocus not repeat.choice.index and autofocus;
                              readonly 'readonly' in getattr(field.widget, 'attributes', {}) and value == cstruct;
                              disabled 'readonly' in getattr(field.widget, 'attributes', {}) and value != cstruct;
-                             attributes|field.widget.attributes|{};
-                             "
+                             attributes|field.widget.attributes|{};"
              type="radio"
              name="${oid}"
              value="${value}"
              id="${oid}-${repeat.choice.index}"/>
-      ${title}
-    </label>
+
+      <label for="${oid}-${repeat.choice.index}"
+             class="form-check-label">
+        ${title}
+      </label>
+    </tal:choice>
   </div>
   ${field.end_rename()}
 </div>

deform/templates/richtext.pt

@@ -2,7 +2,7 @@
                  tinymce_options tinymce_options|field.widget.tinymce_options;
                  oid oid|field.oid;
                  name name|field.name;"
-    xmlns:i18n="http://xml.zope.org/namespaces/i18n" 
+    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
     i18n:domain="deform"
     tal:omit-tag="">
 
@@ -12,15 +12,15 @@
           height: 240px;
           display: block;
       }
-    </style>  
-  <textarea id="${oid}" name="${name}" 
+    </style>
+  <textarea id="${oid}" name="${name}"
             class="tinymce form-control" tal:content="cstruct" />
   <!--!
     NB: disable delayed_load on error redisplay of form, since
     that might result in non-HTML-escaped interpolation of
     user input.
   -->
-  <span id="${oid}-preload" class="tinymce-preload" 
+  <span id="${oid}-preload" class="tinymce-preload"
         tal:condition="delayed_load and not field.error"
         tal:content="structure cstruct" />
   <script type="text/javascript">
@@ -30,7 +30,7 @@
           language: '<tal:block i18n:translate="language-code">en</tal:block>',
           body_class: 'form-control',
           <tal:block condition="tinymce_options">${tinymce_options},</tal:block>
-          elements: oid
+          selector: '#' + oid
         };
         var jqoid = $('#' + oid);
         var jqoid_preload = $('#' + oid + '-preload');

deform/templates/select.pt

@@ -15,7 +15,7 @@
   <select tal:attributes="
           name name;
           id oid;
-          class string: form-control ${css_class or ''};
+          class string: form-select ${css_class or ''};
           multiple multiple;
           size size;
           style style;

deform/templates/select2.pt

@@ -27,7 +27,7 @@
   <select tal:attributes="
           name name;
           id oid;
-          class string: form-control ${css_class or ''};
+          class string: form-select ${css_class or ''};
           data-placeholder field.widget.placeholder|None;
           multiple multiple;
           style style;

deform/templates/selectize.pt

@@ -15,7 +15,7 @@
   <select tal:attributes="
           name name;
           id oid;
-          class string: form-control ${css_class or ''};
+          class string: form-select ${css_class or ''};
           data-placeholder field.widget.placeholder|None;
           multiple multiple;
           style style;