DB 추가 및 단어사전 기능 추가

pom.xml

@@ -137,6 +137,13 @@
 			<version>1.1</version>
 		</dependency>
 
+		<!-- https://mvnrepository.com/artifact/org.bgee.log4jdbc-log4j2/log4jdbc-log4j2-jdbc4.1 -->
+		<dependency>
+			<groupId>org.bgee.log4jdbc-log4j2</groupId>
+			<artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
+			<version>1.16</version>
+		</dependency>
+
 	</dependencies>
 
 	<build>

src/main/java/com/itn/admin/cmn/config/CommuteDatabaseConfig.java

@@ -0,0 +1,70 @@
+package com.itn.admin.cmn.config;
+
+import com.zaxxer.hikari.HikariDataSource;
+import org.apache.ibatis.session.SqlSessionFactory;
+import org.mybatis.spring.SqlSessionFactoryBean;
+import org.mybatis.spring.SqlSessionTemplate;
+import org.mybatis.spring.annotation.MapperScan;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.boot.jdbc.DataSourceBuilder;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Primary;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+import org.springframework.jdbc.datasource.DataSourceTransactionManager;
+
+import javax.sql.DataSource;
+
+
+@Configuration
+@MapperScan(value = "com.itn.admin.itn.commute.mapper", sqlSessionFactoryRef = "factory2")
+class CommuteDatabaseConfig {
+
+    private final String COMMUTE_DATA_SOURCE = "CommuteDatabase";
+
+    // A database DataSource
+    @Bean(COMMUTE_DATA_SOURCE)
+    @ConfigurationProperties(prefix = "spring.commute.datasource")
+    public DataSource CommuteDataSource() {
+        return DataSourceBuilder.create()
+//                .type(HikariDataSource.class)
+                .build();
+    }
+
+    // SqlSessionTemplate 에서 사용할 SqlSession 을 생성하는 Factory
+    @Bean(name = "factory2")
+    public SqlSessionFactory CommuteSqlSessionFactory(@Qualifier(COMMUTE_DATA_SOURCE) DataSource dataSource) throws Exception {
+        SqlSessionFactoryBean sqlSessionFactory = new SqlSessionFactoryBean();
+        sqlSessionFactory.setDataSource(dataSource);
+        sqlSessionFactory.setTypeAliasesPackage("com.itn.admin.itn.dictionary");
+        sqlSessionFactory.setMapperLocations(new PathMatchingResourcePatternResolver().getResources("classpath:mapper/itn/commute/*Mapper.xml"));
+        sqlSessionFactory.setConfigLocation(new PathMatchingResourcePatternResolver().getResource("classpath:mybatis-config.xml"));
+        return sqlSessionFactory.getObject();
+        /*
+         * MyBatis 는 JdbcTemplate 대신 Connection 객체를 통한 질의를 위해서 SqlSession 을 사용한다.
+         * 내부적으로 SqlSessionTemplate 가 SqlSession 을 구현한다.
+         * Thread-Safe 하고 여러 개의 Mapper 에서 공유할 수 있다.
+         */
+//        SqlSessionFactoryBean bean = new SqlSessionFactoryBean();
+//        bean.setDataSource(dataSource);
+
+        // MyBatis Mapper Source
+        // MyBatis 의 SqlSession 에서 불러올 쿼리 정보
+//        Resource[] res = new PathMatchingResourcePatternResolver().getResources("classpath:mapper/itn/commute/*Mapper.xml");
+//        bean.setMapperLocations(res);
+
+        // MyBatis Config Setting
+        // MyBatis 설정 파일
+//        bean.setConfigLocation(myBatisConfig);
+
+//        return bean.getObject();
+    }
+
+    // DataSource 에서 Transaction 관리를 위한 Manager 클래스 등록
+    @Bean(name = "sqlSession2")
+    public SqlSessionTemplate sqlSession(SqlSessionFactory sqlSessionFactory) {
+        return new SqlSessionTemplate(sqlSessionFactory);
+    }
+}

src/main/java/com/itn/admin/cmn/config/MainDatabaseConfig.java

@@ -0,0 +1,75 @@
+package com.itn.admin.cmn.config;
+
+import com.zaxxer.hikari.HikariDataSource;
+import org.apache.ibatis.session.SqlSessionFactory;
+import org.mybatis.spring.SqlSessionFactoryBean;
+import org.mybatis.spring.SqlSessionTemplate;
+import org.mybatis.spring.annotation.MapperScan;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.boot.jdbc.DataSourceBuilder;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Primary;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+import org.springframework.jdbc.datasource.DataSourceTransactionManager;
+
+import javax.sql.DataSource;
+
+
+@Configuration
+@MapperScan(value = "com.itn.admin.itn.dictionary.mapper", sqlSessionFactoryRef = "factory")
+class MainDatabaseConfig {
+
+    private final String MAIN_DATA_SOURCE = "MainDatabase";
+
+    // A database DataSource
+    @Primary
+    @Bean(name=MAIN_DATA_SOURCE)
+    @ConfigurationProperties(prefix = "spring.main.datasource")
+    public DataSource dataSource() {
+        return DataSourceBuilder.create()
+//                .type(HikariDataSource.class)
+                .build();
+    }
+
+    // SqlSessionTemplate 에서 사용할 SqlSession 을 생성하는 Factory
+    @Primary
+    @Bean(name="factory")
+    public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception {
+        /*
+         * MyBatis 는 JdbcTemplate 대신 Connection 객체를 통한 질의를 위해서 SqlSession 을 사용한다.
+         * 내부적으로 SqlSessionTemplate 가 SqlSession 을 구현한다.
+         * Thread-Safe 하고 여러 개의 Mapper 에서 공유할 수 있다.
+         */
+//        SqlSessionFactoryBean bean = new SqlSessionFactoryBean();
+//        bean.setDataSource(dataSource);
+
+        // MyBatis Mapper Source
+        // MyBatis 의 SqlSession 에서 불러올 쿼리 정보
+//        Resource[] res = new PathMatchingResourcePatternResolver().getResources("classpath:mapper/itn/dictionary/*Mapper.xml");
+//        bean.setMapperLocations(res);
+
+        // MyBatis Config Setting
+        // MyBatis 설정 파일
+//        bean.setConfigLocation(myBatisConfig);
+
+        SqlSessionFactoryBean sqlSessionFactory = new SqlSessionFactoryBean();
+        sqlSessionFactory.setDataSource(dataSource);
+        sqlSessionFactory.setTypeAliasesPackage("com.itn.admin.itn.commute");
+        sqlSessionFactory.setMapperLocations(new PathMatchingResourcePatternResolver().getResources("classpath:mapper/itn/dictionary/*Mapper.xml"));
+        sqlSessionFactory.setConfigLocation(new PathMatchingResourcePatternResolver().getResource("classpath:mybatis-config.xml"));
+        return sqlSessionFactory.getObject();
+
+
+    }
+
+    // DataSource 에서 Transaction 관리를 위한 Manager 클래스 등록
+
+    @Primary
+    @Bean(name = "sqlSession")
+    public SqlSessionTemplate sqlSession(SqlSessionFactory sqlSessionFactory) {
+        return new SqlSessionTemplate(sqlSessionFactory);
+    }
+}

src/main/java/com/itn/admin/etc/crawling/morak/service/impl/MorakServiceImpl.java

