Clone button for array item.

src/Squidex/app/features/content/shared/array-editor.component.html

@@ -11,6 +11,7 @@
             [language]="language"
             [languages]="languages"
             (toggle)="hide($event)"
+            (cloning)="addItem(itemForm.value)"
             (removing)="removeItem(i)">
         </sqx-array-item>
     </div>

src/Squidex/app/features/content/shared/array-editor.component.ts

@@ -47,8 +47,8 @@ export class ArrayEditorComponent {
         this.form.removeArrayItem(this.field, this.language, index);
     }
 
-    public addItem() {
-        this.form.insertArrayItem(this.field, this.language);
+    public addItem(value: {}) {
+        this.form.insertArrayItem(this.field, this.language, value);
     }
 
     public sort(controls: AbstractControl[]) {

src/Squidex/app/features/content/shared/array-item.component.html

@@ -5,17 +5,24 @@
     
             <span class="header-text text-decent">Item #{{index + 1}}</span>
 
-            <a class="btn btn-secondary btn-link" [class.hidden]="!isHidden" (click)="toggle.emit(false)" title="Open all items">
+            <button class="btn btn-secondary btn-link" [class.hidden]="!isHidden" (click)="toggle.emit(false); $event.preventDefault()" title="Open all items">
                 <i class="icon-plus-square"></i>
-            </a>
-            <a class="btn btn-secondary btn-link" [class.hidden]="isHidden" (click)="toggle.emit(true)" title="Close all items">
+            </button>
+            <button class="btn btn-secondary btn-link" [class.hidden]="isHidden" (click)="toggle.emit(true); $event.preventDefault()" title="Close all items">
                 <i class="icon-minus-square"></i>
-            </a>
+            </button>
         </span>
 
-        <button type="button" class="btn btn-link btn-danger float-right" (click)="removing.emit(); $event.preventDefault()">
-            <i class="icon-bin2"></i>
-        </button>
+        <span class="float-right">
+            <button type="button" class="btn btn-link btn-secondary" (click)="cloning.emit(); $event.preventDefault()">
+                <i class="icon-clone"></i>
+            </button>
+    
+            <button type="button" class="btn btn-link btn-danger" (click)="removing.emit(); $event.preventDefault()">
+                <i class="icon-bin2"></i>
+            </button>
+
+        </span>
     </div>
     
     <div class="card-body" [class.hidden]="isHidden">

src/Squidex/app/features/content/shared/array-item.component.ts

@@ -28,6 +28,9 @@ export class ArrayItemComponent implements OnChanges {
     @Output()
     public removing = new EventEmitter();
 
+    @Output()
+    public cloning = new EventEmitter();
+
     @Output()
     public toggle = new EventEmitter<boolean>();
 

src/Squidex/app/shared/state/contents.forms.ts

@@ -374,22 +374,22 @@ export class EditContentForm extends Form<FormGroup> {
         this.findArrayItemForm(field, language).removeAt(index);
     }
 
-    public insertArrayItem(field: RootFieldDto, language: AppLanguageDto) {
+    public insertArrayItem(field: RootFieldDto, language: AppLanguageDto, value?: {}) {
         if (field.nested.length > 0) {
             const formControl = this.findArrayItemForm(field, language);
 
-            this.addArrayItem(field, language, formControl);
+            this.addArrayItem(field, language, formControl, value);
         }
     }
 
-    private addArrayItem(field: RootFieldDto, language: AppLanguageDto | null, partitionForm: FormArray) {
+    private addArrayItem(field: RootFieldDto, language: AppLanguageDto | null, partitionForm: FormArray, value?: {}) {
         const itemForm = new FormGroup({});
 
         let isOptional = field.isLocalizable && !!language && language.isOptional;
 
         for (let nested of field.nested) {
             const nestedValidators = FieldValidatorsFactory.createValidators(nested, isOptional);
-            const nestedDefault = FieldDefaultValue.get(nested);
+            const nestedDefault = value ? value[nested.name] : FieldDefaultValue.get(nested);
 
             itemForm.setControl(nested.name, new FormControl(nestedDefault, nestedValidators));
         }

src/Squidex/app/theme/icomoon/demo-files/demo.css

@@ -147,16 +147,16 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 24px;
+  font-size: 28px;
 }
 .fs2 {
   font-size: 24px;
 }
 .fs3 {
-  font-size: 20px;
+  font-size: 24px;
 }
 .fs4 {
-  font-size: 32px;
+  font-size: 20px;
 }
 .fs5 {
   font-size: 32px;

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -113,6 +113,7 @@
 <glyph unicode="&#xe967;" glyph-name="hide-all" d="M408.9 541.2l-35.3-37 138.1-131.9 138 131.9-35.3 37-102.7-98.1zM511.7 355.8l-138.1-131.9 35.3-37 102.8 98.1 102.7-98.1 35.3 37zM256 857.6c-28.314 0-51.2-22.886-51.2-51.2v-256h51.2v256h307.2v-153.6c0-28.314 22.886-51.2 51.2-51.2h153.6v-512h-512v460.8h-51.2v-460.8c0-28.314 22.886-51.2 51.2-51.2h512c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2zM614.4 770.2l117.4-117.4h-117.4zM348.394 944.012c-28.314 0-51.2-22.886-51.2-51.2v-23.7h51.2v23.7h307.2l204.8-204.8v-512h-23.8v-51.2h23.8c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2z" />
 <glyph unicode="&#xe968;" glyph-name="plus-square" d="M810.667 853.334h-597.333c-72.533 0-128-55.467-128-128v-597.333c0-72.533 55.467-128 128-128h597.333c72.533 0 128 55.467 128 128v597.333c0 72.533-55.467 128-128 128zM853.333 128c0-25.6-17.067-42.667-42.667-42.667h-597.333c-25.6 0-42.667 17.067-42.667 42.667v597.333c0 25.6 17.067 42.667 42.667 42.667h597.333c25.6 0 42.667-17.067 42.667-42.667v-597.333zM682.667 469.334h-128v128c0 25.6-17.067 42.667-42.667 42.667s-42.667-17.067-42.667-42.667v-128h-128c-25.6 0-42.667-17.067-42.667-42.667s17.067-42.667 42.667-42.667h128v-128c0-25.6 17.067-42.667 42.667-42.667s42.667 17.067 42.667 42.667v128h128c25.6 0 42.667 17.067 42.667 42.667s-17.067 42.667-42.667 42.667z" />
 <glyph unicode="&#xe969;" glyph-name="minus-square" d="M810.667 853.334h-597.333c-72.533 0-128-55.467-128-128v-597.333c0-72.533 55.467-128 128-128h597.333c72.533 0 128 55.467 128 128v597.333c0 72.533-55.467 128-128 128zM853.333 128c0-25.6-17.067-42.667-42.667-42.667h-597.333c-25.6 0-42.667 17.067-42.667 42.667v597.333c0 25.6 17.067 42.667 42.667 42.667h597.333c25.6 0 42.667-17.067 42.667-42.667v-597.333zM682.667 469.334h-341.333c-25.6 0-42.667-17.067-42.667-42.667s17.067-42.667 42.667-42.667h341.333c25.6 0 42.667 17.067 42.667 42.667s-17.067 42.667-42.667 42.667z" />
+<glyph unicode="&#xe96a;" glyph-name="clone" d="M950.857 18.286v621.714c0 9.714-8.571 18.286-18.286 18.286h-621.714c-9.714 0-18.286-8.571-18.286-18.286v-621.714c0-9.714 8.571-18.286 18.286-18.286h621.714c9.714 0 18.286 8.571 18.286 18.286zM1024 640v-621.714c0-50.286-41.143-91.429-91.429-91.429h-621.714c-50.286 0-91.429 41.143-91.429 91.429v621.714c0 50.286 41.143 91.429 91.429 91.429h621.714c50.286 0 91.429-41.143 91.429-91.429zM804.571 859.428v-91.429h-73.143v91.429c0 9.714-8.571 18.286-18.286 18.286h-621.714c-9.714 0-18.286-8.571-18.286-18.286v-621.714c0-9.714 8.571-18.286 18.286-18.286h91.429v-73.143h-91.429c-50.286 0-91.429 41.143-91.429 91.429v621.714c0 50.286 41.143 91.429 91.429 91.429h621.714c50.286 0 91.429-41.143 91.429-91.429z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?5dzhok');
-  src:  url('fonts/icomoon.eot?5dzhok#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?5dzhok') format('truetype'),
-    url('fonts/icomoon.woff?5dzhok') format('woff'),
-    url('fonts/icomoon.svg?5dzhok#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?mo2rwz');
+  src:  url('fonts/icomoon.eot?mo2rwz#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?mo2rwz') format('truetype'),
+    url('fonts/icomoon.woff?mo2rwz') format('woff'),
+    url('fonts/icomoon.svg?mo2rwz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,99 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-clone:before {
+  content: "\e96a";
+}
+.icon-control-Tags:before {
+  content: "\e963";
+}
+.icon-control-Checkboxes:before {
+  content: "\e962";
+}
+.icon-control-Html:before {
+  content: "\e960";
+}
+.icon-single-content:before {
+  content: "\e958";
+}
+.icon-multiple-content:before {
+  content: "\e957";
+}
+.icon-type-Array:before {
+  content: "\e956";
+}
+.icon-exclamation:before {
+  content: "\e955";
+}
+.icon-orleans:before {
+  content: "\e94b";
+}
+.icon-document-lock:before {
+  content: "\e949";
+}
+.icon-document-unpublish:before {
+  content: "\e93f";
+}
+.icon-angle-down:before {
+  content: "\e900";
+}
+.icon-angle-left:before {
+  content: "\e901";
+}
+.icon-angle-right:before {
+  content: "\e931";
+}
+.icon-angle-up:before {
+  content: "\e903";
+}
+.icon-api:before {
+  content: "\e945";
+}
+.icon-assets:before {
+  content: "\e948";
+}
+.icon-bug:before {
+  content: "\e93d";
+}
+.icon-caret-down:before {
+  content: "\e92c";
+}
+.icon-caret-left:before {
+  content: "\e92a";
+}
+.icon-caret-right:before {
+  content: "\e929";
+}
+.icon-caret-up:before {
+  content: "\e92b";
+}
+.icon-contents:before {
+  content: "\e946";
+}
+.icon-trigger-ContentChanged:before {
+  content: "\e946";
+}
+.icon-control-Date:before {
+  content: "\e936";
+}
+.icon-control-DateTime:before {
+  content: "\e937";
+}
+.icon-control-Markdown:before {
+  content: "\e938";
+}
+.icon-grid:before {
+  content: "\f00a";
+}
+.icon-list1:before {
+  content: "\f0c9";
+}
+.icon-user-o:before {
+  content: "\e932";
+}
+.icon-rules:before {
+  content: "\e947";
+}
 .icon-minus-square:before {
   content: "\e969";
 }
@@ -48,6 +141,51 @@
 .icon-download:before {
   content: "\e93e";
 }
+.icon-hour-glass:before {
+  content: "\e954";
+}
+.icon-spinner:before {
+  content: "\e953";
+}
+.icon-clock:before {
+  content: "\e950";
+}
+.icon-bin2:before {
+  content: "\e902";
+}
+.icon-earth:before {
+  content: "\e9ca";
+}
+.icon-elapsed:before {
+  content: "\e943";
+}
+.icon-google:before {
+  content: "\e93b";
+}
+.icon-lock:before {
+  content: "\e934";
+}
+.icon-microsoft:before {
+  content: "\e940";
+}
+.icon-pause:before {
+  content: "\e92f";
+}
+.icon-play:before {
+  content: "\e930";
+}
+.icon-reset:before {
+  content: "\e92e";
+}
+.icon-settings2:before {
+  content: "\e92d";
+}
+.icon-timeout:before {
+  content: "\e944";
+}
+.icon-unlocked:before {
+  content: "\e933";
+}
 .icon-show:before {
   content: "\e964";
 }
@@ -126,6 +264,9 @@
 .icon-info:before {
   content: "\e93c";
 }
+.icon-control-Stars:before {
+  content: "\e93a";
+}
 .icon-control-Color:before {
   content: "\e94d";
 }
@@ -294,93 +435,3 @@
 .icon-user:before {
   content: "\e928";
 }
-.icon-control-Tags:before {
-  content: "\e963";
-}
-.icon-control-Checkboxes:before {
-  content: "\e962";
-}
-.icon-control-Html:before {
-  content: "\e960";
-}
-.icon-single-content:before {
-  content: "\e958";
-}
-.icon-multiple-content:before {
-  content: "\e957";
-}
-.icon-type-Array:before {
-  content: "\e956";
-}
-.icon-exclamation:before {
-  content: "\e955";
-}
-.icon-orleans:before {
-  content: "\e94b";
-}
-.icon-document-lock:before {
-  content: "\e949";
-}
-.icon-document-unpublish:before {
-  content: "\e93f";
-}
-.icon-angle-down:before {
-  content: "\e900";
-}
-.icon-angle-left:before {
-  content: "\e901";
-}
-.icon-angle-right:before {
-  content: "\e931";
-}
-.icon-angle-up:before {
-  content: "\e903";
-}
-.icon-api:before {
-  content: "\e945";
-}
-.icon-assets:before {
-  content: "\e948";
-}
-.icon-bug:before {
-  content: "\e93d";
-}
-.icon-caret-down:before {
-  content: "\e92c";
-}
-.icon-caret-left:before {
-  content: "\e92a";
-}
-.icon-caret-right:before {
-  content: "\e929";
-}
-.icon-caret-up:before {
-  content: "\e92b";
-}
-.icon-contents:before {
-  content: "\e946";
-}
-.icon-trigger-ContentChanged:before {
-  content: "\e946";
-}
-.icon-control-Date:before {
-  content: "\e936";
-}
-.icon-control-DateTime:before {
-  content: "\e937";
-}
-.icon-control-Markdown:before {
-  content: "\e938";
-}
-.icon-grid:before {
-  content: "\f00a";
-}
-.icon-list1:before {
-  content: "\f0c9";
-}
-.icon-user-o:before {
-  content: "\e932";
-}
-.icon-rules:before {
-  content: "\e947";
-}