Add button for removal of chooser widget

client/src/components/Modal.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     props: {

client/src/components/book-navigation/NavigationSidebar.vue

@@ -24,7 +24,7 @@
 
   import sidebarMixin from '@/mixins/sidebar';
 
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     mixins: [sidebarMixin],

client/src/components/content-block-form/ContentBlockForm.vue

@@ -63,7 +63,7 @@
                 :element="content"
                 class="content-block-form__segment"
                 @update="update(index, $event, outer)"
-                @remove="remove(outer, index)"
+                @remove="remove(outer, index, $event)"
                 @up="up(outer, index)"
                 @down="down(outer, index)"
                 @top="top(outer, index)"
@@ -83,7 +83,7 @@
           class="content-block-form__segment"
           v-else
           @update="update(outer, $event)"
-          @remove="remove(outer)"
+          @remove="remove(outer, undefined, $event)"
           @up="up(outer)"
           @down="down(outer)"
           @top="top(outer)"
@@ -220,14 +220,18 @@
           ];
         }
       },
-      remove(outer, inner) {
+      remove(outer, inner, askForConfirmation = true) {
-        this.$modal.open('confirm')
+        if(askForConfirmation) {
-          .then(() => {
+          this.$modal.open('confirm')
-            this.executeRemoval(outer, inner);
+            .then(() => {
-          })
+              this.executeRemoval(outer, inner);
-          .catch(() => {
+            })
+            .catch(() => {
 
-          });
+            });
+        } else {
+          this.executeRemoval(outer, inner);
+        }
       },
       shift(outer, inner, distance) {
         if (inner === undefined) {

client/src/components/content-block-form/ContentElement.vue

@@ -6,6 +6,7 @@
       v-bind="element"
       v-if="isChooser"
       @change-type="changeType"
+      @remove="$emit('remove', false)"
     />
     <!-- Content Forms -->
     <content-form-section
@@ -159,9 +160,6 @@
           },
         });
       },
-      debug(arg) {
-        console.log(arg);
-      },
       changeUrl(value) {
         this._updateProperty(value, 'url');
       },

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="content-block-element-chooser-widget__wrapper">
+    <button
+      class="content-block-element-chooser-widget__remove-button icon-button"
+      @click="remove"
+    >
+      <cross-icon class="icon-button__icon" />
+    </button>
+    <h3 class="content-block-element-chooser-widget__heading">
+      Neuer Inhalt
+    </h3>
     <template
       v-if="includeListOption"
     >
-      <h3 class="content-block-element-chooser-widget__heading">
-        Neuer Inhalt
-      </h3>
       <checkbox
         class="content-block-element-chooser-widget__list-toggle"
         :checked="convertToList"
+        data-cy="convert-to-list-checkbox"
         label="Neues Aufzählungszeichen hinzufügen"
         @input="convertToList=$event"
       />
@@ -98,6 +105,7 @@
 
   import formElementIcons from '@/components/ui/form-element-icons';
   import TitleIcon from '@/components/icons/TitleIcon';
+  import CrossIcon from '@/components/icons/CrossIcon';
 
   export default {
     props: {
@@ -105,30 +113,34 @@
       index: {},
       hideAssignment: {
         type: Boolean,
-        default: false
+        default: false,
       },
       includeListOption: {
         type: Boolean,
-        default: false
+        default: false,
-      }
+      },
     },
 
     components: {
+      CrossIcon,
       TitleIcon,
       Checkbox,
-      ...formElementIcons
+      ...formElementIcons,
     },
 
     data: () => ({
-      convertToList: false
+      convertToList: false,
     }),
 
     methods: {
       changeType(type) {
         this.$emit('change-type', {
           type,
-          convertToList: this.convertToList
+          convertToList: this.convertToList,
         });
+      },
+      remove() {
+        this.$emit('remove');
       }
     },
   };
@@ -148,10 +160,11 @@
     grid-column-gap: 0px;
     font-family: $sans-serif-font-family;
     text-align: center;
-    //border: 2px solid $color-silver-dark;
-    //border-radius: 12px;
     position: relative;
 
+    // grid position in wrapper element
+    grid-column: 1 / span 2;
+
     /*IE10+*/
     & > :nth-child(1) {
       -ms-grid-column: 1;
@@ -182,13 +195,25 @@
       -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
     }
 
+    &__wrapper {
+      display: grid;
+      grid-template-columns: 1fr 50px;
+    }
+
+    &__remove-button {
+      grid-column: 2;
+    }
+
     &__heading {
       @include heading-4;
       margin-bottom: $medium-spacing;
+      grid-column: 1;
+      grid-row: 1;
     }
 
     &__list-toggle {
       margin-bottom: $medium-spacing;
+      grid-column: 1;
     }
 
     &__link {

client/src/components/profile/ProfileSidebar.vue

@@ -84,7 +84,7 @@
   import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
 

client/src/layouts/FullScreenLayout.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     components: {

client/src/layouts/SimpleLayout.vue

@@ -20,7 +20,7 @@
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
   import enableFooter from '@/helpers/footer';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     components: {