@@ -35,39 +35,38 @@ public class MorakServiceImpl implements MorakService {
     public RestResponse morakMenu() {
 //    public void morakMenu() {
         String imgUrl = "";
+        while (true) {
             try {
-                while (true) {
-                    // 웹사이트에 연결
-                    Document doc = Jsoup.connect("https://m.blog.naver.com/jh06200/223266997482")
-                            .timeout(60000) // 타임아웃 시간을 60초로 설정
-                            .get();
 
-                    // img가 있는 태그 가져오기
+                // 웹사이트에 연결
-                    Element mainDoc = doc.select(".se-component.se-image.se-l-default").first();
+                Document doc = Jsoup.connect("https://m.blog.naver.com/jh06200/223266997482")
-                    // img에서 큰사이즈의 이미지 URL 가져오기
+                        .timeout(60000) // 타임아웃 시간을 60초로 설정
-                    imgUrl = mainDoc.select("img").attr("src");
+                        .get();
 
-                    imgUrl = imgUrl.replace("w80_blur", "w800");
+                // img가 있는 태그 가져오기
-                    System.out.println("imgUrl : "+ imgUrl);
+                Element mainDoc = doc.select(".se-component.se-image.se-l-default").first();
+                // img에서 큰사이즈의 이미지 URL 가져오기
+                imgUrl = mainDoc.select("img").attr("src");
 
-                    // 현재 날짜와 비교
+                imgUrl = imgUrl.replace("w80_blur", "w800");
-                    // true면 오늘 날짜가 맞음
+                System.out.println("imgUrl : "+ imgUrl);
-                    System.out.println(" befor this.dateComparison(imgUrl) :: "+ this.dateComparison(imgUrl));
+
-                    if (this.dateComparison(imgUrl)) {
+                // 현재 날짜와 비교
-                        SlackUtil.sendMorakMenuToSlack(imgUrl);
+                // true면 오늘 날짜가 맞음
-                        System.out.println("this.dateComparison(imgUrl) :: "+ this.dateComparison(imgUrl));
+                System.out.println(" befor this.dateComparison(imgUrl) :: "+ this.dateComparison(imgUrl));
+                if (this.dateComparison(imgUrl)) {
+                    SlackUtil.sendMorakMenuToSlack(imgUrl);
+                    System.out.println("this.dateComparison(imgUrl) :: "+ this.dateComparison(imgUrl));
+                    break;
+                } else {
+                    // 11시 30분이 지났으면 break;
+                    if (isCurrentTime1130()) {
                         break;
-                    } else {
-                        // 11시 30분이 지났으면 break;
-                        if (isCurrentTime1130()) {
-                            break;
-                        }
-                        Thread.sleep(100000);
                     }
+                    Thread.sleep(100000);
                 }
-            } catch (Exception e) {
+            }catch (Exception e){}
-                e.printStackTrace();
+        }
-            }
 
 
 

src/main/java/com/itn/admin/itn/dictionary/mapper/DictionaryMapper.java

@@ -0,0 +1,14 @@
+package com.itn.admin.itn.dictionary.mapper;
+
+import com.itn.admin.itn.commute.mapper.domain.CommuteVO;
+import com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+@Mapper
+public interface DictionaryMapper {
+    List<DictionaryVO> findAll();
+
+    void save(DictionaryVO dictionaryVO);
+}

src/main/java/com/itn/admin/itn/dictionary/mapper/domain/DictionaryVO.java

@@ -0,0 +1,40 @@
+package com.itn.admin.itn.dictionary.mapper.domain;
+
+import lombok.*;
+
+import java.io.Serializable;
+import java.sql.Date;
+
+/**
+ * packageName    : com.itn.admin.itn.commute.mapper.domain
+ * fileName       : MjonMsgVO
+ * author         : hylee
+ * date           : 2024-02-13
+ * description    : 출퇴근 log
+ * ===========================================================
+ * DATE              AUTHOR             NOTE
+ * -----------------------------------------------------------
+ * 2023-05-09        hylee       최초 생성
+ */
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+@Getter
+@Setter
+@ToString
+public class DictionaryVO implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    private Long id;
+    private String koreanWord;
+    private String englishWord;
+    private String abbreviation;
+    private String isConfirmed;
+    private String isActive;
+    private String frstRegisterId;
+    private String frstRegistPnttm;
+    private String lastUpdusrId;
+    private String lastUpdtPnttm;
+
+}

src/main/java/com/itn/admin/itn/dictionary/service/DictionaryService.java

@@ -0,0 +1,17 @@
+package com.itn.admin.itn.dictionary.service;
+
+import com.itn.admin.itn.commute.mapper.domain.CommuteVO;
+import com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO;
+
+import java.util.List;
+import java.util.Map;
+
+
+public interface DictionaryService {
+
+
+    List<DictionaryVO> getList();
+
+    void update(Map<String, Object> dictionaryMap);
+//    List<Map<String, Object>> getList();
+}

src/main/java/com/itn/admin/itn/dictionary/service/impl/DictionaryServiceImpl.java

@@ -0,0 +1,93 @@
+package com.itn.admin.itn.dictionary.service.impl;
+
+import com.itn.admin.itn.dictionary.mapper.DictionaryMapper;
+import com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO;
+import com.itn.admin.itn.dictionary.service.DictionaryService;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Slf4j
+@Service
+public class DictionaryServiceImpl  implements DictionaryService {
+
+
+    @Autowired
+    DictionaryMapper dictionaryMapper;
+
+    public List<DictionaryVO> getList() {
+        List<DictionaryVO> resultList = dictionaryMapper.findAll();
+        return resultList;
+    }
+
+    @Override
+    public void update(Map<String, Object> dictionaryMap) {
+
+        System.out.println("Received data for update: " + dictionaryMap);
+
+        Map<String, Object> data = (Map<String, Object>) dictionaryMap.get("data");
+        String action = (String) dictionaryMap.get("action");
+
+        if("edit".equals(action)) {
+            DictionaryVO dictionaryVO = getSingleDate(dictionaryMap);
+            System.out.println(dictionaryVO);
+            dictionaryMapper.save(dictionaryVO);
+
+        }else if("remove".equals(action)) {
+            List<DictionaryVO> getMultiDate = getMultiDate(dictionaryMap);
+        }else if("create".equals(action)) {
+            DictionaryVO dictionaryVO = getSingleDate(dictionaryMap);
+        }
+
+    }
+
+    private static DictionaryVO getSingleDate(Map<String, Object> dictionaryMap) {
+        Map<String, Object> dataMap = (Map<String, Object>) dictionaryMap.get("data");
+        System.out.println("Received data for update: " + dataMap);
+
+        // 데이터 맵에서 첫 번째 엔트리 가져오기 (ID와 데이터 맵)
+        Map.Entry<String, Object> firstEntry = dataMap.entrySet().iterator().next();
+        Long id = Long.parseLong(firstEntry.getKey()); // ID 값 파싱
+        Map<String, Object> dictionaryData = (Map<String, Object>) firstEntry.getValue(); // 실제 데이터 맵
+
+        // DictionaryVO 객체 생성 및 데이터 설정
+        DictionaryVO dictionary = new DictionaryVO();
+        dictionary.setId(id); // ID 설정
+        if (dictionaryData != null) {
+            dictionary.setKoreanWord((String) dictionaryData.get("koreanWord"));
+            dictionary.setEnglishWord((String) dictionaryData.get("englishWord")); // 필요한 경우 추가
+            dictionary.setAbbreviation((String) dictionaryData.get("abbreviation")); // 필요한 경우 추가
+            dictionary.setIsConfirmed((String) dictionaryData.get("isConfirmed")); // 필요한 경우 추가
+            dictionary.setIsActive((String) dictionaryData.get("isActive")); // 필요한 경우 추가
+        }
+        return dictionary;
+    }
+
+
+    private static List<DictionaryVO> getMultiDate(Map<String, Object> dictionaryMap) {
+        Map<String, Object> data = (Map<String, Object>) dictionaryMap.get("data");
+
+        List<DictionaryVO> dictionaries = new ArrayList<>();
+
+        for (Map.Entry<String, Object> entry : data.entrySet()) {
+            Map<String, Object> dictionaryData = (Map<String, Object>) entry.getValue();
+            DictionaryVO dictionary = new DictionaryVO();
+            dictionary.setId(Long.parseLong(entry.getKey()));
+            dictionary.setEnglishWord((String) dictionaryData.get("englishWord"));
+            dictionary.setKoreanWord((String) dictionaryData.get("koreanWord"));
+            dictionary.setAbbreviation((String) dictionaryData.get("abbreviation"));
+            dictionary.setIsConfirmed((String) dictionaryData.get("isConfirmed"));
+            dictionary.setIsActive((String) dictionaryData.get("isActive"));
+
+            dictionaries.add(dictionary);
+        }
+        return dictionaries;
+    }
+
+
+}

src/main/java/com/itn/admin/itn/dictionary/web/DictionaryController.java

@@ -0,0 +1,41 @@
+package com.itn.admin.itn.dictionary.web;
+
+import com.itn.admin.itn.commute.mapper.domain.CommuteVO;
+import com.itn.admin.itn.commute.service.CommuteService;
+import com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO;
+import com.itn.admin.itn.dictionary.service.DictionaryService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.Map;
+
+@Controller
+public class DictionaryController {
+
+    private DictionaryService dictionaryService;
+
+    @Autowired
+    public void setDictionaryService(DictionaryService dictionaryService) {
+        this.dictionaryService = dictionaryService;
+    }
+
+    @GetMapping(value = "/dictionary/list")
+    public String list() {
+//    public String list(@ModelAttribute("dictionaryVO") DictionaryVO dictionaryVO, Model model) {
+//
+//
+//        Map<String, Object> resultMap = dictionaryService.getList(dictionaryVO);
+//
+//        model.addAttribute("list", resultMap.get("resultList"));
+
+        return "dictionary/list";
+    }
+
+
+
+
+}

src/main/java/com/itn/admin/itn/dictionary/web/DictionaryRestController.java

@@ -0,0 +1,45 @@
+package com.itn.admin.itn.dictionary.web;
+
+import com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO;
+import com.itn.admin.itn.dictionary.service.DictionaryService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+@RestController
+public class DictionaryRestController {
+
+    private DictionaryService dictionaryService;
+
+    @Autowired
+    public void setDictionaryService(DictionaryService dictionaryService) {
+        this.dictionaryService = dictionaryService;
+    }
+
+
+    // 데이터 불러오기
+    @GetMapping("/dictionary/list/load")
+    public ResponseEntity<List<DictionaryVO>> loadData() {
+        // 데이터베이스에서 데이터를 조회하는 로직
+        List<DictionaryVO> data = dictionaryService.getList();
+        return ResponseEntity.ok(data);
+    }
+
+
+    // 데이터 수정
+    @PostMapping("/dictionary/api/update")
+    public ResponseEntity<?> updateData(@RequestBody Map<String, Object> dictionaryMap) {
+        // 데이터 처리 로직
+        // 예: 데이터베이스에서 기존 데이터를 수정
+//        System.out.println("Received data for update: " + dictionaryVO.toString());
+        dictionaryService.update(dictionaryMap);
+        return ResponseEntity.ok(dictionaryService.getList());
+    }
+
+}

src/main/resources/application.properties

@@ -8,11 +8,11 @@ mybatis.configuration.map-underscore-to-camel-case=true
 
 
 #sql \ucd9c\ub825 log \uc124\uc815
-logging.level.jdbc.sqlonly=off
+logging.level.jdbc.sqlonly=info
 logging.level.jdbc.sqltiming=info
-logging.level.jdbc.audit=off
+logging.level.jdbc.audit=info
-logging.level.jdbc.resultset=off
+logging.level.jdbc.resultset=info
-logging.level.jdbc.resultsettable=off
+logging.level.jdbc.resultsettable=info
 
 # thymeleaf
 spring.thymeleaf.prefix=classpath:templates/
@@ -21,7 +21,17 @@ spring.thymeleaf.cache=false
 
 
 # DB INFO
-spring.datasource.driverClassName=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
+spring.main.datasource.driverClassName=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
-spring.datasource.url=jdbc:log4jdbc:mysql://192.168.0.200:3312/biostar2_ac?serverTimezone=Asia/Seoul
+spring.main.datasource.jdbc-url=jdbc:log4jdbc:mysql://119.193.215.98:3306/itn_admin?serverTimezone=Asia/Seoul
-spring.datasource.username=root
+spring.main.datasource.username=itnAdmin
-spring.datasource.password=itntest!
+spring.main.datasource.password=itntest123
+
+
+
+# DB INFO
+spring.commute.datasource.driverClassName=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
+spring.commute.datasource.jdbc-url=jdbc:log4jdbc:mysql://192.168.0.200:3312/biostar2_ac?serverTimezone=Asia/Seoul
+spring.commute.datasource.username=root
+spring.commute.datasource.password=itntest!
+
+logging.config=classpath:logback-spring.xml

src/main/resources/log4jdbc.log4j2.properties

@@ -1,3 +1,2 @@
 log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
-log4jdbc.drivers=org.mariadb.jdbc.Driver
 log4jdbc.dump.sql.maxlinelength=0

src/main/resources/logback.properties

@@ -4,4 +4,6 @@ log.config.path=/data/tomcat/tomcat_api_9100_2023_0711/logs
 log.config.filename=mjonApi_log
 
 logging.level.root=INFO
-#logging.level.root=DEBUG
+#logging.level.root=DEBUG
+
+

src/main/resources/mapper-config.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
+<configuration>
+
+	<!--Mybatis 설정 -->
+	<settings>
+		<!-- 전통적인 데이터베이스 컬럼명 형태인 A_COLUMN을 CamelCase형태의 자바 프로퍼티명 형태인 aColumn으로 자동으로 매핑하도록 함 -->
+		<setting name="mapUnderscoreToCamelCase" value="true"></setting>
+		<!--  파라미터에 Null 값이 있을 경우 에러 처리 -->
+		<setting name="jdbcTypeForNull" value="VARCHAR"></setting>
+	</settings>
+	
+	<!-- Type Aliases 설정-->
+	<typeAliases>
+		<typeAlias alias="dictionaryVO" type="com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO" />
+	</typeAliases>
+</configuration>

src/main/resources/mapper/itn/commute/CommuteMapper.xml

@@ -21,4 +21,5 @@
 
     </select>
 
+
 </mapper>

src/main/resources/mapper/itn/dictionary/DictionaryMapper.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+
+<mapper namespace="com.itn.admin.itn.dictionary.mapper.DictionaryMapper">
+
+    <select id="findAll" resultType="dictionaryVO">
+<!--    <select id="findAll" resultType="com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO" parameterType="com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO">-->
+        SELECT
+            id
+            , KOREAN_WORD
+            , ENGLISH_WORD
+            , ABBREVIATION
+            , IS_CONFIRMED
+            , IS_ACTIVE
+            , FRST_REGISTER_ID
+            , FRST_REGIST_PNTTM
+            , LAST_UPDUSR_ID
+            , LAST_UPDT_PNTTM
+        FROM dictionary
+
+    </select>
+
+
+    <update id="save" parameterType="dictionaryVO">
+        UPDATE dictionary
+        SET
+            <if test="englishWord != null">
+                ENGLISH_WORD = #{englishWord},
+            </if>
+            <if test="koreanWord != null">
+                KOREAN_WORD = #{koreanWord},
+            </if>
+            <if test="abbreviation != null">
+                ABBREVIATION = #{abbreviation},
+            </if>
+            <if test="isConfirmed != null">
+                IS_CONFIRMED = #{isConfirmed},
+            </if>
+            <if test="isActive != null">
+                IS_ACTIVE = #{isActive},
+            </if>
+        LAST_UPDT_PNTTM = NOW()
+        WHERE id = #{id}
+    </update>
+
+
+</mapper>

src/main/resources/mybatis-config.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE configuration
+        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-config.dtd">
+
+<configuration>
+
+    <!--Mybatis 설정 -->
+    <settings>
+        <!-- 전통적인 데이터베이스 컬럼명 형태인 A_COLUMN을 CamelCase형태의 자바 프로퍼티명 형태인 aColumn으로 자동으로 매핑하도록 함 -->
+        <setting name="mapUnderscoreToCamelCase" value="true"></setting>
+        <!--  파라미터에 Null 값이 있을 경우 에러 처리 -->
+        <setting name="jdbcTypeForNull" value="VARCHAR"></setting>
+    </settings>
+    <!-- 별칭 -->
+    <typeAliases>
+        <typeAlias type="com.itn.admin.itn.commute.mapper.domain.CommuteVO" alias="commuteVO"/>
+        <typeAlias type="com.itn.admin.itn.dictionary.mapper.domain.DictionaryVO" alias="dictionaryVO"/>
+
+    </typeAliases>
+
+</configuration>

src/main/resources/static/plugins/datatable_editor/css/bubble.scss

@@ -0,0 +1,153 @@
+
+// Bubble form editing
+// Very similar to the main form, but attached to a particular node and the
+// form layout is slightly different with the fields container and buttons
+// making up a table of a single row and two columns. This allows the buttons
+// to be removed from the display and under this condition the fields will
+// take up the full width available.
+div.DTE_Bubble {
+	position: absolute;
+	z-index: 11;
+	margin-top: -6px;
+	opacity: 0;
+	transition: top 0.5s ease-in-out 0s;
+
+	div.DTE_Bubble_Liner {
+		position: absolute;
+		bottom: 0;
+		border: 1px solid black;
+		min-width: 300px;
+		margin-left: -150px;
+		background-color: white;
+		box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+		border-radius: 6px;
+		border: 1px solid #666;
+		padding: 1em;
+		background: #fcfcfc;
+		@include box-sizing(border-box);
+
+		div.DTE_Bubble_Table {
+			width: 100%;
+
+			> form {
+				div.DTE_Form_Content {
+					padding: 0;
+
+					div.DTE_Field {
+						position: relative;
+						margin-bottom: 0.5em;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+
+						> label {
+							padding-top: 0;
+							margin-bottom: 0;
+						}
+
+						> div {
+							padding: 0;
+							margin-top: 0.5em;
+
+							input {
+								margin: 0;
+							}
+						}
+					}
+				}
+			}
+			
+			div.DTE_Form_Buttons {
+				text-align: right;
+				margin-top: 1em;
+
+				button {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		div.DTE_Header {
+			border-top-left-radius: 5px;
+			border-top-right-radius: 5px;
+		}
+
+		div.DTE_Header + div.DTE_Form_Info,
+		div.DTE_Header + div.DTE_Bubble_Table {
+			padding-top: 1em;
+		}
+
+
+		div.DTE_Form_Error {
+			float: none;
+			display: none;
+			padding: 0;
+			margin-bottom: 0.5em;
+		}
+
+		div.DTE_Bubble_Close {
+			@include close-icon();
+			top: 6px;
+			right: 6px;
+			line-height: 18px;
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		position: absolute;
+		height: 10px;
+		width: 10px;
+		top: -6px;
+		background-color: white;
+		border: 1px solid #666;
+		border-top: none;
+		border-right: none;
+
+		-webkit-transform: rotate(-45deg);
+		   -moz-transform: rotate(-45deg);
+		    -ms-transform: rotate(-45deg);
+		     -o-transform: rotate(-45deg);
+		        transform: rotate(-45deg);
+	}
+
+	&.below {
+		div.DTE_Bubble_Liner {
+			top: 10px;
+			bottom: auto;
+		}
+
+		div.DTE_Bubble_Triangle {
+			top: 4px;
+			-webkit-transform: rotate(135deg);
+			   -moz-transform: rotate(135deg);
+			    -ms-transform: rotate(135deg);
+			     -o-transform: rotate(135deg);
+			        transform: rotate(135deg);
+		}
+	}
+}
+
+div.DTE_Bubble_Background {
+	@include overlay-background();
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE_Bubble {
+		div.DTE_Bubble_Liner {
+			background-color: var(--dt-html-background);
+			border: 1px solid rgba(255, 255, 255, 0.15);
+
+			div.DTE_Bubble_Close::after {
+				color: rgba(255, 255, 255, 0.5);
+			}
+		}
+
+		div.DTE_Bubble_Triangle {
+			background-color: var(--dt-html-background);
+			border-left-color: rgba(255, 255, 255, 0.15);
+			border-bottom-color: rgba(255, 255, 255, 0.15);
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/datatable.scss

@@ -0,0 +1,30 @@
+
+// Row highlighting on edit styles
+
+table.dataTable {
+	tr.dte-highlight {
+		animation-duration: 1s;
+		animation-name: dte-highlight;
+	}
+
+	tr.dte-inlineAdd {
+		td,
+		th {
+			vertical-align: top;
+		}
+	}
+}
+
+@keyframes dte-highlight {
+	from {
+		box-shadow: 0 0 0 rgba(235, 121, 15, 1);
+	}
+
+	50% {
+		box-shadow: 0 0 5px rgba(235, 121, 15, 1);
+	}
+  
+	to {
+		box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/editor.bootstrap.css

@@ -0,0 +1,677 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE div.DTE_Form_Error {
+  color: #b11f1f;
+}
+div.DTE div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+div.DTE div.DTE_Form_Buttons button {
+  margin-left: 0.5em;
+}
+
+div.modal div.DTE div.DTE_Form_Error {
+  display: none;
+  float: left;
+  padding-top: 7px;
+}
+
+div.DTE_Field {
+  position: relative;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field div:not([data-dte-e=msg-error]) {
+  color: inherit;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  text-align: left;
+  width: 100%;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input.form-control {
+  height: 30px;
+}
+div.DTE_Inline div.DTE_Field div.help-block {
+  display: none;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+div.DTE_Inline.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Field_Type_checkbox div.controls,
+div.DTE_Field_Type_radio div.controls {
+  margin-top: 0.4em;
+}
+div.DTE_Field_Type_checkbox input,
+div.DTE_Field_Type_radio input {
+  vertical-align: middle;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field div label,
+div.DTE_Field_Type_radio div.DTE_Field div label {
+  margin-left: 0.75em;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  max-width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+  flex: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding: 0 0 4px 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-bottom: none;
+  font-size: 14px;
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.close,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.btn-close {
+  display: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 0.75em;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  text-align: left;
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+  font-weight: normal;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate {
+  text-align: center;
+}
+div.DTE_Field_Type_datatable div.dt-container > div.row:nth-child(1) {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  div.DTE_Field_Type_datatable label.control-label {
+    text-align: left;
+  }
+}
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 52px;
+  right: 12px;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.bootstrap4.css

@@ -0,0 +1,766 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE div.DTE_Form_Error {
+  color: #b11f1f;
+}
+div.DTE div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+div.DTE div.DTE_Form_Buttons button {
+  margin-left: 0.5em;
+}
+
+div.modal div.DTE div.DTE_Form_Error {
+  display: none;
+  float: left;
+  padding-top: 7px;
+}
+
+div.DTE_Field {
+  position: relative;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field div:not([data-dte-e=msg-error]) {
+  color: inherit;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  text-align: left;
+  width: 100%;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input.form-control {
+  height: 30px;
+}
+div.DTE_Inline div.DTE_Field div.help-block {
+  display: none;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+div.DTE_Inline.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Field_Type_checkbox div.controls,
+div.DTE_Field_Type_radio div.controls {
+  margin-top: 0.4em;
+}
+div.DTE_Field_Type_checkbox input,
+div.DTE_Field_Type_radio input {
+  vertical-align: middle;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field div label,
+div.DTE_Field_Type_radio div.DTE_Field div label {
+  margin-left: 0.75em;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  max-width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+  flex: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding: 0 0 4px 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-bottom: none;
+  font-size: 14px;
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.close,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.btn-close {
+  display: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 0.75em;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  text-align: left;
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+  font-weight: normal;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate {
+  text-align: center;
+}
+div.DTE_Field_Type_datatable div.dt-container > div.row:nth-child(1) {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  div.DTE_Field_Type_datatable label.control-label {
+    text-align: left;
+  }
+}
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 52px;
+  right: 12px;
+}
+
+div.multi-value,
+div.multi-restore {
+  padding: 0.5em;
+}
+div.multi-value span,
+div.multi-restore span {
+  line-height: 1.2em;
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  margin: 0 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  margin-top: 1em;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+  margin: 0;
+}
+div.DTE_Inline div.DTE_Field > div {
+  max-width: 100%;
+  flex: none;
+}
+div.DTE_Inline div.DTE_Field input {
+  margin: -5px 0 -10px !important;
+}
+div.DTE_Inline div.DTE_Field div.form-text {
+  margin-top: 1em;
+}
+div.DTE_Inline div.DTE_Field div.form-text:empty {
+  margin-top: 0;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+div.DTE_Field_Type_checkbox div.DTE_Field_InputControl,
+div.DTE_Field_Type_radio div.DTE_Field_InputControl {
+  padding-top: 5px;
+}
+div.DTE_Field_Type_checkbox div label,
+div.DTE_Field_Type_radio div label {
+  margin-bottom: 0.2em;
+  margin-left: 0.75em;
+  vertical-align: middle;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 20px;
+  right: 36px;
+}
+
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 0;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dt-container table.dataTable,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable {
+  border: 1px solid #ced4da;
+  border-radius: 3px;
+}
+div.DTE_Field_Type_datatable div.dt-container table.dataTable thead th,
+div.DTE_Field_Type_datatable div.dt-container table.dataTable tbody td,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable thead th,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable tbody td {
+  border-top: none;
+}
+div.DTE_Field_Type_datatable div.dt-container div.dataTables_paginate ul.pagination,
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+  justify-content: center;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.bootstrap5.css

@@ -0,0 +1,770 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE div.DTE_Form_Error {
+  color: #b11f1f;
+}
+div.DTE div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+div.DTE div.DTE_Form_Buttons button {
+  margin-left: 0.5em;
+}
+
+div.modal div.DTE div.DTE_Form_Error {
+  display: none;
+  float: left;
+  padding-top: 7px;
+}
+
+div.DTE_Field {
+  position: relative;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field div:not([data-dte-e=msg-error]) {
+  color: inherit;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  text-align: left;
+  width: 100%;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input.form-control {
+  height: 30px;
+}
+div.DTE_Inline div.DTE_Field div.help-block {
+  display: none;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+div.DTE_Inline.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Field_Type_checkbox div.controls,
+div.DTE_Field_Type_radio div.controls {
+  margin-top: 0.4em;
+}
+div.DTE_Field_Type_checkbox input,
+div.DTE_Field_Type_radio input {
+  vertical-align: middle;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field div label,
+div.DTE_Field_Type_radio div.DTE_Field div label {
+  margin-left: 0.75em;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  max-width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+  flex: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding: 0 0 4px 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-bottom: none;
+  font-size: 14px;
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.close,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header button.btn-close {
+  display: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 0.75em;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  text-align: left;
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+  font-weight: normal;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate {
+  text-align: center;
+}
+div.DTE_Field_Type_datatable div.dt-container > div.row:nth-child(1) {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  div.DTE_Field_Type_datatable label.control-label {
+    text-align: left;
+  }
+}
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 52px;
+  right: 12px;
+}
+
+div.multi-value,
+div.multi-restore {
+  padding: 0.5em;
+}
+div.multi-value span,
+div.multi-restore span {
+  line-height: 1.2em;
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  margin: 0 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  margin-top: 1em;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+  margin: 0;
+}
+div.DTE_Inline div.DTE_Field > div {
+  max-width: 100%;
+  flex: none;
+}
+div.DTE_Inline div.DTE_Field input {
+  font-size: 1em;
+  margin: -5px 0 -10px !important;
+}
+div.DTE_Inline div.DTE_Field div.form-text {
+  margin-top: 1em;
+}
+div.DTE_Inline div.DTE_Field div.form-text:empty {
+  margin-top: 0;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+div.DTE_Field_Type_checkbox div.DTE_Field_InputControl,
+div.DTE_Field_Type_radio div.DTE_Field_InputControl {
+  padding-top: 5px;
+}
+div.DTE_Field_Type_checkbox div label,
+div.DTE_Field_Type_radio div label {
+  margin-left: 0.75em;
+  vertical-align: middle;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 20px;
+  right: 36px;
+}
+
+div.DTE_Field_Type_datatable div.dt-search,
+div.DTE_Field_Type_datatable div.dataTables_filter {
+  padding-bottom: 0.5em;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dt-search,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 0;
+}
+div.DTE_Field_Type_datatable div.dt-search span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-container table.dataTable,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable {
+  border: 1px solid var(--bs-border-color);
+  border-radius: 3px;
+}
+div.DTE_Field_Type_datatable div.dt-container table.dataTable thead th,
+div.DTE_Field_Type_datatable div.dt-container table.dataTable tbody td,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable thead th,
+div.DTE_Field_Type_datatable div.dataTables_wrapper table.dataTable tbody td {
+  border-top: none;
+}
+div.DTE_Field_Type_datatable div.dt-container div.dataTables_paginate ul.pagination,
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+  justify-content: center;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.bulma.css

@@ -0,0 +1,565 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.modal-content {
+  padding: 20px;
+  background: white;
+  border-radius: 5px;
+}
+div.modal-content div.modal-header {
+  padding-bottom: 20px;
+}
+div.modal-content div.modal-footer {
+  padding-top: 6px;
+}
+div.modal-content div.dt-buttons {
+  margin-top: 1em;
+}
+div.modal-content div.dataTables_info {
+  font-weight: 1;
+  font-size: 0.8em;
+  padding-left: 2px;
+}
+div.modal-content div.dataTables_info span.select-item {
+  padding-left: 0.5em;
+}
+
+div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 10px;
+}
+div.DTE_Form_Buttons button {
+  margin-left: 0.5em;
+}
+
+div.card {
+  border-color: #888;
+}
+
+table.dataTable div.field {
+  margin-bottom: 0px;
+}
+table.dataTable div.field input.input {
+  padding: 0px;
+}
+table.dataTable div.field input.is-small {
+  font-size: 1em;
+  height: 2em;
+}
+
+div.DTE_Field_Type_checkbox div label,
+div.DTE_Field_Type_radio div label {
+  margin-left: 0.75em;
+}
+
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 0.5em;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  margin-top: 0.5em;
+  text-align: left;
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+  font-weight: normal;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.column:empty {
+  display: none;
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  font-size: 18px;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.foundation.css

@@ -0,0 +1,664 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE div.DTE_Form_Error {
+  display: none;
+  color: #b11f1f;
+}
+div.DTE div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+div.DTE div.DTE_Form_Buttons button {
+  margin-left: 0.5em;
+}
+
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+  padding: 0.75rem;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #e5e5e5;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+  padding: 0.5rem 0.75rem;
+}
+div.DTE_Field div.label {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+div.DTE_Field div.label:empty {
+  padding: 0;
+  margin: 0;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field.full label,
+div.DTE_Field.full > div {
+  margin-left: -12.5%;
+  margin-right: -12.5%;
+}
+
+div.reveal-modal button.close {
+  position: absolute;
+  top: -1.5em;
+  right: -2.5em;
+}
+div.reveal-modal button.close.close-button {
+  right: 1rem;
+  top: 0.5rem;
+  z-index: 100;
+}
+div.reveal-modal div.DTE_Header {
+  position: relative;
+  top: -0.5em;
+  font-size: 2.05556rem;
+  line-height: 1.4;
+}
+div.reveal-modal div.DTE_Form_Content {
+  width: 75%;
+  margin: 0 auto;
+}
+div.reveal-modal div.DTE_Footer {
+  position: relative;
+  bottom: -0.5em;
+  float: right;
+}
+div.reveal-modal div.DTE_Footer button {
+  margin-bottom: 0;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input {
+  height: 30px;
+  margin-bottom: 0;
+}
+div.DTE_Inline div.DTE_Field div.label:empty {
+  display: none;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-bottom: 4px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  font-size: 18px;
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.editor_upload button.button,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+div.DTE div.editor_upload ul li button {
+  width: 63px;
+}
+
+div.DTE_Field_Type_datatable div.dt-search input,
+div.DTE_Field_Type_datatable div.dataTables_filter input {
+  height: 1.75rem;
+  margin-bottom: 0.333rem;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-bottom: 0.5em;
+  width: 100%;
+  padding-right: 1em;
+  margin-bottom: 0;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate {
+  float: none;
+  text-align: center;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.DTE_Processing_Indicator {
+  top: 26px;
+  right: 95px;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.jqueryui.css

@@ -0,0 +1,980 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE_Field input,
+div.DTE_Field textarea {
+  box-sizing: border-box;
+  background-color: white;
+  -webkit-transition: background-color ease-in-out 0.15s;
+  transition: background-color ease-in-out 0.15s;
+}
+div.DTE_Field input:focus,
+div.DTE_Field textarea:focus {
+  background-color: #ffffee;
+}
+div.DTE_Field input[type=color],
+div.DTE_Field input[type=date],
+div.DTE_Field input[type=datetime],
+div.DTE_Field input[type=datetime-local],
+div.DTE_Field input[type=email],
+div.DTE_Field input[type=month],
+div.DTE_Field input[type=number],
+div.DTE_Field input[type=password],
+div.DTE_Field input[type=search],
+div.DTE_Field input[type=tel],
+div.DTE_Field input[type=text],
+div.DTE_Field input[type=time],
+div.DTE_Field input[type=url],
+div.DTE_Field input[type=week] {
+  padding: 5px 4px;
+  width: 100%;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+div.DTE_Field input[type=checkbox],
+div.DTE_Field input[type=radio] {
+  vertical-align: middle;
+}
+div.DTE_Field select {
+  padding: 5px 4px;
+  border-radius: 3px;
+  border: 1px solid #aaa;
+  background: white;
+  max-width: 100%;
+  color: inherit;
+}
+div.DTE_Field label div.DTE_Label_Info {
+  font-size: 0.85em;
+  margin-top: 0.25em;
+}
+div.DTE_Field label div.DTE_Label_Info:empty {
+  margin-top: 0;
+}
+div.DTE_Field div.DTE_Field_Info,
+div.DTE_Field div.DTE_Field_Message,
+div.DTE_Field div.DTE_Field_Error {
+  font-size: 11px;
+  line-height: 1em;
+  margin-top: 5px;
+}
+div.DTE_Field div.DTE_Field_Info:empty,
+div.DTE_Field div.DTE_Field_Message:empty,
+div.DTE_Field div.DTE_Field_Error:empty {
+  margin-top: 0;
+}
+div.DTE_Field div.DTE_Field_Error {
+  display: none;
+  color: #b11f1f;
+}
+div.DTE_Field div.multi-value {
+  display: none;
+  border: 1px dotted #666;
+  border-radius: 3px;
+  padding: 5px;
+  background-color: #fafafa;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span {
+  font-size: 0.8em;
+  line-height: 1.25em;
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value.multi-noEdit {
+  border: 1px solid #ccc;
+  cursor: auto;
+  background-color: #fcfcfc;
+}
+div.DTE_Field div.multi-value.multi-noEdit:hover {
+  background-color: #fcfcfc;
+}
+div.DTE_Field div.multi-value:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field.disabled {
+  color: grey;
+}
+div.DTE_Field.disabled div.multi-value {
+  cursor: default;
+  border: 1px dotted #aaa;
+  background-color: transparent;
+}
+div.DTE_Field div.multi-restore {
+  display: none;
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+  color: #3879d9;
+}
+div.DTE_Field div.multi-restore:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+div.DTE_Field_Type_textarea textarea {
+  padding: 3px;
+  width: 100%;
+  height: 80px;
+  border: 1px solid #aaa;
+  max-width: 100%;
+  max-height: 75vh;
+}
+
+div.DTE_Field.DTE_Field_Type_date img {
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+div.DTE_Field_Type_checkbox div.DTE_Field_Input,
+div.DTE_Field_Type_radio div.DTE_Field_Input {
+  padding-top: 1px;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div {
+  margin-bottom: 0.25em;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div:last-child,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div label,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div label {
+  margin-left: 0.75em;
+  vertical-align: middle;
+}
+
+div.DTE_Field_Type_datatable div.dt-layout-row:nth-child(2) > div.dt-layout-cell {
+  padding-top: 0;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  font-size: 0.8em;
+  line-height: 1.3em;
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+  opacity: 0.8;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 4px;
+}
+div.DTE_Field_Type_datatable div.dt-search,
+div.DTE_Field_Type_datatable div.dataTables_filter {
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+}
+div.DTE_Field_Type_datatable div.dt-search input,
+div.DTE_Field_Type_datatable div.dataTables_filter input {
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+  float: none;
+}
+div.DTE_Field_Type_datatable div.dt-buttons button {
+  width: 100%;
+  margin-left: 0;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  padding-bottom: 0;
+}
+div.DTE_Field_Type_datatable div.dataTables_paginate {
+  float: none;
+  text-align: center;
+  font-size: 0.8em;
+}
+div.DTE_Field_Type_datatable table.dataTable.no-footer {
+  border-bottom: 1px solid #aaa !important;
+}
+div.DTE_Field_Type_datatable table.dataTable thead th, div.DTE_Field_Type_datatable table.dataTable thead td {
+  font-weight: normal;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid #aaa;
+}
+div.DTE_Field_Type_datatable table.dataTable tbody {
+  background-color: white;
+}
+div.DTE_Field_Type_datatable table.dataTable tbody th:first-child,
+div.DTE_Field_Type_datatable table.dataTable tbody td:first-child {
+  border-left: 1px solid #aaa;
+}
+div.DTE_Field_Type_datatable table.dataTable tbody th:last-child,
+div.DTE_Field_Type_datatable table.dataTable tbody td:last-child {
+  border-right: 1px solid #aaa;
+}
+div.DTE_Field_Type_datatable table.dataTable tfoot th, div.DTE_Field_Type_datatable table.dataTable tfoot td {
+  font-weight: normal;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-top: 1px solid #aaa;
+}
+div.DTE_Field_Type_datatable div.dataTables_scrollHead table.dataTable,
+div.DTE_Field_Type_datatable div.dataTables_scrollHead table.dataTable thead th,
+div.DTE_Field_Type_datatable div.dataTables_scrollHead table.dataTable thead td {
+  border-bottom: none !important;
+}
+div.DTE_Field_Type_datatable div.dataTables_scrollBody {
+  border: 1px solid #aaa !important;
+  border-radius: 3px;
+}
+div.DTE_Field_Type_datatable div.dataTables_scrollBody table.dataTable {
+  border-bottom: none !important;
+}
+div.DTE_Field_Type_datatable div.dataTables_scrollBody table.dataTable tbody th:first-child,
+div.DTE_Field_Type_datatable div.dataTables_scrollBody table.dataTable tbody td:first-child {
+  border-left: none;
+}
+div.DTE_Field_Type_datatable div.dataTables_scrollBody table.dataTable tbody th:last-child,
+div.DTE_Field_Type_datatable div.dataTables_scrollBody table.dataTable tbody td:last-child {
+  border-right: none;
+}
+
+html.dark div.DTE_Field input,
+html.dark div.DTE_Field textarea {
+  color: inherit;
+  background-color: rgb(33, 37, 41);
+}
+html.dark div.DTE_Field input:focus,
+html.dark div.DTE_Field textarea:focus {
+  background-color: rgb(24, 30, 36);
+}
+html.dark div.DTE_Field input[type=color],
+html.dark div.DTE_Field input[type=date],
+html.dark div.DTE_Field input[type=datetime],
+html.dark div.DTE_Field input[type=datetime-local],
+html.dark div.DTE_Field input[type=email],
+html.dark div.DTE_Field input[type=month],
+html.dark div.DTE_Field input[type=number],
+html.dark div.DTE_Field input[type=password],
+html.dark div.DTE_Field input[type=search],
+html.dark div.DTE_Field input[type=tel],
+html.dark div.DTE_Field input[type=text],
+html.dark div.DTE_Field input[type=time],
+html.dark div.DTE_Field input[type=url],
+html.dark div.DTE_Field input[type=week] {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field select {
+  background: rgb(33, 37, 41);
+}
+html.dark div.DTE_Field div.DTE_Field_Error {
+  color: #b11f1f;
+}
+html.dark div.DTE_Field div.multi-value {
+  border: 1px dotted rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+html.dark div.DTE_Field div.multi-value span {
+  color: #b9b9b9;
+}
+html.dark div.DTE_Field div.multi-value.multi-noEdit {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+html.dark div.DTE_Field div.multi-value.multi-noEdit:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+html.dark div.DTE_Field div.multi-value:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+html.dark div.DTE_Field.disabled {
+  color: grey;
+}
+html.dark div.DTE_Field.disabled div.multi-value {
+  border: 1px dotted rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field div.multi-restore {
+  color: rgb(110, 168, 254);
+}
+html.dark div.DTE_Field_Type_textarea textarea {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable.no-footer {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable thead th, html.dark div.DTE_Field_Type_datatable table.dataTable thead td {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable tbody {
+  background-color: rgb(33, 37, 41);
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable tbody th:first-child,
+html.dark div.DTE_Field_Type_datatable table.dataTable tbody td:first-child {
+  border-left: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable tbody th:last-child,
+html.dark div.DTE_Field_Type_datatable table.dataTable tbody td:last-child {
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field_Type_datatable table.dataTable tfoot th, html.dark div.DTE_Field_Type_datatable table.dataTable tfoot td {
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Field_Type_datatable div.dataTables_scrollBody {
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+div.DTE_Body {
+  padding: 52px 0;
+}
+div.DTE_Body div.DTE_Body_Content {
+  position: relative;
+  overflow: auto;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Form_Info {
+  padding: 1em 1em 0 1em;
+  margin: 0;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+  position: relative;
+  clear: both;
+  padding: 5px 10%;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field:hover {
+  background-color: #f9f9f9;
+  border: 1px solid #f3f3f3;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+  float: left;
+  width: 33%;
+  padding-top: 3px;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+  float: right;
+  width: 66%;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+  padding: 5px 0;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+  float: none;
+  clear: both;
+  width: 100%;
+}
+
+html[dir=rtl] div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+  float: right;
+}
+html[dir=rtl] div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+  float: left;
+}
+html[dir=rtl] div.DTE div.DTE_Form_Buttons button {
+  float: left;
+}
+
+html.dark div.DTE_Body div.DTE_Body_Content div.DTE_Field:hover {
+  background-color: rgba(255, 255, 255, 0.01);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+@media only screen and (max-width: 768px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    padding: 5px 10%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label {
+    width: 35.5%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input {
+    width: 64.5%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 640px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label {
+    width: 40%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input {
+    width: 60%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 580px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    position: relative;
+    clear: both;
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+    float: none;
+    width: auto;
+    margin-top: 4px;
+    margin-bottom: 6px;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full, div.DTE_Body div.DTE_Body_Content div.DTE_Field.block {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label,
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input, div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > label,
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+div.DTE {
+  font-size: 0.91em;
+}
+div.DTE div.DTE_Header {
+  display: none;
+}
+div.DTE div.DTE_Body {
+  padding: 0;
+}
+div.DTE div.DTE_Body div.DTE_Body_Content {
+  overflow: hidden;
+}
+div.DTE div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+  padding: 5px 5%;
+}
+div.DTE div.DTE_Footer {
+  display: none;
+}
+div.DTE div.DTE_Form_Error {
+  padding-top: 1em;
+  color: red;
+  display: none;
+  color: #b11f1f;
+}
+div.DTE div.DTE_Processing_Indicator {
+  top: 12px;
+  right: 2px;
+  font-size: 0.8em;
+}
+div.DTE div.DTE_Form_Buttons {
+  text-align: right;
+  padding: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+div.DTE div.DTE_Field.full label,
+div.DTE div.DTE_Field.full > div {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+div.DTE_Field_Type_datatable div.dt-search,
+div.DTE_Field_Type_datatable div.dataTables_filter {
+  padding-bottom: 0.5em;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  float: none;
+}
+div.DTE_Field_Type_datatable div.dt-buttons button {
+  margin-bottom: 3px;
+}
+
+div.DTE.DTE_Bubble div.DTE_Header {
+  display: block;
+  font-size: 18px;
+}

src/main/resources/static/plugins/datatable_editor/css/editor.semanticui.css

@@ -0,0 +1,692 @@
+html.dark div.DTED_Lightbox_Close:after {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+html.dark div.DTED_Lightbox_Close:hover:after {
+  color: white !important;
+}
+
+div.DTE div.DTE_Form_Error {
+  display: none;
+  color: #b11f1f;
+  float: left;
+  padding-top: 11px;
+}
+div.DTE div.DTE_Form_Buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+div.DTE label {
+  padding-top: 9px !important;
+  align-self: flex-start;
+  justify-content: flex-end;
+}
+div.DTE div.eight.wide.field {
+  flex-direction: column;
+}
+div.DTE div.DTE_Field_InputControl {
+  width: 100%;
+  margin: 0 !important;
+}
+div.DTE div.ui.message:empty {
+  display: none;
+}
+
+div.DTE_Field div.ui.message {
+  width: 100%;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+  margin-top: 0;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+  font-size: 0.85em;
+  line-height: 1.35em;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field.block {
+  display: block !important;
+}
+div.DTE_Field.block label,
+div.DTE_Field.block > div {
+  justify-content: flex-start;
+  width: 100% !important;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE.DTE_Inline.ui.form div.DTE_Field {
+  width: 100%;
+  margin: 0 !important;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field div.DTE_Field_Input {
+  width: 100% !important;
+  box-sizing: border-box;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field > label {
+  display: none !important;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE.DTE_Inline.ui.form.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+  transition: top 0.5s ease-in-out 0s;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  min-width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+  margin-top: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+  cursor: pointer;
+  z-index: 12;
+  top: 6px;
+  right: 6px;
+  line-height: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover:after {
+  color: black;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7); /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7))); /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner {
+  background-color: var(--dt-html-background);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+html.dark div.DTE_Bubble div.DTE_Bubble_Triangle,
+html[data-bs-theme=dark] div.DTE_Bubble div.DTE_Bubble_Triangle {
+  background-color: var(--dt-html-background);
+  border-left-color: rgba(255, 255, 255, 0.15);
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+div.DTE_Bubble {
+  z-index: 1001;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  position: initial;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form {
+  position: initial;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  flex-direction: column;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  justify-content: flex-start;
+  width: 100% !important;
+  float: none;
+  clear: both;
+  text-align: left;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
+  padding-bottom: 4px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:first-child label {
+  padding-top: 0 !important;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  font-size: 18px;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  margin: 0;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  text-align: center;
+  padding: 1em 2em;
+  line-height: 1.1em;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+html.dark div.DTE div.editor_upload div.drop,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop {
+  border: 3px dashed rgba(255, 255, 255, 0.15);
+  color: inherit;
+}
+html.dark div.DTE div.editor_upload div.drop.over,
+html[data-bs-theme=dark] div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed rgba(255, 255, 255, 0.5);
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.DTE_Field_Type_datatable label {
+  display: block !important;
+  text-align: right;
+}
+div.DTE_Field_Type_datatable div.dt-search {
+  margin-top: 1em;
+}
+div.DTE_Field_Type_datatable div.dt-info {
+  margin-top: 0.75em;
+}
+div.DTE_Field_Type_datatable div.dt-search,
+div.DTE_Field_Type_datatable div.dataTables_filter {
+  display: block !important;
+  text-align: left;
+  margin-bottom: 6px;
+}
+div.DTE_Field_Type_datatable div.dt-search input,
+div.DTE_Field_Type_datatable div.dataTables_filter input {
+  width: 100% !important;
+}
+div.DTE_Field_Type_datatable div.dt-buttons {
+  margin-bottom: 6px;
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons button {
+  width: 100%;
+}
+div.DTE_Field_Type_datatable div.dt-buttons:empty {
+  display: none;
+}
+div.DTE_Field_Type_datatable div.dt-info,
+div.DTE_Field_Type_datatable div.dataTables_info {
+  font-size: 0.8em;
+  font-weight: normal;
+  line-height: 1.3em;
+}
+div.DTE_Field_Type_datatable div.dt-info span.select-info,
+div.DTE_Field_Type_datatable div.dataTables_info span.select-info {
+  display: block;
+}
+div.DTE_Field_Type_datatable div.dataTables_wrapper div.dataTables_paginate {
+  margin-top: 0.3em;
+  text-align: center;
+}
+div.DTE_Field_Type_datatable div.dt-container > div.row:nth-child(1) {
+  display: none;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 42px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+html.dark div.DTE_Processing_Indicator span,
+html.dark div.DTE_Processing_Indicator:before,
+html.dark div.DTE_Processing_Indicator:after,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator span,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:before,
+html[data-bs-theme=dark] div.DTE_Processing_Indicator:after {
+  display: block;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+table.dataTable tr.dte-highlight {
+  animation-duration: 1s;
+  animation-name: dte-highlight;
+}
+table.dataTable tr.dte-inlineAdd td,
+table.dataTable tr.dte-inlineAdd th {
+  vertical-align: top;
+}
+
+@keyframes dte-highlight {
+  from {
+    box-shadow: 0 0 0 rgb(235, 121, 15);
+  }
+  50% {
+    box-shadow: 0 0 5px rgb(235, 121, 15);
+  }
+  to {
+    box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+  }
+}
+div.DTE div.DTE_Processing_Indicator {
+  top: 22px;
+  right: 12px;
+}
+
+div.DTE_Field_Type_checkbox div.DTE_Field_InputControl,
+div.DTE_Field_Type_radio div.DTE_Field_InputControl {
+  padding-top: 7px;
+}
+div.DTE_Field_Type_checkbox > div > div,
+div.DTE_Field_Type_radio > div > div {
+  margin-bottom: 0.2em;
+}
+div.DTE_Field_Type_checkbox > div > div input,
+div.DTE_Field_Type_radio > div > div input {
+  vertical-align: baseline !important;
+}
+div.DTE_Field_Type_checkbox > div > div label,
+div.DTE_Field_Type_radio > div > div label {
+  margin-left: 0.75em;
+  padding-top: 11px !important;
+}

src/main/resources/static/plugins/datatable_editor/css/envelope.scss

@@ -0,0 +1,73 @@
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+
+div.DTED_Envelope_Wrapper {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	height: 100%;
+	z-index: 11;
+	display: none;
+	overflow: hidden;
+
+	// Create a shadow display at the top of the evelope to make it look like it has
+	// come from under the element that it is attached to/ Left and right to give a
+	// slight fade and the two ends
+	div.DTED_Envelope_Shadow {
+		position: absolute;
+		top: -10px;
+		left: 10px;
+		right: 10px;
+		height: 10px;
+		z-index: 10;
+		box-shadow: 0 0 20px black;
+	}
+
+	div.DTED_Envelope_Container {
+		position: absolute;
+		top: 0;
+		left: 5%;
+		width: 90%;
+
+		border-left: 1px solid #777;
+		border-right: 1px solid #777;
+		border-bottom: 1px solid #777;
+		box-shadow: 3px 3px 10px #555;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		background-color: white;
+
+		div.DTE_Processing_Indicator {
+			right: 36px;
+		}
+
+		div.DTE_Footer {
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+		}
+
+		div.DTED_Envelope_Close {
+			@include close-icon();
+		}
+	}
+}
+
+
+div.DTED_Envelope_Background {
+	@include overlay-background();
+}
+
+html.dark {
+	div.DTED_Envelope_Wrapper {
+		div.DTED_Envelope_Container {
+			border-left: 1px solid rgba(255, 255, 255, 0.15);
+			border-right: 1px solid rgba(255, 255, 255, 0.15);
+			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+			box-shadow: 3px 3px 10px #000000;
+			background-color: var(--dt-html-background);
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/fields.scss

@@ -0,0 +1,417 @@
+
+$input-border: 1px solid #aaa;
+
+$input-border: 1px solid #aaa;
+
+// Generic field styling
+div.DTE_Field {
+	input,
+	textarea {
+		box-sizing: border-box;
+		background-color: white;
+		-webkit-transition: background-color ease-in-out .15s;
+		        transition: background-color ease-in-out .15s;
+	}
+
+	input:focus,
+	textarea:focus {
+		background-color: #ffffee; 
+	}
+
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"] {
+		padding: 5px 4px;
+		width: 100%;
+
+		// Chrome 83 introduces some really ugly borders
+		border: $input-border;
+		border-radius: 3px;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		vertical-align: middle;
+	}
+
+	select {
+		padding: 5px 4px;
+		border-radius: 3px;
+		border: $input-border;
+		background: white;
+		max-width: 100%;
+		color: inherit;
+	}
+
+	label div.DTE_Label_Info {
+		font-size: 0.85em;
+		margin-top: 0.25em;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Info,
+	div.DTE_Field_Message,
+	div.DTE_Field_Error {
+		font-size: 11px;
+		line-height: 1em;
+		margin-top: 5px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Error {
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.multi-value {
+		display: none;
+		border: 1px dotted #666;
+		border-radius: 3px;
+		padding: 5px;
+		background-color: #fafafa;
+		cursor: pointer;
+
+		span {
+			font-size: 0.8em;
+			line-height: 1.25em;
+			display: block;
+			color: #666;
+		}
+
+		&.multi-noEdit {
+			border: 1px solid #ccc;
+			cursor: auto;
+			background-color: #fcfcfc;
+
+			&:hover {
+				background-color: #fcfcfc;
+			}
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	&.disabled {
+		color: grey;
+
+		div.multi-value {
+			cursor: default;
+			border: 1px dotted #aaa;
+			background-color: transparent;
+		}
+	}
+
+	div.multi-restore {
+		display: none;
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+		color: #3879d9;
+
+		&:hover {
+			text-decoration: underline;
+			cursor: pointer;
+		}
+	}
+}
+
+// Specific field type styling
+div.DTE_Field_Type_textarea {
+	textarea {
+		padding: 3px;
+		width: 100%;
+		height: 80px;
+		border: $input-border;
+		max-width: 100%;
+		max-height: 75vh;
+	}
+}
+
+div.DTE_Field.DTE_Field_Type_date {
+	img {
+		vertical-align: middle;
+		cursor: pointer;
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_Input {
+		padding-top: 1px;
+
+		> div > div {
+			margin-bottom: 0.25em;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			input {
+			}
+
+			label {
+				margin-left: 0.75em;
+				vertical-align: middle;
+			}
+		}
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-layout-row:nth-child(2) > div.dt-layout-cell {
+		padding-top: 0;
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+		opacity: 0.8;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-search {
+		margin-top: 4px;
+	}
+
+	div.dt-search,
+	div.dataTables_filter {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+
+		input {
+			width: 100%;
+		}
+	}
+
+	div.dt-buttons {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+		float: none;
+
+		button {
+			width: 100%;
+			margin-left: 0;
+		}
+
+		&:empty {
+			padding-bottom: 0;
+		}
+	}
+
+	div.dataTables_paginate {
+		float: none;
+		text-align: center;
+		font-size: 0.8em;
+	}
+
+	table.dataTable {
+		&.no-footer {
+			border-bottom: 1px solid #aaa !important;
+		}
+
+		thead {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-bottom: 1px solid #aaa;
+			}
+		}
+
+		tbody {
+			background-color: white;
+
+			th:first-child,
+			td:first-child {
+				border-left: 1px solid #aaa;
+			}
+
+			th:last-child,
+			td:last-child {
+				border-right: 1px solid #aaa;
+			}
+		}
+
+		tfoot {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-top: 1px solid #aaa;
+			}
+		}
+	}
+
+	div.dataTables_scrollHead {
+		table.dataTable,
+		table.dataTable thead th,
+		table.dataTable thead td {
+			border-bottom: none !important;
+		}
+	}
+
+	div.dataTables_scrollBody {
+		border: 1px solid #aaa !important;
+		border-radius: 3px;;
+
+		table.dataTable {
+			border-bottom: none !important;
+
+			tbody {
+				th:first-child,
+				td:first-child {
+					border-left: none;
+				}
+	
+				th:last-child,
+				td:last-child {
+					border-right: none;
+				}
+			}
+		}
+	}
+}
+
+html.dark {
+	div.DTE_Field {
+		input,
+		textarea {
+			color: inherit;
+			background-color: rgb(33, 37, 41);
+		}
+	
+		input:focus,
+		textarea:focus {
+			background-color: rgb(24, 30, 36);
+		}
+	
+		input[type="color"],
+		input[type="date"],
+		input[type="datetime"],
+		input[type="datetime-local"],
+		input[type="email"],
+		input[type="month"],
+		input[type="number"],
+		input[type="password"],
+		input[type="search"],
+		input[type="tel"],
+		input[type="text"],
+		input[type="time"],
+		input[type="url"],
+		input[type="week"] {
+			border: 1px solid rgba(255, 255, 255, 0.15);
+		}
+	
+		select {
+			background: rgb(33, 37, 41);
+		}
+	
+		div.DTE_Field_Error {
+			color: #b11f1f;
+		}
+	
+		div.multi-value {
+			border: 1px dotted rgba(255, 255, 255, 0.15);
+			background-color: rgba(255, 255, 255, 0.05);
+	
+			span {
+				color: #b9b9b9;
+			}
+	
+			&.multi-noEdit {
+				border: 1px solid rgba(255, 255, 255, 0.15);
+				background-color: rgba(255, 255, 255, 0.05);
+	
+				&:hover {
+					background-color: rgba(255, 255, 255, 0.05);
+				}
+			}
+	
+			&:hover {
+				background-color: rgba(255, 255, 255, 0.1);
+			}
+		}
+	
+		&.disabled {
+			color: grey;
+	
+			div.multi-value {
+				border: 1px dotted rgba(255, 255, 255, 0.15)
+			}
+		}
+	
+		div.multi-restore {
+			color: rgb(110, 168, 254);
+		}
+	}
+	
+	// Specific field type styling
+	div.DTE_Field_Type_textarea {
+		textarea {
+			border: 1px solid rgba(255, 255, 255, 0.15);
+		}
+	}
+
+	div.DTE_Field_Type_datatable {
+		table.dataTable {
+			&.no-footer {
+				border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
+			}
+	
+			thead {
+				th, td {
+					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+	
+			tbody {
+				background-color: rgb(33, 37, 41);
+	
+				th:first-child,
+				td:first-child {
+					border-left: 1px solid rgba(255, 255, 255, 0.15);
+				}
+	
+				th:last-child,
+				td:last-child {
+					border-right: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+	
+			tfoot {
+				th, td {
+					border-top: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+		}
+	
+		div.dataTables_scrollBody {
+			border: 1px solid rgba(255, 255, 255, 0.15) !important;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/inline.scss

@@ -0,0 +1,79 @@
+
+// Inline form editing
+// Hide the label and allow the field to take the full width
+div.DTE_Inline {
+	position: relative;
+	display: table;
+	width: 100%;
+
+	div.DTE_Inline_Field,
+	div.DTE_Inline_Buttons {
+		display: table-cell;
+		vertical-align: middle;
+
+		div.DTE_Field {
+			padding: 0;
+
+			>label {
+				display: none;
+			}
+
+			input[type="color"],
+			input[type="date"],
+			input[type="datetime"],
+			input[type="datetime-local"],
+			input[type="email"],
+			input[type="month"],
+			input[type="number"],
+			input[type="password"],
+			input[type="search"],
+			input[type="tel"],
+			input[type="text"],
+			input[type="time"],
+			input[type="url"],
+			input[type="week"] {
+				width: 100%;
+			}
+		}
+
+		div.DTE_Form_Buttons button {
+			margin: -6px 0 -6px 4px;
+			padding: 5px;
+		}
+	}
+
+	// Have the input types take up full space, taking into account the cell padding
+	div.DTE_Field input[type="color"],
+	div.DTE_Field input[type="date"],
+	div.DTE_Field input[type="datetime"],
+	div.DTE_Field input[type="datetime-local"],
+	div.DTE_Field input[type="email"],
+	div.DTE_Field input[type="month"],
+	div.DTE_Field input[type="number"],
+	div.DTE_Field input[type="password"],
+	div.DTE_Field input[type="search"],
+	div.DTE_Field input[type="tel"],
+	div.DTE_Field input[type="text"],
+	div.DTE_Field input[type="time"],
+	div.DTE_Field input[type="url"],
+	div.DTE_Field input[type="week"] {
+		margin: -6px 0;
+	}
+
+	div.DTE_Field_Error,
+	div.DTE_Form_Error {
+		font-size: 11px;
+		line-height: 1.2em;
+		padding: 0;
+		margin-top: 10px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+}
+
+// Responsive integration
+span.dtr-data div.DTE_Inline {
+	display: inline-table;
+}

src/main/resources/static/plugins/datatable_editor/css/lightbox.scss

@@ -0,0 +1,193 @@
+
+
+div.DTED_Lightbox_Wrapper {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	margin-left: -390px;
+	width: 780px;
+	height: 100%;
+	z-index: 11;
+
+	div.DTED_Lightbox_Container {
+		display: table;
+		height: 100%;
+		width: 100%;
+
+		div.DTED_Lightbox_Content_Wrapper {
+			display: table-cell;
+			vertical-align: middle;
+			width: 100%;
+
+			div.DTED_Lightbox_Content {
+				position: relative;
+				box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+				border-radius: 6px;
+				@include box-sizing(border-box);
+
+				div.DTE {
+					background: white;
+					border-radius: 6px;
+					border: 1px solid #666;
+					background: #fcfcfc;
+					@include box-sizing(border-box);
+
+					div.DTE_Header {
+						right: 0;
+						width: auto;
+						border-top-left-radius: 6px;
+						border-top-right-radius: 6px;
+					}
+					
+					div.DTE_Body_Content {
+						box-sizing: border-box;
+						background: #fcfcfc;
+					}
+
+					div.DTE_Footer {
+						right: 0;
+						width: auto;
+						border-bottom-left-radius: 6px;
+						border-bottom-right-radius: 6px;
+					}
+				}
+
+				div.DTED_Lightbox_Close {
+					@include close-icon();
+				}
+			}
+		}
+	}
+}
+
+div.DTED_Lightbox_Wrapper {
+	div.DTE_Footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	div.DTE_Footer_Content {
+		display: none;
+	}
+
+	div.DTE.inFormError div.DTE_Footer {
+		justify-content: space-between;
+	}
+}
+
+
+div.DTED_Lightbox_Background {
+	@include overlay-background();
+}
+
+
+body.DTED_Lightbox_Mobile {
+	div.DTED_Lightbox_Background {
+		height: 0;
+	}
+
+	div.DTED_Lightbox_Shown {
+		display: none;
+	}
+
+	div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		width: auto;
+		height: auto;
+		margin-left: 0;
+		-webkit-overflow-scrolling: touch;
+
+		div.DTED_Lightbox_Container {
+			display: block;
+			height: 100%;
+
+			div.DTED_Lightbox_Content_Wrapper {
+				display: block;
+				height: 100%;
+
+				div.DTED_Lightbox_Content {
+					border-radius: 0;
+					box-shadow: none;
+					height: 100% !important;
+
+					div.DTE {
+						border-radius: 0;
+						height: 100%;
+
+						div.DTE_Header {
+							border-top-left-radius: 0;
+							border-top-right-radius: 0;
+						}
+
+						div.DTE_Body_Content {
+							padding-bottom: 52px;
+						}
+
+						div.DTE_Footer {
+							border-bottom-left-radius: 0;
+							border-bottom-right-radius: 0;
+						}
+					}
+
+					div.DTED_Lightbox_Close {
+						top: 11px;
+						right: 15px;
+
+						background-color: transparent;
+						border: none;
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width: 780px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 90%;
+		margin-left: 5%;
+	}
+}
+
+@media only screen
+and (max-width: 580px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+	}
+}
+
+
+html.dark {
+	div.DTED_Lightbox_Wrapper {
+		div.DTED_Lightbox_Container {
+			div.DTED_Lightbox_Content_Wrapper {
+				div.DTED_Lightbox_Content {
+					div.DTE {
+						border: 1px solid rgba(255, 255, 255, 0.15);
+						background: var(--dt-html-background);
+						
+						div.DTE_Body_Content {
+							background: var(--dt-html-background);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+
+

src/main/resources/static/plugins/datatable_editor/css/main.scss

@@ -0,0 +1,194 @@
+
+
+// The main form.
+// Most of the styles for display of the main form come from the display
+// controller (lightbox and envelope are the two built in options).
+div.DTE_Body {
+	padding: 52px 0; // space for hte header and footer which are position: absolute
+	
+	div.DTE_Body_Content {
+		position: relative;
+		overflow: auto;
+
+		div.DTE_Form_Info {
+			padding: 1em 1em 0 1em;
+			margin: 0;
+		}
+
+		div.DTE_Field {
+			position: relative;
+			
+			clear: both;
+			padding: 5px 10%;
+			border: 1px solid transparent;
+			border-radius: 3px;
+
+			&:after {
+				display: block;
+				content: ".";
+				height: 0;
+				line-height: 0;
+				clear: both;
+				visibility: hidden;
+			}
+
+			&:hover {
+				background-color: #f9f9f9;
+				border: 1px solid #f3f3f3;
+			}
+
+			>label {
+				float: left;
+				width: 33%;
+				padding-top: 3px;
+			}
+
+			>div.DTE_Field_Input {
+				float: right;
+				width: 66%;
+			}
+
+			// Field in error state
+			&.DTE_Field_StateError { }
+
+			&.full {
+				padding: 5px 0;
+			}
+
+			&.block {
+				>div.DTE_Field_Input {
+					float: none;
+					clear: both;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+html[dir="rtl"] {
+	div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+		> label {
+			float: right;
+		}
+
+		>div.DTE_Field_Input {
+			float: left;
+		}
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+	}
+}
+
+html.dark {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				&:hover {
+					background-color: rgba(255, 255, 255, 0.01);
+					border: 1px solid rgba(255, 255, 255, 0.05);
+				}
+			}
+		}
+	}
+}
+
+// iPad in portrait 
+@media only screen 
+and (max-width : 768px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 10%;
+
+				&.full {
+					padding: 5px 0;
+
+					>label {
+						width: 35.5%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 64.5%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width : 640px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 0;
+
+				&.full {
+					padding: 5px 0;
+
+					>label {
+						width: 40%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 60%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+// For devices with smaller screens, the fields should be shown stacked
+@media only screen 
+and (max-width : 580px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				position: relative;
+				
+				clear: both;
+				padding: 5px 0;
+
+				>label {
+					float: none;
+					width: auto;
+					padding-top: 0;
+				}
+
+				>div.DTE_Field_Input {
+					float: none;
+					width: auto;
+					margin-top: 4px;
+					margin-bottom: 6px;
+				}
+
+				&.full,
+				&.block {
+					padding: 5px 0;
+
+					>label,
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+

src/main/resources/static/plugins/datatable_editor/css/mixins.scss

@@ -0,0 +1,180 @@
+
+
+@function tint( $color, $percent ) {
+	@return mix(white, $color, $percent);
+}
+
+@function shade( $color, $percent ) {
+	@return mix(black, $color, $percent);
+}
+
+
+@mixin border-radius ( $radius ) {
+	border-radius: $radius;
+}
+
+@mixin box-sizing($box-model) {
+	box-sizing: $box-model;
+}
+
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+  @if $inset {
+    box-shadow:inset $top $left $blur $color;
+  } @else {
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin two-stop-gradient($fromColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor 0%, $toColor 100%); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor 0%, $toColor 100%); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin three-stop-gradient($fromColor, $middleColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor, $middleColor, $toColor); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor, $middleColor, $toColor); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor, $middleColor, $toColor);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin radial-gradient ($fromColor, $toColor ) {
+	background: $toColor; /* Fallback */
+	background:     -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */ 
+	background:    -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */ 
+	background:      -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */ 
+	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */ 
+	background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */ 
+	background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */ 
+}
+
+@mixin keyframe ($animation_name) {
+    @-webkit-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-moz-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-o-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @keyframes #{$animation_name} {
+        @content;
+    }
+}
+
+@mixin animation ($duration, $animation) {
+	-webkit-animation-duration: $duration;
+	-webkit-animation-name: $animation;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: linear;
+	-webkit-animation-direction: alternate;
+
+	-moz-animation-duration: $duration;
+	-moz-animation-name: $animation;
+	-moz-animation-fill-mode: forwards;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-timing-function: linear;
+	-moz-animation-direction: alternate;
+	
+	-o-animation-duration: $duration;
+	-o-animation-name: $animation;
+	-o-animation-fill-mode: forwards;
+	-o-animation-iteration-count: infinite;
+	-o-animation-timing-function: linear;
+	-o-animation-direction: alternate;
+	
+	animation-duration: $duration;
+	animation-name: $animation;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-direction: alternate;
+}
+
+@mixin close-icon () {
+	position: absolute;
+	top: 19px;
+	right: 19px;
+	cursor: pointer;
+	z-index: 12;
+
+	&:after {
+		content: '\00d7';
+		color: rgba(0, 0, 0, 0.5);
+		font-weight: bold;
+		font-size: 22px;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	&:hover {
+		&:after {
+			color: black;
+		}
+	}
+}
+
+html.dark div.DTED_Lightbox_Close {
+	&:after {
+		color: rgba(255, 255, 255, 0.5) !important;
+	}
+
+	&:hover {
+		&:after {
+			color: white !important;
+		}
+	}
+}
+
+@mixin overlay-background () {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	@include radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) );
+
+	z-index: 10;
+
+	// IE8- doesn't support RGBA and jQuery uses `filter:` for the fade-in
+	// animation, so we need a child element that is used just for the display
+	>div {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+
+		// IE7-
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+		
+		// IE8
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+	}
+
+	// IE9 has both filter and rgba support, so we need a hack to disable the filter
+	>div:not([dummy]) {
+		filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
+	}
+}
+
+@mixin background-transision () {
+	-webkit-transition: background-color 500ms linear;
+	   -moz-transition: background-color 500ms linear;
+	    -ms-transition: background-color 500ms linear;
+	     -o-transition: background-color 500ms linear;
+	transition: background-color 500ms linear;
+}
+

src/main/resources/static/plugins/datatable_editor/css/processing.scss

@@ -0,0 +1,119 @@
+
+div.DTE {
+	div.DTE_Processing_Indicator {
+		position: absolute;
+		top: 17px;
+		right: 42px;
+		height: 2em;
+		width: 2em;
+		z-index: 20;
+		font-size: 12px;
+		display: none;
+
+		-webkit-transform: translateZ(0);
+		-ms-transform: translateZ(0);
+		transform: translateZ(0);
+	}
+
+	&.processing {
+		div.DTE_Processing_Indicator {
+			display: block;
+		}
+
+		div.DTE_Field div.DTE_Processing_Indicator {
+			display: none;
+		}
+	}
+
+	div.DTE_Field div.DTE_Processing_Indicator {
+		top: 13px;
+		right: 0;
+		font-size: 8px;
+	}
+
+	&.DTE_Inline {
+		div.DTE_Processing_Indicator {
+			top: 5px;
+			right: 6px;
+			font-size: 6px;
+		}
+	}
+
+	&.DTE_Bubble {
+		div.DTE_Processing_Indicator {
+			top: 10px;
+			right: 14px;
+			font-size: 8px;
+		}
+	}
+
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		background: black;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 0, 0, 0, 0.4 );
+		background-color: rgba( 0, 0, 0, 0.1 );
+
+		-webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+		animation: editorProcessing 0.9s infinite ease-in-out;
+	}
+	
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		position: absolute;
+		top: 0;
+		content: '';
+	}
+	
+	div.DTE_Processing_Indicator:before {
+		left: -1em;
+		-webkit-animation-delay: -0.3s;
+		animation-delay: -0.3s;
+	}
+
+	div.DTE_Processing_Indicator span {
+		-webkit-animation-delay: -0.15s;
+		animation-delay: -0.15s;
+	}
+	
+	div.DTE_Processing_Indicator:after {
+		left: 1em;
+	}
+
+	@-webkit-keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+			transform: scale(1, 1.5);
+		}
+	}
+	@keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+		 transform: scale(1, 1.5);
+		}
+	}
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 255, 255, 255, 0.25 );
+		background-color: rgba( 255, 255, 255, 0.1 );
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/bubble.scss

@@ -0,0 +1,153 @@
+
+// Bubble form editing
+// Very similar to the main form, but attached to a particular node and the
+// form layout is slightly different with the fields container and buttons
+// making up a table of a single row and two columns. This allows the buttons
+// to be removed from the display and under this condition the fields will
+// take up the full width available.
+div.DTE_Bubble {
+	position: absolute;
+	z-index: 11;
+	margin-top: -6px;
+	opacity: 0;
+	transition: top 0.5s ease-in-out 0s;
+
+	div.DTE_Bubble_Liner {
+		position: absolute;
+		bottom: 0;
+		border: 1px solid black;
+		min-width: 300px;
+		margin-left: -150px;
+		background-color: white;
+		box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+		border-radius: 6px;
+		border: 1px solid #666;
+		padding: 1em;
+		background: #fcfcfc;
+		@include box-sizing(border-box);
+
+		div.DTE_Bubble_Table {
+			width: 100%;
+
+			> form {
+				div.DTE_Form_Content {
+					padding: 0;
+
+					div.DTE_Field {
+						position: relative;
+						margin-bottom: 0.5em;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+
+						> label {
+							padding-top: 0;
+							margin-bottom: 0;
+						}
+
+						> div {
+							padding: 0;
+							margin-top: 0.5em;
+
+							input {
+								margin: 0;
+							}
+						}
+					}
+				}
+			}
+			
+			div.DTE_Form_Buttons {
+				text-align: right;
+				margin-top: 1em;
+
+				button {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		div.DTE_Header {
+			border-top-left-radius: 5px;
+			border-top-right-radius: 5px;
+		}
+
+		div.DTE_Header + div.DTE_Form_Info,
+		div.DTE_Header + div.DTE_Bubble_Table {
+			padding-top: 1em;
+		}
+
+
+		div.DTE_Form_Error {
+			float: none;
+			display: none;
+			padding: 0;
+			margin-bottom: 0.5em;
+		}
+
+		div.DTE_Bubble_Close {
+			@include close-icon();
+			top: 6px;
+			right: 6px;
+			line-height: 18px;
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		position: absolute;
+		height: 10px;
+		width: 10px;
+		top: -6px;
+		background-color: white;
+		border: 1px solid #666;
+		border-top: none;
+		border-right: none;
+
+		-webkit-transform: rotate(-45deg);
+		   -moz-transform: rotate(-45deg);
+		    -ms-transform: rotate(-45deg);
+		     -o-transform: rotate(-45deg);
+		        transform: rotate(-45deg);
+	}
+
+	&.below {
+		div.DTE_Bubble_Liner {
+			top: 10px;
+			bottom: auto;
+		}
+
+		div.DTE_Bubble_Triangle {
+			top: 4px;
+			-webkit-transform: rotate(135deg);
+			   -moz-transform: rotate(135deg);
+			    -ms-transform: rotate(135deg);
+			     -o-transform: rotate(135deg);
+			        transform: rotate(135deg);
+		}
+	}
+}
+
+div.DTE_Bubble_Background {
+	@include overlay-background();
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE_Bubble {
+		div.DTE_Bubble_Liner {
+			background-color: var(--dt-html-background);
+			border: 1px solid rgba(255, 255, 255, 0.15);
+
+			div.DTE_Bubble_Close::after {
+				color: rgba(255, 255, 255, 0.5);
+			}
+		}
+
+		div.DTE_Bubble_Triangle {
+			background-color: var(--dt-html-background);
+			border-left-color: rgba(255, 255, 255, 0.15);
+			border-bottom-color: rgba(255, 255, 255, 0.15);
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/datatable.scss

@@ -0,0 +1,30 @@
+
+// Row highlighting on edit styles
+
+table.dataTable {
+	tr.dte-highlight {
+		animation-duration: 1s;
+		animation-name: dte-highlight;
+	}
+
+	tr.dte-inlineAdd {
+		td,
+		th {
+			vertical-align: top;
+		}
+	}
+}
+
+@keyframes dte-highlight {
+	from {
+		box-shadow: 0 0 0 rgba(235, 121, 15, 1);
+	}
+
+	50% {
+		box-shadow: 0 0 5px rgba(235, 121, 15, 1);
+	}
+  
+	to {
+		box-shadow: 0 0 10px rgba(235, 121, 15, 0);
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.bootstrap.scss

@@ -0,0 +1,272 @@
+
+
+@import 'mixins.scss';
+
+div.DTE {
+	div.DTE_Form_Error {
+		color: #b11f1f;
+	}
+
+	div.DTE_Form_Buttons {
+		display: flex;
+		justify-content: flex-end;
+
+		button {
+			margin-left: 0.5em;
+		}
+	}
+}
+
+div.modal div.DTE {
+	div.DTE_Form_Error {
+		display: none;
+		float: left;
+		padding-top: 7px;
+	}
+}
+
+
+div.DTE_Field {
+	position: relative;
+
+	div.multi-value,
+	div.multi-restore {
+		display: none;
+		cursor: pointer;
+
+		span {
+			display: block;
+			color: #666;
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	div.multi-restore {
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+	}
+
+	&:after {
+		display: block;
+		content: ".";
+		height: 0;
+		line-height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+	
+	div:not([data-dte-e="msg-error"]) {
+		color: inherit;
+	}
+}
+
+div.DTE_Body {
+	div.DTE_Body_Content {
+		div.DTE_Field {
+			&.block {
+				label,
+				>div {
+					text-align: left;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+
+// // Inline editing
+@import 'inline.scss';
+div.DTE_Inline {
+	div.DTE_Field {
+		width: 100%;
+
+		> div {
+			width: 100%;
+			padding: 0;
+		}
+
+		input.form-control {
+			height: 30px;
+		}
+
+		div.help-block {
+			display: none;
+			margin-top: 10px;
+			margin-bottom: 0;
+		}
+	}
+
+	&.DTE_Processing:after {
+		top: 5px;
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.controls {
+		margin-top: 0.4em;
+	}
+
+	input {
+		vertical-align: middle;
+	}
+
+	div.DTE_Field div label {
+		margin-left: 0.75em;
+		margin-bottom: 0;
+		vertical-align: middle;
+		font-weight: normal;
+	}
+}
+
+
+// Bubble form editing
+@import 'bubble.scss';
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
+		border-radius: 6px;
+		padding: 1em;
+		border: 1px solid rgba( 0, 0, 0, .2 );
+
+		div.DTE_Bubble_Table {
+			> form {
+				div.DTE_Form_Content {
+					div.DTE_Field {
+						> label,
+						> div {
+							width: 100%;
+							max-width: 100%;
+							float: none;
+							clear: both;
+							text-align: left;
+							flex: none;
+						}
+
+						> label {
+							padding: 0 0 4px 0;
+						}
+					}
+				}
+			}
+
+			div.DTE_Form_Buttons {
+				text-align: right;
+				margin-top: 0;
+			}
+		}
+
+		div.DTE_Header {
+			border-bottom: none;
+			font-size: 14px;
+			width: 100%;
+			padding: 0;
+
+			// Bubble editing has its own close button
+			button.close,
+			button.btn-close {
+				display: none;
+			}
+		}
+
+		div.DTE_Bubble_Close {
+			&:after {
+				margin-top: -2px;
+				display: block;
+			}
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		border-bottom: 1px solid rgba( 0, 0, 0, .2 );
+		border-left: 1px solid rgba( 0, 0, 0, .2 );
+	}
+}
+
+div.DTE_Bubble_Background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 10;
+	background-color: rgba( 0, 0, 0, 0.05 );
+}
+
+
+@import 'upload.scss';
+
+div.DTE div.editor_upload {
+	button.btn,
+	input[type=file] {
+		height: auto;
+	}
+
+	ul li button {
+		padding-bottom: 8px;
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-search {
+		margin-top: 0.75em;
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		text-align: left;
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+		font-weight: normal;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-buttons {
+		padding-bottom: 0.5em;
+		width: 100%;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.dataTables_wrapper div.dataTables_paginate {
+		text-align: center;
+	}
+
+	div.dt-container > div.row:nth-child(1) {
+		display: none;
+	}
+}
+
+@media (max-width: 768px) {
+	div.DTE_Field_Type_datatable {
+		label.control-label {
+			text-align: left;
+		}
+	}
+}
+
+
+@import 'processing.scss';
+@import 'datatable.scss';
+
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+	top: 13px;
+	right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+	top: 52px;
+	right: 12px;
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.bootstrap4.scss

@@ -0,0 +1,123 @@
+
+
+@import 'editor.bootstrap.scss';
+
+// No nested element, so can't use `card-block`
+div.multi-value,
+div.multi-restore {
+	padding: 0.5em;
+
+	span {
+		line-height: 1.2em;
+	}
+}
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		div.DTE_Bubble_Table {
+			> form div.DTE_Form_Content {
+				margin: 0 1em;
+			}
+
+			div.DTE_Form_Buttons {
+				margin-top: 1em;
+			}
+		}
+	}
+}
+div.DTE_Inline {
+	div.DTE_Field {
+		width: 100%;
+		margin: 0;
+
+		> div {
+			max-width: 100%;
+			flex: none;
+		}
+
+		input {
+			margin: -5px 0 -10px !important;
+		}
+
+		div.form-text {
+			margin-top: 1em;
+
+			&:empty {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+div.DTE_Body {
+	div.DTE_Body_Content {
+		div.DTE_Field {
+			&.block {
+				label,
+				>div {
+					max-width: 100%;
+					flex: 0 0 100%;
+				}
+			}
+		}
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_InputControl {
+		padding-top: 5px;
+	}
+
+	div {
+		label {
+			margin-bottom: 0.2em;
+			margin-left: 0.75em;
+			vertical-align: middle;
+		}
+	}
+}
+
+div.DTE div.DTE_Processing_Indicator {
+	top: 20px;
+	right: 36px;
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-info,
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 0;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-buttons {
+		padding-bottom: 0.5em;
+		width: 100%;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.dt-container,
+	div.dataTables_wrapper {
+		table.dataTable {
+			border: 1px solid #ced4da;
+			border-radius: 3px;
+
+			thead th,
+			tbody td {
+				border-top: none;
+			}
+		}
+
+		div.dataTables_paginate ul.pagination {
+			justify-content: center;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.bootstrap5.scss

@@ -0,0 +1,128 @@
+
+
+@import 'editor.bootstrap.scss';
+
+// No nested element, so can't use `card-block`
+div.multi-value,
+div.multi-restore {
+	padding: 0.5em;
+
+	span {
+		line-height: 1.2em;
+	}
+}
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		div.DTE_Bubble_Table {
+			> form div.DTE_Form_Content {
+				margin: 0 1em;
+			}
+
+			div.DTE_Form_Buttons {
+				margin-top: 1em;
+			}
+		}
+	}
+}
+div.DTE_Inline {
+	div.DTE_Field {
+		width: 100%;
+		margin: 0;
+		
+		> div {
+			max-width: 100%;
+			flex: none;
+		}
+		
+		input {
+			font-size: 1em;
+			margin: -5px 0 -10px !important;
+		}
+
+		div.form-text {
+			margin-top: 1em;
+
+			&:empty {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+div.DTE_Body {
+	div.DTE_Body_Content {
+		div.DTE_Field {
+			&.block {
+				label,
+				>div {
+					max-width: 100%;
+					flex: 0 0 100%;
+				}
+			}
+		}
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_InputControl {
+		padding-top: 5px;
+	}
+
+	div {
+		label {
+			margin-left: 0.75em;
+			vertical-align: middle;
+		}
+	}
+}
+
+div.DTE div.DTE_Processing_Indicator {
+	top: 20px;
+	right: 36px;
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-search,
+	div.dataTables_filter {
+		padding-bottom: 0.5em;
+	}
+
+	div.dt-buttons {
+		padding-bottom: 0.5em;
+		width: 100%;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.dt-search,
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 0;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-container,
+	div.dataTables_wrapper {
+		table.dataTable {
+			border: 1px solid var(--bs-border-color);
+			border-radius: 3px;
+
+			thead th,
+			tbody td {
+				border-top: none;
+			}
+		}
+
+		div.dataTables_paginate ul.pagination {
+			justify-content: center;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.bulma.scss

@@ -0,0 +1,121 @@
+
+
+@import 'mixins.scss';
+
+// Inline editing
+@import 'inline.scss';
+
+// Bubble form editing
+@import 'bubble.scss';
+
+@import 'upload.scss';
+
+@import 'processing.scss';
+@import 'datatable.scss';
+
+div.modal-content {
+	padding: 20px;
+	background: white;
+	border-radius: 5px;
+
+	div.modal-header {
+		padding-bottom: 20px;
+	}
+
+	div.modal-footer {
+		padding-top: 6px;
+	}
+
+	div.dt-buttons {
+		margin-top: 1em;
+	}
+
+	div.dataTables_info {
+		font-weight: 1;
+		font-size: 0.8em;
+		padding-left: 2px;
+
+		span.select-item {
+			padding-left: 0.5em;
+		}
+	}
+}
+
+div.DTE_Form_Buttons {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 10px;
+
+	button {
+		margin-left: 0.5em;
+	}
+}
+
+div.card {
+	border-color: #888;
+}
+
+table.dataTable {
+	div.field {
+		margin-bottom: 0px;
+
+		input.input {
+			padding: 0px;
+		}
+		input.is-small {
+			font-size: 1em;
+			height: 2em;
+		}
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div {
+		label {
+			margin-left: 0.75em;
+		}
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-search {
+		margin-top: 0.5em;
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		margin-top: 0.5em;
+		text-align: left;
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+		font-weight: normal;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-buttons {
+		padding-bottom: 0.5em;
+		width: 100%;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.column:empty {
+		display: none;
+	}
+}
+
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		div.DTE_Header {
+			font-size: 18px;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.dataTables.scss

@@ -0,0 +1,200 @@
+
+@import 'mixins.scss';
+
+
+div.DTE {
+	position: relative;
+
+	div.DTE_Header {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 52px;
+		width: 100%;
+		background-color: #e8e9eb;
+		border-bottom: 1px solid rgba(0,0,0, 0.15);
+		padding: 16px 10px 2px 16px;
+		font-size: 1.3em;
+		@include box-sizing(border-box);
+	}
+	
+	div.DTE_Body {
+		position: relative;
+	}
+
+	div.DTE_Footer {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 52px;
+		width: 100%;
+		background-color: #e8e9eb;
+		border-top: 1px solid rgba(0,0,0, 0.15);
+		padding: 10px;
+		@include box-sizing(border-box);
+	}
+
+	div.DTE_Form_Info {
+		margin-bottom: 0.5em;
+		display: none;
+	}
+
+	div.DTE_Form_Content {
+		position: relative;
+		padding: 1em;
+	}
+
+	div.DTE_Form_Error {
+		float: left;
+		padding: 5px;
+		display: none;
+		color: rgb(220, 53, 69);
+
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	div.DTE_Form_Buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	button.btn,
+	div.DTE_Form_Buttons button {
+		position: relative;
+		text-align: center;
+		display: block;
+		margin-top: 0;
+		padding: 0.5em 1em;
+		cursor: pointer;
+		margin-left: 0.75em;
+		color: #111;
+
+		font-size: 14px;
+		line-height: 1em;
+		white-space: nowrap;
+		border: 1px solid #999;
+
+		@include border-radius( 2px );
+		@include box-shadow( 1px, 1px, 3px, #ccc );
+		@include two-stop-gradient( #ffffff, #dcdcdc );
+
+		&:hover {
+			border: 1px solid #666;
+			@include box-shadow( 1px, 1px, 3px, #999 );
+			@include two-stop-gradient( #eaeaea, #cccccc );
+		}
+
+		&:active {
+			@include box-shadow( 1px, 1px, 3px, #999, true );
+		}
+
+		&:focus {
+			border: 1px solid #426c9e;
+			text-shadow: 0 1px 0 #c4def1;
+			@include two-stop-gradient(#bddef4, #79ace9);
+			outline: none;
+
+			&:after {
+				// Can't animate the background gradient, so we use a white block
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: white;
+				display: block;
+				content: " ";
+
+				@include animation( 1s, buttonPulse );
+			}
+		}
+	}
+
+	&.DTE_Action_Create {}
+
+	&.DTE_Action_Edit {}
+
+	&.DTE_Action_Remove div.DTE_Body_Content {
+		text-align: center;
+		padding: 20px 0;
+	}
+}
+
+@include keyframe( buttonPulse ) {
+    0% { opacity: 0; }
+    100% { opacity: 0.2; }
+}
+
+// TableTools container position for the default Editor styles
+div.DTTT_container {
+	float: left;
+}
+
+html.dark {
+	div.DTE {
+		div.DTE_Header {
+			background-color: rgba(0, 0, 0, 0.1);
+			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+		}
+		
+		div.DTE_Footer {
+			background-color: rgba(0, 0, 0, 0.1);
+			border-top: 1px solid rgba(255, 255, 255, 0.15);
+		}
+
+		div.DTE_Form_Error {
+			color: rgb(220, 53, 69);
+		}
+
+		button.btn,
+		div.DTE_Form_Buttons button {
+			box-shadow: none;
+			background-image: none;
+			background-color: rgba(255, 255, 255, 0.15);
+			border: 1px solid rgba(255, 255, 255, 0.15);
+			color: inherit;
+
+			&:hover {
+				background-color: rgba(255, 255, 255, 0.2);
+				border: 1px solid rgba(255, 255, 255, 0.2);
+			}
+
+			&:active {
+				@include box-shadow( 1px, 1px, 3px, #1d1d1d, true );
+			}
+
+			&:focus {
+				border: 1px solid rgba(255, 255, 255, 0.25);
+				text-shadow: none;
+				background: rgb(0, 81, 202);
+				color: white;
+
+				&:after {
+					background: none;
+				}
+			}
+		}
+	}
+}
+
+@import 'fields.scss';
+@import 'main.scss';
+@import 'bubble.scss';
+@import 'inline.scss';
+@import 'lightbox.scss';
+@import 'envelope.scss';
+@import 'datatable.scss';
+@import 'upload.scss';
+@import 'processing.scss';
+
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		div.DTE_Header + div.DTE_Form_Info,
+		div.DTE_Header + div.DTE_Bubble_Table {
+			padding-top: 50px;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.foundation.scss

@@ -0,0 +1,257 @@
+
+
+@import 'mixins.scss';
+
+div.DTE {
+	div.DTE_Form_Error {
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.DTE_Form_Buttons {
+		display: flex;
+		justify-content: flex-end;
+
+		button {
+			margin-left: 0.5em;
+		}
+	}
+}
+
+
+div.DTE_Field {
+	div.multi-value,
+	div.multi-restore {
+		display: none;
+		cursor: pointer;
+		padding: 0.75rem;
+
+		span {
+			display: block;
+			color: #666;
+			font-size: 0.8em;
+			line-height: 1.25em;
+		}
+
+		&:hover {
+			background-color: #e5e5e5;
+		}
+	}
+
+	div.multi-restore {
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+		padding: 0.5rem 0.75rem;
+	}
+
+	div.label {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+
+		&:empty {
+			padding: 0;
+			margin: 0;
+		}
+	}
+
+	&:after {
+		display: block;
+		content: ".";
+		height: 0;
+		line-height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+
+	&.full {
+		label,
+		>div {
+			margin-left: -12.5%;
+			margin-right: -12.5%;
+		}
+	}
+}
+
+
+div.reveal-modal {
+	button.close {
+		position: absolute;
+		top: -1.5em;
+		right: -2.5em;
+	}
+
+	// Foundation 6 compatibility
+	button.close.close-button {
+		right: 1rem;
+    	top: .5rem;
+    	z-index: 100;
+	}
+
+	div.DTE_Header {
+		position: relative;
+		top: -0.5em;
+		font-size: 2.05556rem;
+		line-height: 1.4;
+	}
+
+	div.DTE_Form_Content {
+		width: 75%;
+		margin: 0 auto;
+	}
+
+	div.DTE_Footer {
+		position: relative;
+		bottom: -0.5em;
+		float: right;
+
+		button {
+			margin-bottom: 0;
+		}
+	}
+}
+
+
+// Inline editing
+@import 'inline.scss';
+
+div.DTE_Inline {
+	div.DTE_Field {
+		> div {
+			width: 100%;
+			padding: 0;
+		}
+
+		input {
+			height: 30px;
+			margin-bottom: 0;
+		}
+
+		div.label:empty {
+			display: none;
+		}
+	}
+}
+
+
+// Bubble form editing
+@import 'bubble.scss';
+
+div.DTE_Bubble {
+	div.DTE_Bubble_Liner {
+		box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
+		border-radius: 6px;
+		border: 1px solid rgba( 0, 0, 0, .2 );
+
+		div.DTE_Bubble_Table {
+			> form {
+				div.DTE_Form_Content {
+					div.DTE_Field {
+						>label,
+						>div {
+							width: 100%;
+							float: none;
+							clear: both;
+							text-align: left;
+						}
+
+						> label {
+							padding-bottom: 4px;
+						}
+					}
+				}
+			}
+
+			div.DTE_Form_Buttons {
+				margin-top: 0;
+			}
+		}
+
+		div.DTE_Header {
+			font-size: 18px;
+			width: 100%;
+		}
+
+		div.DTE_Bubble_Close {
+			&:after {
+				margin-top: -2px;
+				display: block;
+			}
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		border-color: rgba(0, 0, 0, 0.2);
+	}
+}
+
+div.DTE_Bubble_Background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 10;
+	background-color: rgba( 0, 0, 0, 0.05 );
+}
+
+
+@import 'upload.scss';
+
+div.DTE div.editor_upload {
+	button.button,
+	input[type=file] {
+		width: 100%;
+		font-size: 0.8em;
+		margin-bottom: 0;
+	}
+
+	ul li button {
+		width: 63px;
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-search input,
+	div.dataTables_filter input {
+		height: 1.75rem;
+		margin-bottom: 0.333rem;
+	}
+
+	div.dt-buttons {
+		padding-bottom: 0.5em;
+		width: 100%;
+		padding-right: 1em;
+		margin-bottom: 0;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+
+		span.select-info {
+			display: block;
+		}
+    }
+
+    div.dataTables_wrapper div.dataTables_paginate {
+        float: none;
+		text-align: center;
+    }
+}
+
+
+@import 'processing.scss';
+@import 'datatable.scss';
+
+
+div.DTE div.DTE_Processing_Indicator {
+	top: 26px;
+	right: 95px;
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.jqueryui.scss

@@ -0,0 +1,88 @@
+
+@import 'mixins.scss';
+@import 'fields.scss';
+@import 'main.scss';
+@import 'bubble.scss';
+@import 'inline.scss';
+@import 'datatable.scss';
+@import 'upload.scss';
+@import 'processing.scss';
+
+div.DTE {
+	font-size: 0.91em; // jQuery UI uses a 1.1em font size for everything in the dialogue
+
+	div.DTE_Header {
+		display: none;
+	}
+
+	div.DTE_Body {
+		padding: 0;
+
+		div.DTE_Body_Content {
+			overflow: hidden;
+
+			div.DTE_Field {
+				padding: 5px 5%;
+			}
+		}
+	}
+
+	div.DTE_Footer {
+		display: none;
+	}
+
+	div.DTE_Form_Error {
+		padding-top: 1em;
+		color: red;
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.DTE_Processing_Indicator {
+	 	top: 12px;
+		right: 2px;
+		font-size: 0.8em;
+	}
+
+	div.DTE_Form_Buttons {
+		text-align: right;
+		padding: 0;
+		display: flex;
+		justify-content: flex-end;
+	}
+}
+
+div.DTE {
+	div.DTE_Field {
+		&.full {
+			label,
+			>div {
+				padding-left: 0;
+				padding-right: 0;
+			}
+		}
+	}
+}
+
+
+div.DTE_Field_Type_datatable {
+	div.dt-search,
+	div.dataTables_filter {
+		padding-bottom: 0.5em;
+	}
+
+	div.dt-buttons {
+		float: none;
+
+		button {
+			margin-bottom: 3px;
+		}
+	}
+}
+
+div.DTE.DTE_Bubble {
+	div.DTE_Header {
+		display: block;
+		font-size: 18px;
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/editor.semanticui.scss

@@ -0,0 +1,276 @@
+
+
+@import 'mixins.scss';
+
+div.DTE {
+	div.DTE_Form_Error {
+		display: none;
+		color: #b11f1f;
+		float: left;
+		padding-top: 11px;
+	}
+
+	div.DTE_Form_Buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	label {
+		padding-top: 9px !important;
+		align-self: flex-start;
+		justify-content: flex-end;
+	}
+
+	div.eight.wide.field {
+		flex-direction: column;
+	}
+
+	div.DTE_Field_InputControl {
+		width: 100%;
+		margin: 0 !important;
+	}
+
+	div.ui.message:empty {
+		display: none;
+	}
+}
+
+div.DTE_Field {
+	div.ui.message {
+		width: 100%;
+	}
+
+	div.multi-value,
+	div.multi-restore {
+		display: none;
+		cursor: pointer;
+		margin-top: 0;
+
+		span {
+			display: block;
+			color: #666;
+			font-size: 0.85em;
+			line-height: 1.35em;
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	div.multi-restore {
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+	}
+
+	&:after {
+		display: block;
+		content: ".";
+		height: 0;
+		line-height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+
+	&.block {
+		display: block !important;
+
+		label,
+		>div {
+			justify-content: flex-start;
+			width: 100% !important;
+		}
+	}
+}
+
+
+// // Inline editing
+@import 'inline.scss';
+div.DTE.DTE_Inline.ui.form {
+
+	div.DTE_Field {
+		width: 100%;
+		margin: 0 !important;
+
+		div.DTE_Field_Input {
+			width: 100% !important;
+			box-sizing: border-box;
+		}
+
+		> label {
+			display: none !important;
+		}
+
+		> div {
+			width: 100%;
+			padding: 0;
+		}
+	}
+
+	&.DTE_Processing:after {
+		top: 5px;
+	}
+}
+
+
+// Bubble form editing
+@import 'bubble.scss';
+
+div.DTE_Bubble {
+	z-index: 1001;
+
+	div.DTE_Bubble_Liner {
+		box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
+		border-radius: 6px;
+		padding: 1em;
+		border: 1px solid rgba( 0, 0, 0, .2 );
+
+		div.DTE_Bubble_Table {
+			position: initial;
+
+			> form {
+				position: initial;
+
+				div.DTE_Form_Content {
+					div.DTE_Field {
+						flex-direction: column;
+
+						label,
+						>div {
+							justify-content: flex-start;
+							width: 100% !important;
+							float: none;
+							clear: both;
+							text-align: left;
+						}
+
+						label {
+							padding-bottom: 4px;
+						}
+
+						&:first-child label {
+							padding-top: 0 !important;
+						}
+					}
+				}
+			}
+
+			div.DTE_Form_Buttons {
+				text-align: right;
+				padding: 0;
+			}
+		}
+
+		div.DTE_Header {
+			font-size: 18px;
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		border-bottom: 1px solid rgba( 0, 0, 0, .2 );
+		border-left: 1px solid rgba( 0, 0, 0, .2 );
+	}
+}
+
+@import 'upload.scss';
+
+div.DTE div.editor_upload {
+	button.btn,
+	input[type=file] {
+		height: auto;
+	}
+
+	ul li button {
+		padding-bottom: 8px;
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	label {
+		display: block !important;
+		text-align: right;
+	}
+
+	div.dt-search {
+		margin-top: 1em;
+	}
+
+	div.dt-info {
+		margin-top: 0.75em;
+	}
+
+	div.dt-search,
+	div.dataTables_filter {
+		display: block !important;
+		text-align: left;
+		margin-bottom: 6px;
+
+		input {
+			width: 100% !important;
+		}
+	}
+
+	div.dt-buttons {
+		margin-bottom: 6px;
+		width: 100%;
+
+		button {
+			width: 100%;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		font-size: 0.8em;
+		font-weight: normal;
+		line-height: 1.3em;
+
+		span.select-info {
+			display: block;
+		}
+    }
+
+    div.dataTables_wrapper div.dataTables_paginate {
+		margin-top: 0.3em;
+        text-align: center;
+    }
+
+	div.dt-container > div.row:nth-child(1) {
+		display: none;
+	}
+}
+
+
+@import 'processing.scss';
+@import 'datatable.scss';
+
+div.DTE div.DTE_Processing_Indicator {
+	top: 22px;
+	right: 12px;
+}
+
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_InputControl {
+		padding-top: 7px;
+	}
+
+	> div > div {
+		margin-bottom: 0.2em;
+
+		input {
+			vertical-align: baseline !important;
+		}
+
+		label {
+			margin-left: 0.75em;
+			padding-top: 11px !important;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/envelope.scss

@@ -0,0 +1,73 @@
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+
+div.DTED_Envelope_Wrapper {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	height: 100%;
+	z-index: 11;
+	display: none;
+	overflow: hidden;
+
+	// Create a shadow display at the top of the evelope to make it look like it has
+	// come from under the element that it is attached to/ Left and right to give a
+	// slight fade and the two ends
+	div.DTED_Envelope_Shadow {
+		position: absolute;
+		top: -10px;
+		left: 10px;
+		right: 10px;
+		height: 10px;
+		z-index: 10;
+		box-shadow: 0 0 20px black;
+	}
+
+	div.DTED_Envelope_Container {
+		position: absolute;
+		top: 0;
+		left: 5%;
+		width: 90%;
+
+		border-left: 1px solid #777;
+		border-right: 1px solid #777;
+		border-bottom: 1px solid #777;
+		box-shadow: 3px 3px 10px #555;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		background-color: white;
+
+		div.DTE_Processing_Indicator {
+			right: 36px;
+		}
+
+		div.DTE_Footer {
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+		}
+
+		div.DTED_Envelope_Close {
+			@include close-icon();
+		}
+	}
+}
+
+
+div.DTED_Envelope_Background {
+	@include overlay-background();
+}
+
+html.dark {
+	div.DTED_Envelope_Wrapper {
+		div.DTED_Envelope_Container {
+			border-left: 1px solid rgba(255, 255, 255, 0.15);
+			border-right: 1px solid rgba(255, 255, 255, 0.15);
+			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+			box-shadow: 3px 3px 10px #000000;
+			background-color: var(--dt-html-background);
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/fields.scss

@@ -0,0 +1,417 @@
+
+$input-border: 1px solid #aaa;
+
+$input-border: 1px solid #aaa;
+
+// Generic field styling
+div.DTE_Field {
+	input,
+	textarea {
+		box-sizing: border-box;
+		background-color: white;
+		-webkit-transition: background-color ease-in-out .15s;
+		        transition: background-color ease-in-out .15s;
+	}
+
+	input:focus,
+	textarea:focus {
+		background-color: #ffffee; 
+	}
+
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"] {
+		padding: 5px 4px;
+		width: 100%;
+
+		// Chrome 83 introduces some really ugly borders
+		border: $input-border;
+		border-radius: 3px;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		vertical-align: middle;
+	}
+
+	select {
+		padding: 5px 4px;
+		border-radius: 3px;
+		border: $input-border;
+		background: white;
+		max-width: 100%;
+		color: inherit;
+	}
+
+	label div.DTE_Label_Info {
+		font-size: 0.85em;
+		margin-top: 0.25em;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Info,
+	div.DTE_Field_Message,
+	div.DTE_Field_Error {
+		font-size: 11px;
+		line-height: 1em;
+		margin-top: 5px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Error {
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.multi-value {
+		display: none;
+		border: 1px dotted #666;
+		border-radius: 3px;
+		padding: 5px;
+		background-color: #fafafa;
+		cursor: pointer;
+
+		span {
+			font-size: 0.8em;
+			line-height: 1.25em;
+			display: block;
+			color: #666;
+		}
+
+		&.multi-noEdit {
+			border: 1px solid #ccc;
+			cursor: auto;
+			background-color: #fcfcfc;
+
+			&:hover {
+				background-color: #fcfcfc;
+			}
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	&.disabled {
+		color: grey;
+
+		div.multi-value {
+			cursor: default;
+			border: 1px dotted #aaa;
+			background-color: transparent;
+		}
+	}
+
+	div.multi-restore {
+		display: none;
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+		color: #3879d9;
+
+		&:hover {
+			text-decoration: underline;
+			cursor: pointer;
+		}
+	}
+}
+
+// Specific field type styling
+div.DTE_Field_Type_textarea {
+	textarea {
+		padding: 3px;
+		width: 100%;
+		height: 80px;
+		border: $input-border;
+		max-width: 100%;
+		max-height: 75vh;
+	}
+}
+
+div.DTE_Field.DTE_Field_Type_date {
+	img {
+		vertical-align: middle;
+		cursor: pointer;
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_Input {
+		padding-top: 1px;
+
+		> div > div {
+			margin-bottom: 0.25em;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			input {
+			}
+
+			label {
+				margin-left: 0.75em;
+				vertical-align: middle;
+			}
+		}
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dt-layout-row:nth-child(2) > div.dt-layout-cell {
+		padding-top: 0;
+	}
+
+	div.dt-info,
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+		opacity: 0.8;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dt-search {
+		margin-top: 4px;
+	}
+
+	div.dt-search,
+	div.dataTables_filter {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+
+		input {
+			width: 100%;
+		}
+	}
+
+	div.dt-buttons {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+		float: none;
+
+		button {
+			width: 100%;
+			margin-left: 0;
+		}
+
+		&:empty {
+			padding-bottom: 0;
+		}
+	}
+
+	div.dataTables_paginate {
+		float: none;
+		text-align: center;
+		font-size: 0.8em;
+	}
+
+	table.dataTable {
+		&.no-footer {
+			border-bottom: 1px solid #aaa !important;
+		}
+
+		thead {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-bottom: 1px solid #aaa;
+			}
+		}
+
+		tbody {
+			background-color: white;
+
+			th:first-child,
+			td:first-child {
+				border-left: 1px solid #aaa;
+			}
+
+			th:last-child,
+			td:last-child {
+				border-right: 1px solid #aaa;
+			}
+		}
+
+		tfoot {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-top: 1px solid #aaa;
+			}
+		}
+	}
+
+	div.dataTables_scrollHead {
+		table.dataTable,
+		table.dataTable thead th,
+		table.dataTable thead td {
+			border-bottom: none !important;
+		}
+	}
+
+	div.dataTables_scrollBody {
+		border: 1px solid #aaa !important;
+		border-radius: 3px;;
+
+		table.dataTable {
+			border-bottom: none !important;
+
+			tbody {
+				th:first-child,
+				td:first-child {
+					border-left: none;
+				}
+	
+				th:last-child,
+				td:last-child {
+					border-right: none;
+				}
+			}
+		}
+	}
+}
+
+html.dark {
+	div.DTE_Field {
+		input,
+		textarea {
+			color: inherit;
+			background-color: rgb(33, 37, 41);
+		}
+	
+		input:focus,
+		textarea:focus {
+			background-color: rgb(24, 30, 36);
+		}
+	
+		input[type="color"],
+		input[type="date"],
+		input[type="datetime"],
+		input[type="datetime-local"],
+		input[type="email"],
+		input[type="month"],
+		input[type="number"],
+		input[type="password"],
+		input[type="search"],
+		input[type="tel"],
+		input[type="text"],
+		input[type="time"],
+		input[type="url"],
+		input[type="week"] {
+			border: 1px solid rgba(255, 255, 255, 0.15);
+		}
+	
+		select {
+			background: rgb(33, 37, 41);
+		}
+	
+		div.DTE_Field_Error {
+			color: #b11f1f;
+		}
+	
+		div.multi-value {
+			border: 1px dotted rgba(255, 255, 255, 0.15);
+			background-color: rgba(255, 255, 255, 0.05);
+	
+			span {
+				color: #b9b9b9;
+			}
+	
+			&.multi-noEdit {
+				border: 1px solid rgba(255, 255, 255, 0.15);
+				background-color: rgba(255, 255, 255, 0.05);
+	
+				&:hover {
+					background-color: rgba(255, 255, 255, 0.05);
+				}
+			}
+	
+			&:hover {
+				background-color: rgba(255, 255, 255, 0.1);
+			}
+		}
+	
+		&.disabled {
+			color: grey;
+	
+			div.multi-value {
+				border: 1px dotted rgba(255, 255, 255, 0.15)
+			}
+		}
+	
+		div.multi-restore {
+			color: rgb(110, 168, 254);
+		}
+	}
+	
+	// Specific field type styling
+	div.DTE_Field_Type_textarea {
+		textarea {
+			border: 1px solid rgba(255, 255, 255, 0.15);
+		}
+	}
+
+	div.DTE_Field_Type_datatable {
+		table.dataTable {
+			&.no-footer {
+				border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
+			}
+	
+			thead {
+				th, td {
+					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+	
+			tbody {
+				background-color: rgb(33, 37, 41);
+	
+				th:first-child,
+				td:first-child {
+					border-left: 1px solid rgba(255, 255, 255, 0.15);
+				}
+	
+				th:last-child,
+				td:last-child {
+					border-right: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+	
+			tfoot {
+				th, td {
+					border-top: 1px solid rgba(255, 255, 255, 0.15);
+				}
+			}
+		}
+	
+		div.dataTables_scrollBody {
+			border: 1px solid rgba(255, 255, 255, 0.15) !important;
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/inline.scss

@@ -0,0 +1,79 @@
+
+// Inline form editing
+// Hide the label and allow the field to take the full width
+div.DTE_Inline {
+	position: relative;
+	display: table;
+	width: 100%;
+
+	div.DTE_Inline_Field,
+	div.DTE_Inline_Buttons {
+		display: table-cell;
+		vertical-align: middle;
+
+		div.DTE_Field {
+			padding: 0;
+
+			>label {
+				display: none;
+			}
+
+			input[type="color"],
+			input[type="date"],
+			input[type="datetime"],
+			input[type="datetime-local"],
+			input[type="email"],
+			input[type="month"],
+			input[type="number"],
+			input[type="password"],
+			input[type="search"],
+			input[type="tel"],
+			input[type="text"],
+			input[type="time"],
+			input[type="url"],
+			input[type="week"] {
+				width: 100%;
+			}
+		}
+
+		div.DTE_Form_Buttons button {
+			margin: -6px 0 -6px 4px;
+			padding: 5px;
+		}
+	}
+
+	// Have the input types take up full space, taking into account the cell padding
+	div.DTE_Field input[type="color"],
+	div.DTE_Field input[type="date"],
+	div.DTE_Field input[type="datetime"],
+	div.DTE_Field input[type="datetime-local"],
+	div.DTE_Field input[type="email"],
+	div.DTE_Field input[type="month"],
+	div.DTE_Field input[type="number"],
+	div.DTE_Field input[type="password"],
+	div.DTE_Field input[type="search"],
+	div.DTE_Field input[type="tel"],
+	div.DTE_Field input[type="text"],
+	div.DTE_Field input[type="time"],
+	div.DTE_Field input[type="url"],
+	div.DTE_Field input[type="week"] {
+		margin: -6px 0;
+	}
+
+	div.DTE_Field_Error,
+	div.DTE_Form_Error {
+		font-size: 11px;
+		line-height: 1.2em;
+		padding: 0;
+		margin-top: 10px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+}
+
+// Responsive integration
+span.dtr-data div.DTE_Inline {
+	display: inline-table;
+}

src/main/resources/static/plugins/datatable_editor/css/scss/lightbox.scss

@@ -0,0 +1,193 @@
+
+
+div.DTED_Lightbox_Wrapper {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	margin-left: -390px;
+	width: 780px;
+	height: 100%;
+	z-index: 11;
+
+	div.DTED_Lightbox_Container {
+		display: table;
+		height: 100%;
+		width: 100%;
+
+		div.DTED_Lightbox_Content_Wrapper {
+			display: table-cell;
+			vertical-align: middle;
+			width: 100%;
+
+			div.DTED_Lightbox_Content {
+				position: relative;
+				box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+				border-radius: 6px;
+				@include box-sizing(border-box);
+
+				div.DTE {
+					background: white;
+					border-radius: 6px;
+					border: 1px solid #666;
+					background: #fcfcfc;
+					@include box-sizing(border-box);
+
+					div.DTE_Header {
+						right: 0;
+						width: auto;
+						border-top-left-radius: 6px;
+						border-top-right-radius: 6px;
+					}
+					
+					div.DTE_Body_Content {
+						box-sizing: border-box;
+						background: #fcfcfc;
+					}
+
+					div.DTE_Footer {
+						right: 0;
+						width: auto;
+						border-bottom-left-radius: 6px;
+						border-bottom-right-radius: 6px;
+					}
+				}
+
+				div.DTED_Lightbox_Close {
+					@include close-icon();
+				}
+			}
+		}
+	}
+}
+
+div.DTED_Lightbox_Wrapper {
+	div.DTE_Footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	div.DTE_Footer_Content {
+		display: none;
+	}
+
+	div.DTE.inFormError div.DTE_Footer {
+		justify-content: space-between;
+	}
+}
+
+
+div.DTED_Lightbox_Background {
+	@include overlay-background();
+}
+
+
+body.DTED_Lightbox_Mobile {
+	div.DTED_Lightbox_Background {
+		height: 0;
+	}
+
+	div.DTED_Lightbox_Shown {
+		display: none;
+	}
+
+	div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		width: auto;
+		height: auto;
+		margin-left: 0;
+		-webkit-overflow-scrolling: touch;
+
+		div.DTED_Lightbox_Container {
+			display: block;
+			height: 100%;
+
+			div.DTED_Lightbox_Content_Wrapper {
+				display: block;
+				height: 100%;
+
+				div.DTED_Lightbox_Content {
+					border-radius: 0;
+					box-shadow: none;
+					height: 100% !important;
+
+					div.DTE {
+						border-radius: 0;
+						height: 100%;
+
+						div.DTE_Header {
+							border-top-left-radius: 0;
+							border-top-right-radius: 0;
+						}
+
+						div.DTE_Body_Content {
+							padding-bottom: 52px;
+						}
+
+						div.DTE_Footer {
+							border-bottom-left-radius: 0;
+							border-bottom-right-radius: 0;
+						}
+					}
+
+					div.DTED_Lightbox_Close {
+						top: 11px;
+						right: 15px;
+
+						background-color: transparent;
+						border: none;
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width: 780px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 90%;
+		margin-left: 5%;
+	}
+}
+
+@media only screen
+and (max-width: 580px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+	}
+}
+
+
+html.dark {
+	div.DTED_Lightbox_Wrapper {
+		div.DTED_Lightbox_Container {
+			div.DTED_Lightbox_Content_Wrapper {
+				div.DTED_Lightbox_Content {
+					div.DTE {
+						border: 1px solid rgba(255, 255, 255, 0.15);
+						background: var(--dt-html-background);
+						
+						div.DTE_Body_Content {
+							background: var(--dt-html-background);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+
+

src/main/resources/static/plugins/datatable_editor/css/scss/main.scss

@@ -0,0 +1,194 @@
+
+
+// The main form.
+// Most of the styles for display of the main form come from the display
+// controller (lightbox and envelope are the two built in options).
+div.DTE_Body {
+	padding: 52px 0; // space for hte header and footer which are position: absolute
+	
+	div.DTE_Body_Content {
+		position: relative;
+		overflow: auto;
+
+		div.DTE_Form_Info {
+			padding: 1em 1em 0 1em;
+			margin: 0;
+		}
+
+		div.DTE_Field {
+			position: relative;
+			
+			clear: both;
+			padding: 5px 10%;
+			border: 1px solid transparent;
+			border-radius: 3px;
+
+			&:after {
+				display: block;
+				content: ".";
+				height: 0;
+				line-height: 0;
+				clear: both;
+				visibility: hidden;
+			}
+
+			&:hover {
+				background-color: #f9f9f9;
+				border: 1px solid #f3f3f3;
+			}
+
+			>label {
+				float: left;
+				width: 33%;
+				padding-top: 3px;
+			}
+
+			>div.DTE_Field_Input {
+				float: right;
+				width: 66%;
+			}
+
+			// Field in error state
+			&.DTE_Field_StateError { }
+
+			&.full {
+				padding: 5px 0;
+			}
+
+			&.block {
+				>div.DTE_Field_Input {
+					float: none;
+					clear: both;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+html[dir="rtl"] {
+	div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+		> label {
+			float: right;
+		}
+
+		>div.DTE_Field_Input {
+			float: left;
+		}
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+	}
+}
+
+html.dark {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				&:hover {
+					background-color: rgba(255, 255, 255, 0.01);
+					border: 1px solid rgba(255, 255, 255, 0.05);
+				}
+			}
+		}
+	}
+}
+
+// iPad in portrait 
+@media only screen 
+and (max-width : 768px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 10%;
+
+				&.full {
+					padding: 5px 0;
+
+					>label {
+						width: 35.5%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 64.5%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width : 640px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 0;
+
+				&.full {
+					padding: 5px 0;
+
+					>label {
+						width: 40%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 60%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+// For devices with smaller screens, the fields should be shown stacked
+@media only screen 
+and (max-width : 580px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				position: relative;
+				
+				clear: both;
+				padding: 5px 0;
+
+				>label {
+					float: none;
+					width: auto;
+					padding-top: 0;
+				}
+
+				>div.DTE_Field_Input {
+					float: none;
+					width: auto;
+					margin-top: 4px;
+					margin-bottom: 6px;
+				}
+
+				&.full,
+				&.block {
+					padding: 5px 0;
+
+					>label,
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+

src/main/resources/static/plugins/datatable_editor/css/scss/mixins.scss

@@ -0,0 +1,180 @@
+
+
+@function tint( $color, $percent ) {
+	@return mix(white, $color, $percent);
+}
+
+@function shade( $color, $percent ) {
+	@return mix(black, $color, $percent);
+}
+
+
+@mixin border-radius ( $radius ) {
+	border-radius: $radius;
+}
+
+@mixin box-sizing($box-model) {
+	box-sizing: $box-model;
+}
+
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+  @if $inset {
+    box-shadow:inset $top $left $blur $color;
+  } @else {
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin two-stop-gradient($fromColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor 0%, $toColor 100%); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor 0%, $toColor 100%); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin three-stop-gradient($fromColor, $middleColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor, $middleColor, $toColor); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor, $middleColor, $toColor); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor, $middleColor, $toColor);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin radial-gradient ($fromColor, $toColor ) {
+	background: $toColor; /* Fallback */
+	background:     -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */ 
+	background:    -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */ 
+	background:      -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */ 
+	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */ 
+	background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */ 
+	background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */ 
+}
+
+@mixin keyframe ($animation_name) {
+    @-webkit-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-moz-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-o-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @keyframes #{$animation_name} {
+        @content;
+    }
+}
+
+@mixin animation ($duration, $animation) {
+	-webkit-animation-duration: $duration;
+	-webkit-animation-name: $animation;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: linear;
+	-webkit-animation-direction: alternate;
+
+	-moz-animation-duration: $duration;
+	-moz-animation-name: $animation;
+	-moz-animation-fill-mode: forwards;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-timing-function: linear;
+	-moz-animation-direction: alternate;
+	
+	-o-animation-duration: $duration;
+	-o-animation-name: $animation;
+	-o-animation-fill-mode: forwards;
+	-o-animation-iteration-count: infinite;
+	-o-animation-timing-function: linear;
+	-o-animation-direction: alternate;
+	
+	animation-duration: $duration;
+	animation-name: $animation;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-direction: alternate;
+}
+
+@mixin close-icon () {
+	position: absolute;
+	top: 19px;
+	right: 19px;
+	cursor: pointer;
+	z-index: 12;
+
+	&:after {
+		content: '\00d7';
+		color: rgba(0, 0, 0, 0.5);
+		font-weight: bold;
+		font-size: 22px;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	&:hover {
+		&:after {
+			color: black;
+		}
+	}
+}
+
+html.dark div.DTED_Lightbox_Close {
+	&:after {
+		color: rgba(255, 255, 255, 0.5) !important;
+	}
+
+	&:hover {
+		&:after {
+			color: white !important;
+		}
+	}
+}
+
+@mixin overlay-background () {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	@include radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) );
+
+	z-index: 10;
+
+	// IE8- doesn't support RGBA and jQuery uses `filter:` for the fade-in
+	// animation, so we need a child element that is used just for the display
+	>div {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+
+		// IE7-
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+		
+		// IE8
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+	}
+
+	// IE9 has both filter and rgba support, so we need a hack to disable the filter
+	>div:not([dummy]) {
+		filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
+	}
+}
+
+@mixin background-transision () {
+	-webkit-transition: background-color 500ms linear;
+	   -moz-transition: background-color 500ms linear;
+	    -ms-transition: background-color 500ms linear;
+	     -o-transition: background-color 500ms linear;
+	transition: background-color 500ms linear;
+}
+

src/main/resources/static/plugins/datatable_editor/css/scss/processing.scss

@@ -0,0 +1,119 @@
+
+div.DTE {
+	div.DTE_Processing_Indicator {
+		position: absolute;
+		top: 17px;
+		right: 42px;
+		height: 2em;
+		width: 2em;
+		z-index: 20;
+		font-size: 12px;
+		display: none;
+
+		-webkit-transform: translateZ(0);
+		-ms-transform: translateZ(0);
+		transform: translateZ(0);
+	}
+
+	&.processing {
+		div.DTE_Processing_Indicator {
+			display: block;
+		}
+
+		div.DTE_Field div.DTE_Processing_Indicator {
+			display: none;
+		}
+	}
+
+	div.DTE_Field div.DTE_Processing_Indicator {
+		top: 13px;
+		right: 0;
+		font-size: 8px;
+	}
+
+	&.DTE_Inline {
+		div.DTE_Processing_Indicator {
+			top: 5px;
+			right: 6px;
+			font-size: 6px;
+		}
+	}
+
+	&.DTE_Bubble {
+		div.DTE_Processing_Indicator {
+			top: 10px;
+			right: 14px;
+			font-size: 8px;
+		}
+	}
+
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		background: black;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 0, 0, 0, 0.4 );
+		background-color: rgba( 0, 0, 0, 0.1 );
+
+		-webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+		animation: editorProcessing 0.9s infinite ease-in-out;
+	}
+	
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		position: absolute;
+		top: 0;
+		content: '';
+	}
+	
+	div.DTE_Processing_Indicator:before {
+		left: -1em;
+		-webkit-animation-delay: -0.3s;
+		animation-delay: -0.3s;
+	}
+
+	div.DTE_Processing_Indicator span {
+		-webkit-animation-delay: -0.15s;
+		animation-delay: -0.15s;
+	}
+	
+	div.DTE_Processing_Indicator:after {
+		left: 1em;
+	}
+
+	@-webkit-keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+			transform: scale(1, 1.5);
+		}
+	}
+	@keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+		 transform: scale(1, 1.5);
+		}
+	}
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 255, 255, 255, 0.25 );
+		background-color: rgba( 255, 255, 255, 0.1 );
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/scss/upload.scss

@@ -0,0 +1,156 @@
+
+div.DTE div.editor_upload {
+	padding-top: 4px;
+
+	div.eu_table {
+		display: table;
+		width: 100%;
+	}
+
+	div.row {
+		display: table-row;
+	}
+
+	div.cell {
+		display: table-cell;
+		position: relative;
+		width: 50%;
+		vertical-align: top;
+	}
+
+	div.cell + div.cell {
+		padding-left: 10px;
+	}
+
+	div.row + div.row {
+		div.cell {
+			padding-top: 10px;
+		}
+	}
+
+	button.btn,
+	input[type=file] {
+		width: 100%;
+		height: 2.3em;
+		font-size: 0.8em;
+		text-align: center;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	input[type=file] {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		opacity: 0;
+	}
+
+	div.drop {
+		position: relative;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border: 3px dashed #ccc;
+		border-radius: 6px;
+		min-height: 4em;
+		color: #999;
+		text-align: center;
+		padding: 1em 2em;
+	    line-height: 1.1em;
+
+		&.over {
+			border: 3px dashed #111;
+			color: #111;
+		}
+
+		span {
+			max-width: 75%;
+			font-size: 0.85em;
+			line-height: 1em;
+		}
+	}
+
+	div.rendered {
+		img {
+			max-width: 8em;
+			margin: 0 auto;
+		}
+	}
+
+	&.noDrop {
+		div.drop {
+			display: none;
+		}
+
+		div.row.second {
+			display: none;
+		}
+
+		div.rendered {
+			margin-top: 10px;
+		}
+	}
+
+	&.noClear {
+		div.clearValue button {
+			display: none;
+		}
+	}
+
+	&.multi {
+		div.cell {
+			display: block;
+			width: 100%;
+
+			div.drop {
+				min-height: 0;
+			}
+		}
+
+		div.clearValue {
+			display: none;
+		}
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+
+			li {
+				position: relative;
+				margin-top: 0.5em;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				img {
+					vertical-align: middle;
+				}
+
+				button {
+					position: absolute;
+					width: 40px;
+					right: 0;
+					top: 50%;
+					margin-top: -1.5em;
+				}
+			}
+		}
+	}
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE div.editor_upload {
+		div.drop {
+			border: 3px dashed rgba(255, 255, 255, 0.15);
+			color: inherit;
+
+			&.over {
+				border: 3px dashed rgba(255, 255, 255, 0.5);
+			}
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/css/upload.scss

@@ -0,0 +1,156 @@
+
+div.DTE div.editor_upload {
+	padding-top: 4px;
+
+	div.eu_table {
+		display: table;
+		width: 100%;
+	}
+
+	div.row {
+		display: table-row;
+	}
+
+	div.cell {
+		display: table-cell;
+		position: relative;
+		width: 50%;
+		vertical-align: top;
+	}
+
+	div.cell + div.cell {
+		padding-left: 10px;
+	}
+
+	div.row + div.row {
+		div.cell {
+			padding-top: 10px;
+		}
+	}
+
+	button.btn,
+	input[type=file] {
+		width: 100%;
+		height: 2.3em;
+		font-size: 0.8em;
+		text-align: center;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	input[type=file] {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		opacity: 0;
+	}
+
+	div.drop {
+		position: relative;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border: 3px dashed #ccc;
+		border-radius: 6px;
+		min-height: 4em;
+		color: #999;
+		text-align: center;
+		padding: 1em 2em;
+	    line-height: 1.1em;
+
+		&.over {
+			border: 3px dashed #111;
+			color: #111;
+		}
+
+		span {
+			max-width: 75%;
+			font-size: 0.85em;
+			line-height: 1em;
+		}
+	}
+
+	div.rendered {
+		img {
+			max-width: 8em;
+			margin: 0 auto;
+		}
+	}
+
+	&.noDrop {
+		div.drop {
+			display: none;
+		}
+
+		div.row.second {
+			display: none;
+		}
+
+		div.rendered {
+			margin-top: 10px;
+		}
+	}
+
+	&.noClear {
+		div.clearValue button {
+			display: none;
+		}
+	}
+
+	&.multi {
+		div.cell {
+			display: block;
+			width: 100%;
+
+			div.drop {
+				min-height: 0;
+			}
+		}
+
+		div.clearValue {
+			display: none;
+		}
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+
+			li {
+				position: relative;
+				margin-top: 0.5em;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				img {
+					vertical-align: middle;
+				}
+
+				button {
+					position: absolute;
+					width: 40px;
+					right: 0;
+					top: 50%;
+					margin-top: -1.5em;
+				}
+			}
+		}
+	}
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+	div.DTE div.editor_upload {
+		div.drop {
+			border: 3px dashed rgba(255, 255, 255, 0.15);
+			color: inherit;
+
+			&.over {
+				border: 3px dashed rgba(255, 255, 255, 0.5);
+			}
+		}
+	}
+}

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap.js

@@ -0,0 +1,273 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-bs', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-bs')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+/*
+ * Set the default display controller to be our bootstrap control 
+ */
+DataTable.Editor.defaults.display = "bootstrap";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h4',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "btn btn-default",
+		"buttonInternal": "btn btn-default",
+		"buttonSubmit": 'btn btn-primary'
+	},
+	"field": {
+		"wrapper": "DTE_Field",
+		"label":   "col-lg-4 control-label",
+		"input":   "col-lg-8 controls DTE_Field_Input",
+		"error":   "error has-error",
+		"msg-labelInfo": "help-block",
+		"msg-info":      "help-block",
+		"msg-message":   "help-block",
+		"msg-error":     "help-block",
+		"multiValue":    "well well-sm multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "well well-sm multi-restore"
+	}
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+let shown = false;
+
+const dom = {
+	// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
+	content: $(
+		'<div class="modal fade DTED">'+
+			'<div class="modal-dialog">'+
+				'<div class="modal-content"></div>'+
+			'</div>'+
+		'</div>'
+	),
+	close: $('<button class="close">&times;</div>')
+};
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebs open.dtebs', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'form-control' );
+			} );
+		} );
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function ( dte, append, callback ) {
+		$(append).addClass('modal-content');
+
+		// Special class for DataTable buttons in the form
+		$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		var content = dom.content.find('div.modal-dialog');
+		content.children().detach();
+		content.append( append );
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs3')
+			.on('click.dte-bs3', function () {
+				dte.close('icon');
+			})
+			.prependTo($('div.modal-header', dom.content));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		var allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs3')
+			.on('mousedown.dte-bs3', 'div.modal', function (e) {
+				if ( ! shown ) {
+					return;
+				}
+
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown
+					? true
+					: false;
+			} );
+
+		$(document)
+			.off('click.dte-bs3')
+			.on('click.dte-bs3', 'div.modal', function (e) {
+				if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
+					dte.background();
+					return;
+				}
+
+				if ( ! $(e.target).hasClass('modal') ) {
+					return;	
+				}
+
+				// If scrollbar shown
+				if ($('div.modal-dialog').height() > $(e.target).height()) {
+					// And if clicking inside it - do nothing
+					if (e.pageX >= document.body.offsetWidth - DataTable.__browser.barWidth) {
+						return;
+					}
+				}
+
+				// All checks pass - do background action
+				dte.background();
+			} );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+
+		$(dom.content)
+			.one('shown.bs.modal', function () {
+				// Can only give elements focus when shown
+				if ( dte.s.setFocus ) {
+					dte.s.setFocus.focus();
+				}
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if ( callback ) {
+					callback();
+				}
+			})
+			.one('hidden', function () {
+				shown = false;
+			})
+			.appendTo( 'body' )
+			.modal( {
+				backdrop: "static",
+				keyboard: false
+			} );
+
+		dom.close.prependTo($('div.modal-header', dom.content));
+	},
+
+	close: function ( dte, callback ) {
+		if ( ! shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		$(dom.content)
+			.one( 'hidden.bs.modal', function () {
+				$(this).detach();
+			} )
+			.modal('hide');
+
+		shown = false;
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap.min.js

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(o){var n,d;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-editor"],function(t){return o(t,window,document)}):"object"==typeof exports?(n=require("jquery"),d=function(t,e){e.fn.dataTable||require("datatables.net-bs")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||n(t),d(t,e),o(e,0,t.document)}:(d(window,n),module.exports=o(n,window,window.document))):o(jQuery,window,document)}(function(a,t,l){"use strict";var s=a.fn.dataTable;s.Editor.defaults.display="bootstrap",a.extend(!0,s.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h4",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn btn-default",buttonInternal:"btn btn-default",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field",label:"col-lg-4 control-label",input:"col-lg-8 controls DTE_Field_Input",error:"error has-error","msg-labelInfo":"help-block","msg-info":"help-block","msg-message":"help-block","msg-error":"help-block",multiValue:"well well-sm multi-value",multiInfo:"small",multiRestore:"well well-sm multi-restore"}}),a.extend(!0,s.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let r=!(s.Editor.fieldTypes.datatable.tableClass="table");const i={content:a('<div class="modal fade DTED"><div class="modal-dialog"><div class="modal-content"></div></div></div>'),close:a('<button class="close">&times;</div>')};return s.Editor.display.bootstrap=a.extend(!0,{},s.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebs open.dtebs",function(){a.each(t.s.fields,function(t,e){a("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("form-control")})}),s.Editor.display.bootstrap},open:function(e,t,o){a(t).addClass("modal-content"),a(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical");var n=i.content.find("div.modal-dialog"),d=(n.children().detach(),n.append(t),i.close.attr("title",e.i18n.close).off("click.dte-bs3").on("click.dte-bs3",function(){e.close("icon")}).prependTo(a("div.modal-header",i.content)),!1);a(l).off("mousedown.dte-bs3").on("mousedown.dte-bs3","div.modal",function(t){r&&(d=!(!a(t.target).hasClass("modal")||!r))}),a(l).off("click.dte-bs3").on("click.dte-bs3","div.modal",function(t){(!a(t.target).hasClass("modal")||!d)&&(!a(t.target).hasClass("modal")||a("div.modal-dialog").height()>a(t.target).height()&&t.pageX>=l.body.offsetWidth-s.__browser.barWidth)||e.background()}),r?o&&o():(r=!0,a(i.content).one("shown.bs.modal",function(){e.s.setFocus&&e.s.setFocus.focus(),i.content.find("table.dataTable").DataTable().columns.adjust(),o&&o()}).one("hidden",function(){r=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}),i.close.prependTo(a("div.modal-header",i.content)))},close:function(t,e){r&&(a(i.content).one("hidden.bs.modal",function(){a(this).detach()}).modal("hide"),r=!1),e&&e()},node:function(){return i.content[0]}}),s.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap.min.mjs

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-bs";import Editor from"datatables.net-editor";let $=jQuery,shown=(DataTable.Editor.defaults.display="bootstrap",$.extend(!0,DataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h4",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn btn-default",buttonInternal:"btn btn-default",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field",label:"col-lg-4 control-label",input:"col-lg-8 controls DTE_Field_Input",error:"error has-error","msg-labelInfo":"help-block","msg-info":"help-block","msg-message":"help-block","msg-error":"help-block",multiValue:"well well-sm multi-value",multiInfo:"small",multiRestore:"well well-sm multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}}),!(DataTable.Editor.fieldTypes.datatable.tableClass="table"));const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog"><div class="modal-content"></div></div></div>'),close:$('<button class="close">&times;</div>')};DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebs open.dtebs",function(){$.each(t.s.fields,function(t,o){$("input:not([type=checkbox]):not([type=radio]), select, textarea",o.node()).addClass("form-control")})}),DataTable.Editor.display.bootstrap},open:function(o,t,e){$(t).addClass("modal-content"),$(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical");var a=dom.content.find("div.modal-dialog"),d=(a.children().detach(),a.append(t),dom.close.attr("title",o.i18n.close).off("click.dte-bs3").on("click.dte-bs3",function(){o.close("icon")}).prependTo($("div.modal-header",dom.content)),!1);$(document).off("mousedown.dte-bs3").on("mousedown.dte-bs3","div.modal",function(t){shown&&(d=!(!$(t.target).hasClass("modal")||!shown))}),$(document).off("click.dte-bs3").on("click.dte-bs3","div.modal",function(t){(!$(t.target).hasClass("modal")||!d)&&(!$(t.target).hasClass("modal")||$("div.modal-dialog").height()>$(t.target).height()&&t.pageX>=document.body.offsetWidth-DataTable.__browser.barWidth)||o.background()}),shown?e&&e():(shown=!0,$(dom.content).one("shown.bs.modal",function(){o.s.setFocus&&o.s.setFocus.focus(),dom.content.find("table.dataTable").DataTable().columns.adjust(),e&&e()}).one("hidden",function(){shown=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}),dom.close.prependTo($("div.modal-header",dom.content)))},close:function(t,o){shown&&($(dom.content).one("hidden.bs.modal",function(){$(this).detach()}).modal("hide"),shown=!1),o&&o()},node:function(){return dom.content[0]}});export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap.mjs

@@ -0,0 +1,229 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-bs';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+/*
+ * Set the default display controller to be our bootstrap control 
+ */
+DataTable.Editor.defaults.display = "bootstrap";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h4',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "btn btn-default",
+		"buttonInternal": "btn btn-default",
+		"buttonSubmit": 'btn btn-primary'
+	},
+	"field": {
+		"wrapper": "DTE_Field",
+		"label":   "col-lg-4 control-label",
+		"input":   "col-lg-8 controls DTE_Field_Input",
+		"error":   "error has-error",
+		"msg-labelInfo": "help-block",
+		"msg-info":      "help-block",
+		"msg-message":   "help-block",
+		"msg-error":     "help-block",
+		"multiValue":    "well well-sm multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "well well-sm multi-restore"
+	}
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+let shown = false;
+
+const dom = {
+	// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
+	content: $(
+		'<div class="modal fade DTED">'+
+			'<div class="modal-dialog">'+
+				'<div class="modal-content"></div>'+
+			'</div>'+
+		'</div>'
+	),
+	close: $('<button class="close">&times;</div>')
+};
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebs open.dtebs', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'form-control' );
+			} );
+		} );
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function ( dte, append, callback ) {
+		$(append).addClass('modal-content');
+
+		// Special class for DataTable buttons in the form
+		$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		var content = dom.content.find('div.modal-dialog');
+		content.children().detach();
+		content.append( append );
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs3')
+			.on('click.dte-bs3', function () {
+				dte.close('icon');
+			})
+			.prependTo($('div.modal-header', dom.content));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		var allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs3')
+			.on('mousedown.dte-bs3', 'div.modal', function (e) {
+				if ( ! shown ) {
+					return;
+				}
+
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown
+					? true
+					: false;
+			} );
+
+		$(document)
+			.off('click.dte-bs3')
+			.on('click.dte-bs3', 'div.modal', function (e) {
+				if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
+					dte.background();
+					return;
+				}
+
+				if ( ! $(e.target).hasClass('modal') ) {
+					return;	
+				}
+
+				// If scrollbar shown
+				if ($('div.modal-dialog').height() > $(e.target).height()) {
+					// And if clicking inside it - do nothing
+					if (e.pageX >= document.body.offsetWidth - DataTable.__browser.barWidth) {
+						return;
+					}
+				}
+
+				// All checks pass - do background action
+				dte.background();
+			} );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+
+		$(dom.content)
+			.one('shown.bs.modal', function () {
+				// Can only give elements focus when shown
+				if ( dte.s.setFocus ) {
+					dte.s.setFocus.focus();
+				}
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if ( callback ) {
+					callback();
+				}
+			})
+			.one('hidden', function () {
+				shown = false;
+			})
+			.appendTo( 'body' )
+			.modal( {
+				backdrop: "static",
+				keyboard: false
+			} );
+
+		dom.close.prependTo($('div.modal-header', dom.content));
+	},
+
+	close: function ( dte, callback ) {
+		if ( ! shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		$(dom.content)
+			.one( 'hidden.bs.modal', function () {
+				$(this).detach();
+			} )
+			.modal('hide');
+
+		shown = false;
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap4.js

@@ -0,0 +1,266 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-bs4', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-bs4')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+/*
+ * Set the default display controller to be our bootstrap control 
+ */
+DataTable.Editor.defaults.display = "bootstrap";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "btn",
+		"buttonInternal": "btn btn-outline-secondary",
+		"buttonSubmit": 'btn btn-primary'
+	},
+	"field": {
+		"wrapper": "DTE_Field form-group row",
+		"label":   "col-lg-4 col-form-label",
+		"input":   "col-lg-8 DTE_Field_Input",
+		"error":   "error is-invalid",
+		"msg-labelInfo": "form-text text-secondary small",
+		"msg-info":      "form-text text-secondary small",
+		"msg-message":   "form-text text-secondary small",
+		"msg-error":     "form-text text-danger small",
+		"multiValue":    "card multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "multi-restore"
+	}
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+
+let shown = false;
+let fullyShown = false;
+
+const dom = {
+	// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
+	content: $(
+		'<div class="modal fade DTED">'+
+			'<div class="modal-dialog modal-lg modal-dialog-scrollable"></div>'+
+		'</div>'
+	),
+	close: $('<button class="close">&times;</div>')
+};
+
+DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebs open.dtebs', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'form-control' );
+			} );
+		} );
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function ( dte, append, callback ) {
+		$(append).addClass('modal-content');
+
+		// Special class for DataTable buttons in the form
+		$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs4')
+			.on('click.dte-bs4', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs4')
+			.on('mousedown.dte-bs4', 'div.modal', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown
+					? true
+					: false;
+			} );
+
+		$(document)
+			.off('click.dte-bs4')
+			.on('click.dte-bs4', 'div.modal', function (e) {
+				if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
+					dte.background();
+				}
+			} );
+
+		var content = dom.content.find('div.modal-dialog');
+		content.children().detach();
+		content.append( append );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+		fullyShown = false;
+
+		$(dom.content)
+			.one('shown.bs.modal', function () {
+				// Can only give elements focus when shown
+				if ( dte.s.setFocus ) {
+					dte.s.setFocus.focus();
+				}
+
+				fullyShown = true;
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if ( callback ) {
+					callback();
+				}
+			})
+			.one('hidden', function () {
+				shown = false;
+			})
+			.appendTo( 'body' )
+			.modal( {
+				backdrop: "static",
+				keyboard: false
+			} );
+	},
+
+	close: function ( dte, callback ) {
+		if ( ! shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
+		// before it has been fully displayed
+		if ( ! fullyShown ) {
+			$(dom.content)
+				.one('shown.bs.modal', function () {
+					DataTable.Editor.display.bootstrap.close( dte, callback );
+				} );
+
+			return;
+		}
+
+		$(dom.content)
+			.one( 'hidden.bs.modal', function () {
+				$(this).detach();
+			} )
+			.modal('hide');
+
+		shown = false;
+		fullyShown = false;
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap4.min.js

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(o){var n,a;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-editor"],function(t){return o(t,window,document)}):"object"==typeof exports?(n=require("jquery"),a=function(t,e){e.fn.dataTable||require("datatables.net-bs4")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||n(t),a(t,e),o(e,0,t.document)}:(a(window,n),module.exports=o(n,window,window.document))):o(jQuery,window,document)}(function(d,t,l){"use strict";var o=d.fn.dataTable;o.Editor.defaults.display="bootstrap",d.extend(!0,o.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8 DTE_Field_Input",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),d.extend(!0,o.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let s=!(o.Editor.fieldTypes.datatable.tableClass="table"),r=!1;const i={content:d('<div class="modal fade DTED"><div class="modal-dialog modal-lg modal-dialog-scrollable"></div></div>'),close:d('<button class="close">&times;</div>')};return o.Editor.display.bootstrap=d.extend(!0,{},o.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebs open.dtebs",function(){d.each(t.s.fields,function(t,e){d("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("form-control")})}),o.Editor.display.bootstrap},open:function(e,t,o){d(t).addClass("modal-content"),d(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),i.close.attr("title",e.i18n.close).off("click.dte-bs4").on("click.dte-bs4",function(){e.close("icon")}).appendTo(d("div.modal-header",t));let n=!1;d(l).off("mousedown.dte-bs4").on("mousedown.dte-bs4","div.modal",function(t){n=!(!d(t.target).hasClass("modal")||!s)}),d(l).off("click.dte-bs4").on("click.dte-bs4","div.modal",function(t){d(t.target).hasClass("modal")&&n&&e.background()});var a=i.content.find("div.modal-dialog");a.children().detach(),a.append(t),s?o&&o():(s=!0,r=!1,d(i.content).one("shown.bs.modal",function(){e.s.setFocus&&e.s.setFocus.focus(),r=!0,i.content.find("table.dataTable").DataTable().columns.adjust(),o&&o()}).one("hidden",function(){s=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}))},close:function(t,e){s?r?(d(i.content).one("hidden.bs.modal",function(){d(this).detach()}).modal("hide"),s=!1,r=!1,e&&e()):d(i.content).one("shown.bs.modal",function(){o.Editor.display.bootstrap.close(t,e)}):e&&e()},node:function(){return i.content[0]}}),o.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap4.min.mjs

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-bs4";import Editor from"datatables.net-editor";let $=jQuery,shown=(DataTable.Editor.defaults.display="bootstrap",$.extend(!0,DataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8 DTE_Field_Input",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}}),!(DataTable.Editor.fieldTypes.datatable.tableClass="table")),fullyShown=!1;const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog modal-lg modal-dialog-scrollable"></div></div>'),close:$('<button class="close">&times;</div>')};DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(o){return o.on("displayOrder.dtebs open.dtebs",function(){$.each(o.s.fields,function(o,t){$("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("form-control")})}),DataTable.Editor.display.bootstrap},open:function(t,o,e){$(o).addClass("modal-content"),$(o).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),dom.close.attr("title",t.i18n.close).off("click.dte-bs4").on("click.dte-bs4",function(){t.close("icon")}).appendTo($("div.modal-header",o));let a=!1;$(document).off("mousedown.dte-bs4").on("mousedown.dte-bs4","div.modal",function(o){a=!(!$(o.target).hasClass("modal")||!shown)}),$(document).off("click.dte-bs4").on("click.dte-bs4","div.modal",function(o){$(o.target).hasClass("modal")&&a&&t.background()});var l=dom.content.find("div.modal-dialog");l.children().detach(),l.append(o),shown?e&&e():(shown=!0,fullyShown=!1,$(dom.content).one("shown.bs.modal",function(){t.s.setFocus&&t.s.setFocus.focus(),fullyShown=!0,dom.content.find("table.dataTable").DataTable().columns.adjust(),e&&e()}).one("hidden",function(){shown=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}))},close:function(o,t){shown?fullyShown?($(dom.content).one("hidden.bs.modal",function(){$(this).detach()}).modal("hide"),shown=!1,fullyShown=!1,t&&t()):$(dom.content).one("shown.bs.modal",function(){DataTable.Editor.display.bootstrap.close(o,t)}):t&&t()},node:function(){return dom.content[0]}});export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap4.mjs

@@ -0,0 +1,222 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-bs4';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+/*
+ * Set the default display controller to be our bootstrap control 
+ */
+DataTable.Editor.defaults.display = "bootstrap";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "btn",
+		"buttonInternal": "btn btn-outline-secondary",
+		"buttonSubmit": 'btn btn-primary'
+	},
+	"field": {
+		"wrapper": "DTE_Field form-group row",
+		"label":   "col-lg-4 col-form-label",
+		"input":   "col-lg-8 DTE_Field_Input",
+		"error":   "error is-invalid",
+		"msg-labelInfo": "form-text text-secondary small",
+		"msg-info":      "form-text text-secondary small",
+		"msg-message":   "form-text text-secondary small",
+		"msg-error":     "form-text text-danger small",
+		"multiValue":    "card multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "multi-restore"
+	}
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+
+let shown = false;
+let fullyShown = false;
+
+const dom = {
+	// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
+	content: $(
+		'<div class="modal fade DTED">'+
+			'<div class="modal-dialog modal-lg modal-dialog-scrollable"></div>'+
+		'</div>'
+	),
+	close: $('<button class="close">&times;</div>')
+};
+
+DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebs open.dtebs', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'form-control' );
+			} );
+		} );
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function ( dte, append, callback ) {
+		$(append).addClass('modal-content');
+
+		// Special class for DataTable buttons in the form
+		$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs4')
+			.on('click.dte-bs4', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs4')
+			.on('mousedown.dte-bs4', 'div.modal', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown
+					? true
+					: false;
+			} );
+
+		$(document)
+			.off('click.dte-bs4')
+			.on('click.dte-bs4', 'div.modal', function (e) {
+				if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
+					dte.background();
+				}
+			} );
+
+		var content = dom.content.find('div.modal-dialog');
+		content.children().detach();
+		content.append( append );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+		fullyShown = false;
+
+		$(dom.content)
+			.one('shown.bs.modal', function () {
+				// Can only give elements focus when shown
+				if ( dte.s.setFocus ) {
+					dte.s.setFocus.focus();
+				}
+
+				fullyShown = true;
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if ( callback ) {
+					callback();
+				}
+			})
+			.one('hidden', function () {
+				shown = false;
+			})
+			.appendTo( 'body' )
+			.modal( {
+				backdrop: "static",
+				keyboard: false
+			} );
+	},
+
+	close: function ( dte, callback ) {
+		if ( ! shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
+		// before it has been fully displayed
+		if ( ! fullyShown ) {
+			$(dom.content)
+				.one('shown.bs.modal', function () {
+					DataTable.Editor.display.bootstrap.close( dte, callback );
+				} );
+
+			return;
+		}
+
+		$(dom.content)
+			.one( 'hidden.bs.modal', function () {
+				$(this).detach();
+			} )
+			.modal('hide');
+
+		shown = false;
+		fullyShown = false;
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap5.js

@@ -0,0 +1,329 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-bs5', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-bs5')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+// Note that in MJS `jQuery`, `DataTable` and `Editor` are imported with
+// `jQuery` assigned to `let $`
+// In UMD, `$` and `DataTable` are available
+
+/*
+ * Set the default display controller to be our bootstrap control
+ */
+DataTable.Editor.defaults.display = 'bootstrap';
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend(true, DataTable.Editor.classes, {
+	header: {
+		wrapper: 'DTE_Header',
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	body: {
+		wrapper: 'DTE_Body'
+	},
+	footer: {
+		wrapper: 'DTE_Footer'
+	},
+	form: {
+		tag: 'form-horizontal',
+		button: 'btn',
+		buttonInternal: 'btn btn-outline-secondary',
+		buttonSubmit: 'btn btn-primary'
+	},
+	field: {
+		wrapper: 'DTE_Field form-group row',
+		label: 'col-lg-4 col-form-label',
+		input: 'col-lg-8 DTE_Field_Input',
+		error: 'error is-invalid',
+		'msg-labelInfo': 'form-text text-secondary small',
+		'msg-info': 'form-text text-secondary small',
+		'msg-message': 'form-text text-secondary small',
+		'msg-error': 'form-text text-danger small',
+		multiValue: 'card multi-value',
+		multiInfo: 'small',
+		multiRestore: 'multi-restore'
+	}
+});
+
+$.extend(true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+});
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+let shown = false;
+let fullyShown = false;
+
+const dom = {
+	content: $('<div class="modal fade DTED">' + '<div class="modal-dialog"></div>' + '</div>'),
+	close: $('<button class="btn-close"></div>')
+};
+let modal;
+let _bs = window.bootstrap;
+
+DataTable.Editor.bootstrap = function (bs) {
+	_bs = bs;
+};
+
+DataTable.Editor.display.bootstrap = $.extend(true, {}, DataTable.Editor.models.displayController, {
+	/*
+	 * API methods
+	 */
+	init: function (dte) {
+		// Add `form-control` to required elements
+		dte.on('displayOrder.dtebs open.dtebs', function () {
+			$.each(dte.s.fields, function (key, field) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node()).addClass(
+					'form-control'
+				);
+
+				$('input[type=checkbox], input[type=radio]', field.node()).addClass('form-check-input');
+
+				$('select', field.node()).addClass('form-select');
+			});
+		});
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function (dte, append, callback) {
+		if (!modal) {
+			modal = new _bs.Modal(dom.content[0], {
+				backdrop: 'static',
+				keyboard: false
+			});
+		}
+
+		$(append).addClass('modal-content');
+		$('.DTE_Header', append).addClass('modal-header');
+		$('.DTE_Body', append).addClass('modal-body');
+		$('.DTE_Footer', append).addClass('modal-footer');
+
+		// Special class for DataTable buttons in the form
+		$(append)
+			.find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs5')
+			.on('mousedown.dte-bs5', 'div.modal', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown ? true : false;
+			});
+
+		$(document)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', 'div.modal', function (e) {
+				if ($(e.target).hasClass('modal') && allowBackgroundClick) {
+					dte.background();
+				}
+			});
+
+		var content = dom.content.find('div.modal-dialog');
+		content.addClass(DataTable.Editor.display.bootstrap.classes.modal);
+		content.children().detach();
+		content.append(append);
+
+		// Floating label support - rearrange the DOM for the inputs
+		if (dte.c.bootstrap && dte.c.bootstrap.floatingLabels) {
+			var floating_label_types = ['readonly', 'text', 'textarea', 'select', 'datetime'];
+			var fields = dte.order();
+
+			fields
+				.filter(function (f) {
+					var type = dte.field(f).s.opts.type;
+
+					return floating_label_types.includes(type);
+				})
+				.forEach(function (f) {
+					var node = $(dte.field(f).node());
+					var wrapper = node.find('.DTE_Field_InputControl');
+					var control = wrapper.children(':first-child');
+					var label = node.find('label');
+
+					wrapper.parent().removeClass('col-lg-8').addClass('col-lg-12');
+					wrapper.addClass('form-floating');
+					control.addClass('form-control').attr('placeholder', f);
+					label.appendTo(wrapper);
+				});
+		}
+
+		if (shown) {
+			if (callback) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+		fullyShown = false;
+
+		dom.content[0].addEventListener(
+			'shown.bs.modal',
+			function () {
+				// Can only give elements focus when shown
+				if (dte.s.setFocus) {
+					dte.s.setFocus.focus();
+				}
+
+				fullyShown = true;
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if (callback) {
+					callback();
+				}
+			},
+			{ once: true }
+		);
+
+		dom.content[0].addEventListener(
+			'hidden',
+			function () {
+				shown = false;
+			},
+			{ once: true }
+		);
+
+		$(dom.content).appendTo('body');
+
+		modal.show();
+	},
+
+	close: function (dte, callback) {
+		if (!shown) {
+			if (callback) {
+				callback();
+			}
+			return;
+		}
+
+		// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
+		// before it has been fully displayed
+		if (!fullyShown) {
+			dom.content[0].addEventListener(
+				'shown.bs.modal',
+				function () {
+					DataTable.Editor.display.bootstrap.close(dte, callback);
+				},
+				{ once: true }
+			);
+
+			return;
+		}
+
+		dom.content[0].addEventListener(
+			'hidden.bs.modal',
+			function () {
+				$(this).detach();
+			},
+			{ once: true }
+		);
+
+		modal.hide();
+
+		shown = false;
+		fullyShown = false;
+
+		if (callback) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	},
+
+	classes: {
+		modal: 'modal-dialog-scrollable modal-dialog-centered modal-lg'
+	}
+});
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap5.min.js

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(o){var a,d;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs5","datatables.net-editor"],function(t){return o(t,window,document)}):"object"==typeof exports?(a=require("jquery"),d=function(t,e){e.fn.dataTable||require("datatables.net-bs5")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||a(t),d(t,e),o(e,t,t.document)}:(d(window,a),module.exports=o(a,window,window.document))):o(jQuery,window,document)}(function(l,t,s){"use strict";var r=l.fn.dataTable;r.Editor.defaults.display="bootstrap",l.extend(!0,r.Editor.classes,{header:{wrapper:"DTE_Header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body"},footer:{wrapper:"DTE_Footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8 DTE_Field_Input",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),l.extend(!0,r.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let i=!(r.Editor.fieldTypes.datatable.tableClass="table"),c=!1;const u={content:l('<div class="modal fade DTED"><div class="modal-dialog"></div></div>'),close:l('<button class="btn-close"></div>')};let f,m=t.bootstrap;return r.Editor.bootstrap=function(t){m=t},r.Editor.display.bootstrap=l.extend(!0,{},r.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebs open.dtebs",function(){l.each(t.s.fields,function(t,e){l("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("form-control"),l("input[type=checkbox], input[type=radio]",e.node()).addClass("form-check-input"),l("select",e.node()).addClass("form-select")})}),r.Editor.display.bootstrap},open:function(d,t,e){f=f||new m.Modal(u.content[0],{backdrop:"static",keyboard:!1}),l(t).addClass("modal-content"),l(".DTE_Header",t).addClass("modal-header"),l(".DTE_Body",t).addClass("modal-body"),l(".DTE_Footer",t).addClass("modal-footer"),l(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),u.close.attr("title",d.i18n.close).off("click.dte-bs5").on("click.dte-bs5",function(){d.close("icon")}).appendTo(l("div.modal-header",t));let o=!1;l(s).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal",function(t){o=!(!l(t.target).hasClass("modal")||!i)}),l(s).off("click.dte-bs5").on("click.dte-bs5","div.modal",function(t){l(t.target).hasClass("modal")&&o&&d.background()});var a,n=u.content.find("div.modal-dialog");n.addClass(r.Editor.display.bootstrap.classes.modal),n.children().detach(),n.append(t),d.c.bootstrap&&d.c.bootstrap.floatingLabels&&(a=["readonly","text","textarea","select","datetime"],d.order().filter(function(t){t=d.field(t).s.opts.type;return a.includes(t)}).forEach(function(t){var e=l(d.field(t).node()),o=e.find(".DTE_Field_InputControl"),a=o.children(":first-child"),e=e.find("label");o.parent().removeClass("col-lg-8").addClass("col-lg-12"),o.addClass("form-floating"),a.addClass("form-control").attr("placeholder",t),e.appendTo(o)})),i?e&&e():(i=!0,c=!1,u.content[0].addEventListener("shown.bs.modal",function(){d.s.setFocus&&d.s.setFocus.focus(),c=!0,u.content.find("table.dataTable").DataTable().columns.adjust(),e&&e()},{once:!0}),u.content[0].addEventListener("hidden",function(){i=!1},{once:!0}),l(u.content).appendTo("body"),f.show())},close:function(t,e){i?c?(u.content[0].addEventListener("hidden.bs.modal",function(){l(this).detach()},{once:!0}),f.hide(),i=!1,c=!1,e&&e()):u.content[0].addEventListener("shown.bs.modal",function(){r.Editor.display.bootstrap.close(t,e)},{once:!0}):e&&e()},node:function(){return u.content[0]},classes:{modal:"modal-dialog-scrollable modal-dialog-centered modal-lg"}}),r.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap5.min.mjs

@@ -0,0 +1,4 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-bs5";import Editor from"datatables.net-editor";let $=jQuery,shown=(DataTable.Editor.defaults.display="bootstrap",$.extend(!0,DataTable.Editor.classes,{header:{wrapper:"DTE_Header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body"},footer:{wrapper:"DTE_Footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary",buttonSubmit:"btn btn-primary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8 DTE_Field_Input",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}}),!(DataTable.Editor.fieldTypes.datatable.tableClass="table")),fullyShown=!1;const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog"></div></div>'),close:$('<button class="btn-close"></div>')};let modal,_bs=window.bootstrap;DataTable.Editor.bootstrap=function(t){_bs=t},DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebs open.dtebs",function(){$.each(t.s.fields,function(t,o){$("input:not([type=checkbox]):not([type=radio]), select, textarea",o.node()).addClass("form-control"),$("input[type=checkbox], input[type=radio]",o.node()).addClass("form-check-input"),$("select",o.node()).addClass("form-select")})}),DataTable.Editor.display.bootstrap},open:function(d,t,o){modal=modal||new _bs.Modal(dom.content[0],{backdrop:"static",keyboard:!1}),$(t).addClass("modal-content"),$(".DTE_Header",t).addClass("modal-header"),$(".DTE_Body",t).addClass("modal-body"),$(".DTE_Footer",t).addClass("modal-footer"),$(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),dom.close.attr("title",d.i18n.close).off("click.dte-bs5").on("click.dte-bs5",function(){d.close("icon")}).appendTo($("div.modal-header",t));let e=!1;$(document).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal",function(t){e=!(!$(t.target).hasClass("modal")||!shown)}),$(document).off("click.dte-bs5").on("click.dte-bs5","div.modal",function(t){$(t.target).hasClass("modal")&&e&&d.background()});var a,l=dom.content.find("div.modal-dialog");l.addClass(DataTable.Editor.display.bootstrap.classes.modal),l.children().detach(),l.append(t),d.c.bootstrap&&d.c.bootstrap.floatingLabels&&(a=["readonly","text","textarea","select","datetime"],d.order().filter(function(t){t=d.field(t).s.opts.type;return a.includes(t)}).forEach(function(t){var o=$(d.field(t).node()),e=o.find(".DTE_Field_InputControl"),a=e.children(":first-child"),o=o.find("label");e.parent().removeClass("col-lg-8").addClass("col-lg-12"),e.addClass("form-floating"),a.addClass("form-control").attr("placeholder",t),o.appendTo(e)})),shown?o&&o():(shown=!0,fullyShown=!1,dom.content[0].addEventListener("shown.bs.modal",function(){d.s.setFocus&&d.s.setFocus.focus(),fullyShown=!0,dom.content.find("table.dataTable").DataTable().columns.adjust(),o&&o()},{once:!0}),dom.content[0].addEventListener("hidden",function(){shown=!1},{once:!0}),$(dom.content).appendTo("body"),modal.show())},close:function(t,o){shown?fullyShown?(dom.content[0].addEventListener("hidden.bs.modal",function(){$(this).detach()},{once:!0}),modal.hide(),shown=!1,fullyShown=!1,o&&o()):dom.content[0].addEventListener("shown.bs.modal",function(){DataTable.Editor.display.bootstrap.close(t,o)},{once:!0}):o&&o()},node:function(){return dom.content[0]},classes:{modal:"modal-dialog-scrollable modal-dialog-centered modal-lg"}});export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bootstrap5.mjs

@@ -0,0 +1,285 @@
+/*! Bootstrap integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-bs5';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+// Note that in MJS `jQuery`, `DataTable` and `Editor` are imported with
+// `jQuery` assigned to `let $`
+// In UMD, `$` and `DataTable` are available
+
+/*
+ * Set the default display controller to be our bootstrap control
+ */
+DataTable.Editor.defaults.display = 'bootstrap';
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend(true, DataTable.Editor.classes, {
+	header: {
+		wrapper: 'DTE_Header',
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	body: {
+		wrapper: 'DTE_Body'
+	},
+	footer: {
+		wrapper: 'DTE_Footer'
+	},
+	form: {
+		tag: 'form-horizontal',
+		button: 'btn',
+		buttonInternal: 'btn btn-outline-secondary',
+		buttonSubmit: 'btn btn-primary'
+	},
+	field: {
+		wrapper: 'DTE_Field form-group row',
+		label: 'col-lg-4 col-form-label',
+		input: 'col-lg-8 DTE_Field_Input',
+		error: 'error is-invalid',
+		'msg-labelInfo': 'form-text text-secondary small',
+		'msg-info': 'form-text text-secondary small',
+		'msg-message': 'form-text text-secondary small',
+		'msg-error': 'form-text text-danger small',
+		multiValue: 'card multi-value',
+		multiInfo: 'small',
+		multiRestore: 'multi-restore'
+	}
+});
+
+$.extend(true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'btn-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'btn-danger'
+		}
+	}
+});
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+let shown = false;
+let fullyShown = false;
+
+const dom = {
+	content: $('<div class="modal fade DTED">' + '<div class="modal-dialog"></div>' + '</div>'),
+	close: $('<button class="btn-close"></div>')
+};
+let modal;
+let _bs = window.bootstrap;
+
+DataTable.Editor.bootstrap = function (bs) {
+	_bs = bs;
+};
+
+DataTable.Editor.display.bootstrap = $.extend(true, {}, DataTable.Editor.models.displayController, {
+	/*
+	 * API methods
+	 */
+	init: function (dte) {
+		// Add `form-control` to required elements
+		dte.on('displayOrder.dtebs open.dtebs', function () {
+			$.each(dte.s.fields, function (key, field) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node()).addClass(
+					'form-control'
+				);
+
+				$('input[type=checkbox], input[type=radio]', field.node()).addClass('form-check-input');
+
+				$('select', field.node()).addClass('form-select');
+			});
+		});
+
+		return DataTable.Editor.display.bootstrap;
+	},
+
+	open: function (dte, append, callback) {
+		if (!modal) {
+			modal = new _bs.Modal(dom.content[0], {
+				backdrop: 'static',
+				keyboard: false
+			});
+		}
+
+		$(append).addClass('modal-content');
+		$('.DTE_Header', append).addClass('modal-header');
+		$('.DTE_Body', append).addClass('modal-body');
+		$('.DTE_Footer', append).addClass('modal-footer');
+
+		// Special class for DataTable buttons in the form
+		$(append)
+			.find('div.DTE_Field_Type_datatable div.dt-buttons')
+			.removeClass('btn-group')
+			.addClass('btn-group-vertical');
+
+		// Setup events on each show
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs5')
+			.on('mousedown.dte-bs5', 'div.modal', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal') && shown ? true : false;
+			});
+
+		$(document)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', 'div.modal', function (e) {
+				if ($(e.target).hasClass('modal') && allowBackgroundClick) {
+					dte.background();
+				}
+			});
+
+		var content = dom.content.find('div.modal-dialog');
+		content.addClass(DataTable.Editor.display.bootstrap.classes.modal);
+		content.children().detach();
+		content.append(append);
+
+		// Floating label support - rearrange the DOM for the inputs
+		if (dte.c.bootstrap && dte.c.bootstrap.floatingLabels) {
+			var floating_label_types = ['readonly', 'text', 'textarea', 'select', 'datetime'];
+			var fields = dte.order();
+
+			fields
+				.filter(function (f) {
+					var type = dte.field(f).s.opts.type;
+
+					return floating_label_types.includes(type);
+				})
+				.forEach(function (f) {
+					var node = $(dte.field(f).node());
+					var wrapper = node.find('.DTE_Field_InputControl');
+					var control = wrapper.children(':first-child');
+					var label = node.find('label');
+
+					wrapper.parent().removeClass('col-lg-8').addClass('col-lg-12');
+					wrapper.addClass('form-floating');
+					control.addClass('form-control').attr('placeholder', f);
+					label.appendTo(wrapper);
+				});
+		}
+
+		if (shown) {
+			if (callback) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+		fullyShown = false;
+
+		dom.content[0].addEventListener(
+			'shown.bs.modal',
+			function () {
+				// Can only give elements focus when shown
+				if (dte.s.setFocus) {
+					dte.s.setFocus.focus();
+				}
+
+				fullyShown = true;
+
+				dom.content.find('table.dataTable').DataTable().columns.adjust();
+
+				if (callback) {
+					callback();
+				}
+			},
+			{ once: true }
+		);
+
+		dom.content[0].addEventListener(
+			'hidden',
+			function () {
+				shown = false;
+			},
+			{ once: true }
+		);
+
+		$(dom.content).appendTo('body');
+
+		modal.show();
+	},
+
+	close: function (dte, callback) {
+		if (!shown) {
+			if (callback) {
+				callback();
+			}
+			return;
+		}
+
+		// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
+		// before it has been fully displayed
+		if (!fullyShown) {
+			dom.content[0].addEventListener(
+				'shown.bs.modal',
+				function () {
+					DataTable.Editor.display.bootstrap.close(dte, callback);
+				},
+				{ once: true }
+			);
+
+			return;
+		}
+
+		dom.content[0].addEventListener(
+			'hidden.bs.modal',
+			function () {
+				$(this).detach();
+			},
+			{ once: true }
+		);
+
+		modal.hide();
+
+		shown = false;
+		fullyShown = false;
+
+		if (callback) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	},
+
+	classes: {
+		modal: 'modal-dialog-scrollable modal-dialog-centered modal-lg'
+	}
+});
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bulma.js

@@ -0,0 +1,216 @@
+/*! Bulma integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-bm', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-bm')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+/*
+ * Set the default display controller to be our bulma control 
+ */
+DataTable.Editor.defaults.display = "bulma";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bulma
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "button",
+		"buttonInternal": "button",
+		"buttonSubmit": 'button is-primary',
+		"error": "DTE_Form_Error help is-danger"
+	},
+	"field": {
+		"wrapper": "DTE_Field field",
+		"label":   "label",
+		"error":   "DTE_Field_Error help is-danger",
+		"multiValue":    "card multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "card multi-restore"
+	},
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'button is-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'button is-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'button is-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bulma display controller - this is effectively a proxy to the Bulma
+ * modal control.
+ */
+
+const dom = {
+	content: $(
+		'<div class="modal DTED">'+
+			'<div class="modal-background"></div>'+
+			'<div class="modal-content"></div>'+
+			'<button class="modal-close is-large" aria-label="close"></button>'+
+		'</div>'
+	)
+};
+
+DataTable.Editor.display.bulma = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	/*
+	 * API methods
+	 */
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebm open.dtebm', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'input' );
+
+				$('input[type=checkbox], input[type=radio]', field.node() )
+					.removeClass('input');
+
+				$('select', field.node() )
+					.addClass( 'select' )
+					.parent().addClass('select');
+
+				$('select[multiple]', field.node() )
+					.parent().addClass('is-multiple');
+			} );
+		} );
+
+		return DataTable.Editor.display.bulma;
+	},
+
+	open: function ( dte, append, callback ) {
+		dom.content.find('.modal-content').children().detach();
+
+		$(append).removeClass('is-hidden').addClass('is-active');
+		$(append).find('.modal-title').addClass('title');
+		dom.content.find('.modal-content').append(append);
+		dom.content.addClass('is-active is-clipped');
+
+		dom.content.appendTo("body");
+		// Setup events on each show
+		$('.modal-close')
+			.attr('title', dte.i18n.close)
+			.one('click', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs5')
+			.on('mousedown.dte-bs5', 'div.modal-background', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal-background');
+			} );
+
+		$(document)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', 'div.modal-background', function (e) {
+				if ( $(e.target).hasClass('modal-background') && allowBackgroundClick ) {
+					dte.background();
+				}
+			} );
+
+		if ( callback ) {
+			callback();
+		}
+		return;
+	},
+
+	close: function ( dte, callback ) {
+		dom.content
+			.find('.is-active')
+			.removeClass('is-active')
+			.addClass('is-hidden');
+
+		dom.content.removeClass('is-active is-clipped');
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.bulma.min.js

@@ -0,0 +1,4 @@
+/*! Bulma integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(o){var n,a;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bm","datatables.net-editor"],function(e){return o(e,window,document)}):"object"==typeof exports?(n=require("jquery"),a=function(e,t){t.fn.dataTable||require("datatables.net-bm")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||n(e),a(e,t),o(t,0,e.document)}:(a(window,n),module.exports=o(n,window,window.document))):o(jQuery,window,document)}(function(a,e,d){"use strict";var t=a.fn.dataTable;t.Editor.defaults.display="bulma",a.extend(!0,t.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"button",buttonInternal:"button",buttonSubmit:"button is-primary",error:"DTE_Form_Error help is-danger"},field:{wrapper:"DTE_Field field",label:"label",error:"DTE_Field_Error help is-danger",multiValue:"card multi-value",multiInfo:"small",multiRestore:"card multi-restore"}}),a.extend(!0,t.ext.buttons,{create:{formButtons:{className:"button is-primary"}},edit:{formButtons:{className:"button is-primary"}},remove:{formButtons:{className:"button is-danger"}}}),t.Editor.fieldTypes.datatable.tableClass="table";const i={content:a('<div class="modal DTED"><div class="modal-background"></div><div class="modal-content"></div><button class="modal-close is-large" aria-label="close"></button></div>')};return t.Editor.display.bulma=a.extend(!0,{},t.Editor.models.displayController,{init:function(e){return e.on("displayOrder.dtebm open.dtebm",function(){a.each(e.s.fields,function(e,t){a("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("input"),a("input[type=checkbox], input[type=radio]",t.node()).removeClass("input"),a("select",t.node()).addClass("select").parent().addClass("select"),a("select[multiple]",t.node()).parent().addClass("is-multiple")})}),t.Editor.display.bulma},open:function(t,e,o){i.content.find(".modal-content").children().detach(),a(e).removeClass("is-hidden").addClass("is-active"),a(e).find(".modal-title").addClass("title"),i.content.find(".modal-content").append(e),i.content.addClass("is-active is-clipped"),i.content.appendTo("body"),a(".modal-close").attr("title",t.i18n.close).one("click",function(){t.close("icon")}).appendTo(a("div.modal-header",e));let n=!1;a(d).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal-background",function(e){n=a(e.target).hasClass("modal-background")}),a(d).off("click.dte-bs5").on("click.dte-bs5","div.modal-background",function(e){a(e.target).hasClass("modal-background")&&n&&t.background()}),o&&o()},close:function(e,t){i.content.find(".is-active").removeClass("is-active").addClass("is-hidden"),i.content.removeClass("is-active is-clipped"),t&&t()},node:function(){return i.content[0]}}),t.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.bulma.min.mjs

@@ -0,0 +1,4 @@
+/*! Bulma integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-bm";import Editor from"datatables.net-editor";let $=jQuery;DataTable.Editor.defaults.display="bulma",$.extend(!0,DataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"button",buttonInternal:"button",buttonSubmit:"button is-primary",error:"DTE_Form_Error help is-danger"},field:{wrapper:"DTE_Field field",label:"label",error:"DTE_Field_Error help is-danger",multiValue:"card multi-value",multiInfo:"small",multiRestore:"card multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"button is-primary"}},edit:{formButtons:{className:"button is-primary"}},remove:{formButtons:{className:"button is-danger"}}}),DataTable.Editor.fieldTypes.datatable.tableClass="table";const dom={content:$('<div class="modal DTED"><div class="modal-background"></div><div class="modal-content"></div><button class="modal-close is-large" aria-label="close"></button></div>')};DataTable.Editor.display.bulma=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(t){return t.on("displayOrder.dtebm open.dtebm",function(){$.each(t.s.fields,function(t,e){$("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("input"),$("input[type=checkbox], input[type=radio]",e.node()).removeClass("input"),$("select",e.node()).addClass("select").parent().addClass("select"),$("select[multiple]",e.node()).parent().addClass("is-multiple")})}),DataTable.Editor.display.bulma},open:function(e,t,a){dom.content.find(".modal-content").children().detach(),$(t).removeClass("is-hidden").addClass("is-active"),$(t).find(".modal-title").addClass("title"),dom.content.find(".modal-content").append(t),dom.content.addClass("is-active is-clipped"),dom.content.appendTo("body"),$(".modal-close").attr("title",e.i18n.close).one("click",function(){e.close("icon")}).appendTo($("div.modal-header",t));let o=!1;$(document).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal-background",function(t){o=$(t.target).hasClass("modal-background")}),$(document).off("click.dte-bs5").on("click.dte-bs5","div.modal-background",function(t){$(t.target).hasClass("modal-background")&&o&&e.background()}),a&&a()},close:function(t,e){dom.content.find(".is-active").removeClass("is-active").addClass("is-hidden"),dom.content.removeClass("is-active is-clipped"),e&&e()},node:function(){return dom.content[0]}});export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.bulma.mjs

@@ -0,0 +1,172 @@
+/*! Bulma integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-bm';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+/*
+ * Set the default display controller to be our bulma control 
+ */
+DataTable.Editor.defaults.display = "bulma";
+
+
+/*
+ * Change the default classes from Editor to be classes for Bulma
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header modal-header",
+		title: {
+			tag: 'h5',
+			class: 'modal-title'
+		}
+	},
+	"body": {
+		"wrapper": "DTE_Body modal-body"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer modal-footer"
+	},
+	"form": {
+		"tag": "form-horizontal",
+		"button": "button",
+		"buttonInternal": "button",
+		"buttonSubmit": 'button is-primary',
+		"error": "DTE_Form_Error help is-danger"
+	},
+	"field": {
+		"wrapper": "DTE_Field field",
+		"label":   "label",
+		"error":   "DTE_Field_Error help is-danger",
+		"multiValue":    "card multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "card multi-restore"
+	},
+} );
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'button is-primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'button is-primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'button is-danger'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
+
+/*
+ * Bulma display controller - this is effectively a proxy to the Bulma
+ * modal control.
+ */
+
+const dom = {
+	content: $(
+		'<div class="modal DTED">'+
+			'<div class="modal-background"></div>'+
+			'<div class="modal-content"></div>'+
+			'<button class="modal-close is-large" aria-label="close"></button>'+
+		'</div>'
+	)
+};
+
+DataTable.Editor.display.bulma = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	/*
+	 * API methods
+	 */
+	init: function ( dte ) {
+		// Add `form-control` to required elements
+		dte.on( 'displayOrder.dtebm open.dtebm', function () {
+			$.each( dte.s.fields, function ( key, field ) {
+				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
+					.addClass( 'input' );
+
+				$('input[type=checkbox], input[type=radio]', field.node() )
+					.removeClass('input');
+
+				$('select', field.node() )
+					.addClass( 'select' )
+					.parent().addClass('select');
+
+				$('select[multiple]', field.node() )
+					.parent().addClass('is-multiple');
+			} );
+		} );
+
+		return DataTable.Editor.display.bulma;
+	},
+
+	open: function ( dte, append, callback ) {
+		dom.content.find('.modal-content').children().detach();
+
+		$(append).removeClass('is-hidden').addClass('is-active');
+		$(append).find('.modal-title').addClass('title');
+		dom.content.find('.modal-content').append(append);
+		dom.content.addClass('is-active is-clipped');
+
+		dom.content.appendTo("body");
+		// Setup events on each show
+		$('.modal-close')
+			.attr('title', dte.i18n.close)
+			.one('click', function () {
+				dte.close('icon');
+			})
+			.appendTo($('div.modal-header', append));
+
+		// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
+		// want to trigger a background action.
+		let allowBackgroundClick = false;
+		$(document)
+			.off('mousedown.dte-bs5')
+			.on('mousedown.dte-bs5', 'div.modal-background', function (e) {
+				allowBackgroundClick = $(e.target).hasClass('modal-background');
+			} );
+
+		$(document)
+			.off('click.dte-bs5')
+			.on('click.dte-bs5', 'div.modal-background', function (e) {
+				if ( $(e.target).hasClass('modal-background') && allowBackgroundClick ) {
+					dte.background();
+				}
+			} );
+
+		if ( callback ) {
+			callback();
+		}
+		return;
+	},
+
+	close: function ( dte, callback ) {
+		dom.content
+			.find('.is-active')
+			.removeClass('is-active')
+			.addClass('is-hidden');
+
+		dom.content.removeClass('is-active is-clipped');
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.dataTables.js

@@ -0,0 +1,58 @@
+/*! DataTables styling integration for DataTables' Editor
+ * ©SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-dt', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-dt')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.dataTables.min.js

@@ -0,0 +1,4 @@
+/*! DataTables styling integration for DataTables' Editor
+ * ©SpryMedia Ltd - datatables.net/license
+ */
+!function(n){var d,o;"function"==typeof define&&define.amd?define(["jquery","datatables.net-dt","datatables.net-editor"],function(e){return n(e,window,document)}):"object"==typeof exports?(d=require("jquery"),o=function(e,t){t.fn.dataTable||require("datatables.net-dt")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||d(e),o(e,t),n(t,0,e.document)}:(o(window,d),module.exports=n(d,window,window.document))):n(jQuery,window,document)}(function(e,t,n){"use strict";return e.fn.dataTable.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.dataTables.min.mjs

@@ -0,0 +1,4 @@
+/*! DataTables styling integration for DataTables' Editor
+ * ©SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-dt";import Editor from"datatables.net-editor";let $=jQuery;export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.dataTables.mjs

@@ -0,0 +1,14 @@
+/*! DataTables styling integration for DataTables' Editor
+ * ©SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-dt';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.foundation.js

@@ -0,0 +1,171 @@
+/*! Foundation integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-zf', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-zf')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+/*
+ * Set the default display controller to be our foundation control 
+ */
+DataTable.Editor.defaults.display = "foundation";
+
+
+/*
+ * Change the default classes from Editor to be classes for Foundation
+ */
+$.extend( true, DataTable.Editor.classes, {
+	field: {
+		wrapper:         "DTE_Field row",
+		label:           "small-4 columns inline",
+		input:           "small-8 columns DTE_Field_Input",
+		error:           "error",
+		multiValue:      "panel radius multi-value",
+		multiInfo:       "small",
+		multiRestore:    "panel radius multi-restore",
+		"msg-labelInfo": "label secondary",
+		"msg-info":      "label secondary",
+		"msg-message":   "label secondary",
+		"msg-error":     "label alert"
+	},
+	form: {
+		button:  "button small",
+		buttonInternal:  "button small",
+		buttonSubmit: 'button small'
+	}
+} );
+
+
+/*
+ * Foundation display controller - this is effectively a proxy to the Foundation
+ * modal control.
+ */
+var shown = false;
+var reveal;
+
+const dom = {
+	content: $(
+		'<div class="reveal reveal-modal DTED" data-reveal></div>'
+	),
+	close: $('<button class="close close-button">&times;</div>')
+};
+
+DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function () {
+		if (! reveal) {
+			reveal = new window.Foundation.Reveal( dom.content, {
+				closeOnClick: false
+			} );
+		}
+
+		return DataTable.Editor.display.foundation;
+	},
+
+	open: function ( dte, append, callback ) {
+		var content = dom.content;
+		content.children().detach();
+		content.append( append );
+		content.prepend( dom.close );
+
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-zf')
+			.on('click.dte-zf', function () {
+				dte.close('icon');
+			});
+
+		$(document)
+			.off('click.dte-zf')
+			.on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function (e) {
+				if ( $(e.target).closest(dom.content).length ) {
+					return;
+				}
+				dte.background();
+			} );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+
+		$(dom.content)
+			.one('open.zf.reveal', function () {
+				if ( callback ) {
+					callback();
+				}
+			});
+
+		reveal.open();
+	},
+
+	close: function ( dte, callback ) {
+		if (shown) {
+			reveal.close();
+			shown = false;
+		}
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.foundation.min.js

@@ -0,0 +1,4 @@
+/*! Foundation integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(n){var o,l;"function"==typeof define&&define.amd?define(["jquery","datatables.net-zf","datatables.net-editor"],function(e){return n(e,window,document)}):"object"==typeof exports?(o=require("jquery"),l=function(e,t){t.fn.dataTable||require("datatables.net-zf")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||o(e),l(e,t),n(t,e,e.document)}:(l(window,o),module.exports=n(o,window,window.document))):n(jQuery,window,document)}(function(l,e,a){"use strict";var i,t=l.fn.dataTable,d=(t.Editor.defaults.display="foundation",l.extend(!0,t.Editor.classes,{field:{wrapper:"DTE_Field row",label:"small-4 columns inline",input:"small-8 columns DTE_Field_Input",error:"error",multiValue:"panel radius multi-value",multiInfo:"small",multiRestore:"panel radius multi-restore","msg-labelInfo":"label secondary","msg-info":"label secondary","msg-message":"label secondary","msg-error":"label alert"},form:{button:"button small",buttonInternal:"button small",buttonSubmit:"button small"}}),!1);const r={content:l('<div class="reveal reveal-modal DTED" data-reveal></div>'),close:l('<button class="close close-button">&times;</div>')};return t.Editor.display.foundation=l.extend(!0,{},t.Editor.models.displayController,{init:function(){return i=i||new e.Foundation.Reveal(r.content,{closeOnClick:!1}),t.Editor.display.foundation},open:function(t,e,n){var o=r.content;o.children().detach(),o.append(e),o.prepend(r.close),r.close.attr("title",t.i18n.close).off("click.dte-zf").on("click.dte-zf",function(){t.close("icon")}),l(a).off("click.dte-zf").on("click.dte-zf","div.reveal-modal-bg, div.reveal-overlay",function(e){l(e.target).closest(r.content).length||t.background()}),d?n&&n():(d=!0,l(r.content).one("open.zf.reveal",function(){n&&n()}),i.open())},close:function(e,t){d&&(i.close(),d=!1),t&&t()},node:function(){return r.content[0]}}),t.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.foundation.min.mjs

@@ -0,0 +1,4 @@
+/*! Foundation integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-zf";import Editor from"datatables.net-editor";let $=jQuery;DataTable.Editor.defaults.display="foundation",$.extend(!0,DataTable.Editor.classes,{field:{wrapper:"DTE_Field row",label:"small-4 columns inline",input:"small-8 columns DTE_Field_Input",error:"error",multiValue:"panel radius multi-value",multiInfo:"small",multiRestore:"panel radius multi-restore","msg-labelInfo":"label secondary","msg-info":"label secondary","msg-message":"label secondary","msg-error":"label alert"},form:{button:"button small",buttonInternal:"button small",buttonSubmit:"button small"}});var reveal,shown=!1;const dom={content:$('<div class="reveal reveal-modal DTED" data-reveal></div>'),close:$('<button class="close close-button">&times;</div>')};DataTable.Editor.display.foundation=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(){return reveal=reveal||new window.Foundation.Reveal(dom.content,{closeOnClick:!1}),DataTable.Editor.display.foundation},open:function(o,e,t){var l=dom.content;l.children().detach(),l.append(e),l.prepend(dom.close),dom.close.attr("title",o.i18n.close).off("click.dte-zf").on("click.dte-zf",function(){o.close("icon")}),$(document).off("click.dte-zf").on("click.dte-zf","div.reveal-modal-bg, div.reveal-overlay",function(e){$(e.target).closest(dom.content).length||o.background()}),shown?t&&t():(shown=!0,$(dom.content).one("open.zf.reveal",function(){t&&t()}),reveal.open())},close:function(e,o){shown&&(reveal.close(),shown=!1),o&&o()},node:function(){return dom.content[0]}});export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.foundation.mjs

@@ -0,0 +1,127 @@
+/*! Foundation integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-zf';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+/*
+ * Set the default display controller to be our foundation control 
+ */
+DataTable.Editor.defaults.display = "foundation";
+
+
+/*
+ * Change the default classes from Editor to be classes for Foundation
+ */
+$.extend( true, DataTable.Editor.classes, {
+	field: {
+		wrapper:         "DTE_Field row",
+		label:           "small-4 columns inline",
+		input:           "small-8 columns DTE_Field_Input",
+		error:           "error",
+		multiValue:      "panel radius multi-value",
+		multiInfo:       "small",
+		multiRestore:    "panel radius multi-restore",
+		"msg-labelInfo": "label secondary",
+		"msg-info":      "label secondary",
+		"msg-message":   "label secondary",
+		"msg-error":     "label alert"
+	},
+	form: {
+		button:  "button small",
+		buttonInternal:  "button small",
+		buttonSubmit: 'button small'
+	}
+} );
+
+
+/*
+ * Foundation display controller - this is effectively a proxy to the Foundation
+ * modal control.
+ */
+var shown = false;
+var reveal;
+
+const dom = {
+	content: $(
+		'<div class="reveal reveal-modal DTED" data-reveal></div>'
+	),
+	close: $('<button class="close close-button">&times;</div>')
+};
+
+DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function () {
+		if (! reveal) {
+			reveal = new window.Foundation.Reveal( dom.content, {
+				closeOnClick: false
+			} );
+		}
+
+		return DataTable.Editor.display.foundation;
+	},
+
+	open: function ( dte, append, callback ) {
+		var content = dom.content;
+		content.children().detach();
+		content.append( append );
+		content.prepend( dom.close );
+
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off('click.dte-zf')
+			.on('click.dte-zf', function () {
+				dte.close('icon');
+			});
+
+		$(document)
+			.off('click.dte-zf')
+			.on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function (e) {
+				if ( $(e.target).closest(dom.content).length ) {
+					return;
+				}
+				dte.background();
+			} );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+
+		$(dom.content)
+			.one('open.zf.reveal', function () {
+				if ( callback ) {
+					callback();
+				}
+			});
+
+		reveal.open();
+	},
+
+	close: function ( dte, callback ) {
+		if (shown) {
+			reveal.close();
+			shown = false;
+		}
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.content[0];
+	}
+} );
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.jqueryui.js

@@ -0,0 +1,183 @@
+/*! jQuery UI integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-jqui', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-jqui')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+var doingClose = false;
+
+/*
+ * Set the default display controller to be our foundation control 
+ */
+DataTable.Editor.defaults.display = "jqueryui";
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
+$.extend( true, DataTable.Editor.classes, {
+	form: {
+		button:  buttonClass,
+		buttonInternal:  buttonClass,
+		buttonSubmit: buttonClass
+	}
+} );
+
+var dialouge;
+
+/*
+ * jQuery UI display controller - this is effectively a proxy to the jQuery UI
+ * modal control.
+ */
+DataTable.Editor.display.jqueryui = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function () {
+		if (! dialouge) {
+			dialouge = $('<div class="DTED"></div>')
+				.css('display', 'none')
+				.appendTo('body')
+				.dialog( $.extend( true, DataTable.Editor.display.jqueryui.modalOptions, {
+					autoOpen: false,
+					buttons: { "A": function () {} }, // fake button so the button container is created
+					closeOnEscape: false // allow editor's escape function to run
+				} ) );
+		}
+
+		return DataTable.Editor.display.jqueryui;
+	},
+
+	open: function ( dte, append, callback ) {
+		dialouge
+			.children()
+			.detach();
+
+		dialouge
+			.append( append )
+			.dialog( 'open' );
+
+		$(dte.dom.formError).appendTo(
+			dialouge.parent().find('div.ui-dialog-buttonpane')
+		);
+
+		dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
+		dialouge.parent().addClass('DTED');
+
+		// Modify the Editor buttons to be jQuery UI suitable
+		var buttons = $(dte.dom.buttons)
+			.children()
+			.addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
+			.each( function () {
+				$(this).wrapInner( '<span class="ui-button-text"></span>' );
+			} );
+
+		// Move the buttons into the jQuery UI button set
+		dialouge.parent().find('div.ui-dialog-buttonset')
+			.children()
+			.detach();
+
+		dialouge.parent().find('div.ui-dialog-buttonset')
+			.append( buttons.parent() );
+
+		dialouge
+			.parent()
+			.find('button.ui-dialog-titlebar-close')
+			.off('click')
+			.on('click', function () {
+				if ( ! doingClose ) {
+					dte.close('icon');
+				}
+			});
+
+		// Need to know when the dialogue is closed using its own trigger
+		// so we can reset the form
+		$(dialouge)
+			.off( 'dialogclose.dte-ju' )
+			.on( 'dialogclose.dte-ju', function () {
+				if ( ! doingClose ) {
+					dte.close();
+				}
+			} );
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	close: function ( dte, callback ) {
+		if ( dialouge ) {
+			// Don't want to trigger a close() call from dialogclose!
+			doingClose = true;
+			dialouge.dialog( 'close' );
+			doingClose = false;
+		}
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dialouge[0];
+	},
+
+	// jQuery UI dialogues perform their own focus capture
+	captureFocus: false
+} );
+
+
+DataTable.Editor.display.jqueryui.modalOptions = {
+	width: 600,
+	modal: true
+};
+
+
+return DataTable.Editor;
+}));

src/main/resources/static/plugins/datatable_editor/js/editor.jqueryui.min.js

@@ -0,0 +1,4 @@
+/*! jQuery UI integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!function(e){var o,i;"function"==typeof define&&define.amd?define(["jquery","datatables.net-jqui","datatables.net-editor"],function(t){return e(t,window,document)}):"object"==typeof exports?(o=require("jquery"),i=function(t,n){n.fn.dataTable||require("datatables.net-jqui")(t,n),n.fn.dataTable.Editor||require("datatables.net-editor")(t,n)},"undefined"==typeof window?module.exports=function(t,n){return t=t||window,n=n||o(t),i(t,n),e(n,0,t.document)}:(i(window,o),module.exports=e(o,window,window.document))):e(jQuery,window,document)}(function(o,t,n){"use strict";var i,e=o.fn.dataTable,d=!1,u=(e.Editor.defaults.display="jqueryui","btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only");return o.extend(!0,e.Editor.classes,{form:{button:u,buttonInternal:u,buttonSubmit:u}}),e.Editor.display.jqueryui=o.extend(!0,{},e.Editor.models.displayController,{init:function(){return i=i||o('<div class="DTED"></div>').css("display","none").appendTo("body").dialog(o.extend(!0,e.Editor.display.jqueryui.modalOptions,{autoOpen:!1,buttons:{A:function(){}},closeOnEscape:!1})),e.Editor.display.jqueryui},open:function(t,n,e){i.children().detach(),i.append(n).dialog("open"),o(t.dom.formError).appendTo(i.parent().find("div.ui-dialog-buttonpane")),i.parent().find(".ui-dialog-title").html(t.dom.header.innerHTML),i.parent().addClass("DTED");n=o(t.dom.buttons).children().addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only").each(function(){o(this).wrapInner('<span class="ui-button-text"></span>')});i.parent().find("div.ui-dialog-buttonset").children().detach(),i.parent().find("div.ui-dialog-buttonset").append(n.parent()),i.parent().find("button.ui-dialog-titlebar-close").off("click").on("click",function(){d||t.close("icon")}),o(i).off("dialogclose.dte-ju").on("dialogclose.dte-ju",function(){d||t.close()}),e&&e()},close:function(t,n){i&&(d=!0,i.dialog("close"),d=!1),n&&n()},node:function(){return i[0]},captureFocus:!1}),e.Editor.display.jqueryui.modalOptions={width:600,modal:!0},e.Editor});

src/main/resources/static/plugins/datatable_editor/js/editor.jqueryui.min.mjs

@@ -0,0 +1,4 @@
+/*! jQuery UI integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+import jQuery from"jquery";import DataTable from"datatables.net-jqui";import Editor from"datatables.net-editor";let $=jQuery;var dialouge,doingClose=!1,buttonClass=(DataTable.Editor.defaults.display="jqueryui","btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only");$.extend(!0,DataTable.Editor.classes,{form:{button:buttonClass,buttonInternal:buttonClass,buttonSubmit:buttonClass}}),DataTable.Editor.display.jqueryui=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(){return dialouge=dialouge||$('<div class="DTED"></div>').css("display","none").appendTo("body").dialog($.extend(!0,DataTable.Editor.display.jqueryui.modalOptions,{autoOpen:!1,buttons:{A:function(){}},closeOnEscape:!1})),DataTable.Editor.display.jqueryui},open:function(t,o,a){dialouge.children().detach(),dialouge.append(o).dialog("open"),$(t.dom.formError).appendTo(dialouge.parent().find("div.ui-dialog-buttonpane")),dialouge.parent().find(".ui-dialog-title").html(t.dom.header.innerHTML),dialouge.parent().addClass("DTED");o=$(t.dom.buttons).children().addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only").each(function(){$(this).wrapInner('<span class="ui-button-text"></span>')});dialouge.parent().find("div.ui-dialog-buttonset").children().detach(),dialouge.parent().find("div.ui-dialog-buttonset").append(o.parent()),dialouge.parent().find("button.ui-dialog-titlebar-close").off("click").on("click",function(){doingClose||t.close("icon")}),$(dialouge).off("dialogclose.dte-ju").on("dialogclose.dte-ju",function(){doingClose||t.close()}),a&&a()},close:function(t,o){dialouge&&(doingClose=!0,dialouge.dialog("close"),doingClose=!1),o&&o()},node:function(){return dialouge[0]},captureFocus:!1}),DataTable.Editor.display.jqueryui.modalOptions={width:600,modal:!0};export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.jqueryui.mjs

@@ -0,0 +1,139 @@
+/*! jQuery UI integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+import jQuery from 'jquery';
+import DataTable from 'datatables.net-jqui';
+import Editor from 'datatables.net-editor';
+
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
+
+var doingClose = false;
+
+/*
+ * Set the default display controller to be our foundation control 
+ */
+DataTable.Editor.defaults.display = "jqueryui";
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
+$.extend( true, DataTable.Editor.classes, {
+	form: {
+		button:  buttonClass,
+		buttonInternal:  buttonClass,
+		buttonSubmit: buttonClass
+	}
+} );
+
+var dialouge;
+
+/*
+ * jQuery UI display controller - this is effectively a proxy to the jQuery UI
+ * modal control.
+ */
+DataTable.Editor.display.jqueryui = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	init: function () {
+		if (! dialouge) {
+			dialouge = $('<div class="DTED"></div>')
+				.css('display', 'none')
+				.appendTo('body')
+				.dialog( $.extend( true, DataTable.Editor.display.jqueryui.modalOptions, {
+					autoOpen: false,
+					buttons: { "A": function () {} }, // fake button so the button container is created
+					closeOnEscape: false // allow editor's escape function to run
+				} ) );
+		}
+
+		return DataTable.Editor.display.jqueryui;
+	},
+
+	open: function ( dte, append, callback ) {
+		dialouge
+			.children()
+			.detach();
+
+		dialouge
+			.append( append )
+			.dialog( 'open' );
+
+		$(dte.dom.formError).appendTo(
+			dialouge.parent().find('div.ui-dialog-buttonpane')
+		);
+
+		dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
+		dialouge.parent().addClass('DTED');
+
+		// Modify the Editor buttons to be jQuery UI suitable
+		var buttons = $(dte.dom.buttons)
+			.children()
+			.addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
+			.each( function () {
+				$(this).wrapInner( '<span class="ui-button-text"></span>' );
+			} );
+
+		// Move the buttons into the jQuery UI button set
+		dialouge.parent().find('div.ui-dialog-buttonset')
+			.children()
+			.detach();
+
+		dialouge.parent().find('div.ui-dialog-buttonset')
+			.append( buttons.parent() );
+
+		dialouge
+			.parent()
+			.find('button.ui-dialog-titlebar-close')
+			.off('click')
+			.on('click', function () {
+				if ( ! doingClose ) {
+					dte.close('icon');
+				}
+			});
+
+		// Need to know when the dialogue is closed using its own trigger
+		// so we can reset the form
+		$(dialouge)
+			.off( 'dialogclose.dte-ju' )
+			.on( 'dialogclose.dte-ju', function () {
+				if ( ! doingClose ) {
+					dte.close();
+				}
+			} );
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	close: function ( dte, callback ) {
+		if ( dialouge ) {
+			// Don't want to trigger a close() call from dialogclose!
+			doingClose = true;
+			dialouge.dialog( 'close' );
+			doingClose = false;
+		}
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dialouge[0];
+	},
+
+	// jQuery UI dialogues perform their own focus capture
+	captureFocus: false
+} );
+
+
+DataTable.Editor.display.jqueryui.modalOptions = {
+	width: 600,
+	modal: true
+};
+
+
+export default DataTable.Editor;

src/main/resources/static/plugins/datatable_editor/js/editor.semanticui.js

@@ -0,0 +1,261 @@
+/*! Semantic UI integration for DataTables' Editor
+ * © SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-se', 'datatables.net-editor'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-se')(root, $);
+			}
+
+			if ( ! $.fn.dataTable.Editor ) {
+				require('datatables.net-editor')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+
+/*
+ * Set the default display controller to be Semantic UI modal
+ */
+DataTable.Editor.defaults.display = "semanticui";
+
+/*
+ * Change the default classes from Editor to be classes for Bootstrap
+ */
+$.extend( true, DataTable.Editor.classes, {
+	"header": {
+		"wrapper": "DTE_Header header"
+	},
+	"body": {
+		"wrapper": "DTE_Body content"
+	},
+	"footer": {
+		"wrapper": "DTE_Footer actions"
+	},
+	"form": {
+		"tag": "ui form",
+		"button": "ui button",
+		"buttonInternal": "ui button",
+		"buttonSubmit": "ui button primary",
+		"content": 'DTE_Form_Content'
+	},
+	"field": {
+		"wrapper": "DTE_Field inline fields",
+		"label":   "right aligned five wide field",
+		"input":   "eight wide field DTE_Field_Input",
+
+		"error":   "error has-error",
+		"msg-labelInfo": "ui small",
+		"msg-info":      "ui small",
+		"msg-message":   "ui message small",
+		"msg-error":     "ui error message small",
+		"multiValue":    "ui message multi-value",
+		"multiInfo":     "small",
+		"multiRestore":  "ui message multi-restore"
+	},
+	inline: {
+		wrapper: "DTE DTE_Inline ui form"
+	},
+	bubble: {
+		table: "DTE_Bubble_Table ui form",
+		bg: "ui dimmer modals page transition visible active"
+	}
+} );
+
+
+$.extend( true, DataTable.ext.buttons, {
+	create: {
+		formButtons: {
+			className: 'primary'
+		}
+	},
+	edit: {
+		formButtons: {
+			className: 'primary'
+		}
+	},
+	remove: {
+		formButtons: {
+			className: 'negative'
+		}
+	}
+} );
+
+DataTable.Editor.fieldTypes.datatable.tableClass = 'ui table';
+
+/*
+ * Bootstrap display controller - this is effectively a proxy to the Bootstrap
+ * modal control.
+ */
+
+// Single shared model for all Editor instances
+const dom = {
+	modal: $('<div class="ui modal DTED"></div>'),
+	close: $('<i class="close icon"/>')
+}
+let shown = false;
+let lastAppend;
+let allowHide = false;
+
+DataTable.Editor.display.semanticui = $.extend( true, {}, DataTable.Editor.models.displayController, {
+	/*
+	 * API methods
+	 */
+	init: function ( dte ) {
+		// Make select lists semantic ui dropdowns if possible
+		if ($.fn.dropdown) {
+			dte.on( 'displayOrder.dtesu open.dtesu', function () {
+				$.each( dte.s.fields, function ( key, field ) {
+					$('select', field.node())
+						.addClass('fluid')
+						.dropdown();
+				} );
+			} );
+		}
+
+		return DataTable.Editor.display.semanticui;
+	},
+
+	open: function ( dte, append, callback ) {
+		var modal = dom.modal;
+		var appendChildren = $(append).children();
+
+		// Because we can't use a single element, we need to insert the existing
+		// children back into their previous host so that can be reused later
+		if (lastAppend) {
+			modal.children().appendTo(lastAppend);
+		}
+
+		lastAppend = append;
+
+		// Clean up any existing elements and then insert the elements to
+		// display. In Semantic UI we need to have the header, content and
+		// actions at the top level of the modal rather than as children of a
+		// wrapper.
+		modal
+			.children()
+			.detach();
+
+		modal
+			.append( appendChildren )
+			.prepend( modal.children('.header') ) // order is important
+			.addClass( append.className )
+			.prepend( dom.close );
+
+		dom.close
+			.attr('title', dte.i18n.close)
+			.off( 'click.dte-se' )
+			.on( 'click.dte-se', function () {
+				dte.close('icon');
+				return false;
+			} );
+
+		$(document)
+			.off('click.dte-se')
+			.on('click.dte-se', 'div.ui.dimmer.modals', function (e) {
+				if ( $(e.target).hasClass('dimmer') ) {
+					dte.background();
+				}
+			} );
+
+		if ( shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		shown = true;
+
+		$(modal)
+			.modal( 'setting', {
+				autofocus: false,
+				closable: false,
+				onVisible: function () {
+					// Can only give elements focus when shown
+					if ( dte.s.setFocus ) {
+						dte.s.setFocus.focus();
+					}
+
+					if ( callback ) {
+						callback();
+					}
+				},
+				onHide: function () {
+					return allowHide;
+				},
+				onHidden: function () {
+					$(append).append( appendChildren );
+					shown = false;
+				}
+			} )
+			.modal( 'show' );
+	},
+
+	close: function ( dte, callback ) {
+		if ( ! shown ) {
+			if ( callback ) {
+				callback();
+			}
+			return;
+		}
+
+		allowHide = true;
+		dom.modal.modal('hide');
+		allowHide = false;
+
+		lastAppend = null;
+		shown = false;
+
+		if ( callback ) {
+			callback();
+		}
+	},
+
+	node: function () {
+		return dom.modal[0];
+	}
+} );
+
+
+return DataTable.Editor;
+}));