squidex/frontend/app/features/content/shared/forms/field-editor.component.html

<div [class.ui]="!field.properties.isContentField" *ngIf="field">
    <ng-container *ngIf="field.properties.isContentField">
        <label>
            {{field.displayName}} {{displaySuffix}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
        </label> 
    
        <small class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</small>
    
        <sqx-control-errors *ngIf="form" [for]="editorControl" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
    </ng-container>

	<div>
		<ng-container *ngIf="field.properties.editorUrl; else noEditor">
            <sqx-iframe-editor [url]="field.properties.editorUrl"
                [context]="formContext"
                [formControl]="editorControl"
                [formValue]="form?.value | async">
            </sqx-iframe-editor>
		</ng-container>

		<ng-template #noEditor>
			<ng-container [ngSwitch]="field.properties.fieldType">
                <ng-container *ngSwitchCase="'Array'">
                    <sqx-array-editor 
                        [arrayControl]="arrayControl"
                        [form]="form"
                        [formContext]="formContext"
                        [field]="rootField"
                        [language]="language"
                        [languages]="languages">
                    </sqx-array-editor>
                </ng-container>
                <ng-container *ngSwitchCase="'Assets'">
                    <sqx-assets-editor [formControl]="editorControl" [isCompact]="isCompact"></sqx-assets-editor>
                </ng-container>
                <ng-container *ngSwitchCase="'Boolean'">
                    <ng-container [ngSwitch]="field.rawProperties.editor">
                        <ng-container *ngSwitchCase="'Toggle'">
                            <sqx-toggle [formControl]="editorControl" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Checkbox'">
                            <input type="checkbox" [formControl]="editorControl" class="form-check" sqxIndeterminateValue />
                        </ng-container>
                    </ng-container>
                </ng-container>
                <ng-container *ngSwitchCase="'DateTime'">
                    <sqx-date-time-editor enforceTime="true" [mode]="field.rawProperties.editor" [formControl]="editorControl"></sqx-date-time-editor>
                </ng-container>
				<ng-container *ngSwitchCase="'Geolocation'">
					<sqx-geolocation-editor [isCompact]="isCompact" [formControl]="editorControl"></sqx-geolocation-editor>
				</ng-container>
				<ng-container *ngSwitchCase="'Json'">
					<sqx-json-editor height="350" [formControl]="editorControl"></sqx-json-editor>
				</ng-container>
				<ng-container *ngSwitchCase="'Number'">
					<ng-container [ngSwitch]="field.rawProperties.editor">
						<ng-container *ngSwitchCase="'Input'">
							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
						</ng-container>
						<ng-container *ngSwitchCase="'Stars'">
							<sqx-stars [formControl]="editorControl" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
						</ng-container>
						<ng-container *ngSwitchCase="'Dropdown'">
							<select class="form-control" [formControl]="editorControl">
								<option [ngValue]="null"></option>
								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
							</select>
						</ng-container>
						<ng-container *ngSwitchCase="'Radio'">
							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
								<input class="form-check-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" />
								<label class="form-check-label">
									{{value}}
								</label>
							</div>
						</ng-container>
					</ng-container>
				</ng-container>
				<ng-container *ngSwitchCase="'References'">
                    <ng-container [ngSwitch]="field.rawProperties.editor">
                        <ng-container *ngSwitchCase="'List'">
                            <sqx-references-editor
                                [formControl]="editorControl" 
                                [allowDuplicates]="field.rawProperties.allowDuplicated"
                                [language]="language"
                                [languages]="languages"
                                [schemaIds]="field.rawProperties.schemaIds"
                                [isCompact]="isCompact">
                            </sqx-references-editor>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Dropdown'">
                            <sqx-references-dropdown
                                [formControl]="editorControl" 
                                [language]="language"
								[schemaId]="field.rawProperties.singleId">
                            </sqx-references-dropdown>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Tags'">
                            <sqx-references-tags
                                [formControl]="editorControl" 
                                [language]="language"
								[schemaId]="field.rawProperties.singleId">
                            </sqx-references-tags>
                        </ng-container>
                    </ng-container>
				</ng-container>
				<ng-container *ngSwitchCase="'String'">
					<ng-container [ngSwitch]="field.rawProperties.editor">
						<ng-container *ngSwitchCase="'Input'">
							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
						</ng-container>
						<ng-container *ngSwitchCase="'Slug'">
							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
						</ng-container>
						<ng-container *ngSwitchCase="'TextArea'">
							<textarea class="form-control" [formControl]="editorControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
						</ng-container>
						<ng-container *ngSwitchCase="'RichText'">
							<sqx-rich-editor [formControl]="editorControl" #editor></sqx-rich-editor>
						</ng-container>
						<ng-container *ngSwitchCase="'Html'">
							<sqx-code-editor height="350"  [formControl]="editorControl" mode="ace/mode/html"></sqx-code-editor>
						</ng-container>
						<ng-container *ngSwitchCase="'Markdown'">
							<sqx-markdown-editor [formControl]="editorControl"></sqx-markdown-editor>
						</ng-container>
						<ng-container *ngSwitchCase="'StockPhoto'">
							<sqx-stock-photo-editor [formControl]="editorControl" [isCompact]="isCompact"></sqx-stock-photo-editor>
						</ng-container>
						<ng-container *ngSwitchCase="'Dropdown'">
							<select class="form-control" [formControl]="editorControl">
								<option [ngValue]="null"></option>
								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
							</select>
						</ng-container>
						<ng-container *ngSwitchCase="'Radio'">
							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="editorControl" [name]="uniqueId" />
								<label class="form-check-label">
									{{value}}
								</label>
							</div>
						</ng-container>
						<ng-container *ngSwitchCase="'Color'">
                            <sqx-color-picker [formControl]="editorControl" [placeholder]="field.displayPlaceholder"></sqx-color-picker>
						</ng-container>
					</ng-container>
				</ng-container>
				<ng-container *ngSwitchCase="'Tags'">
                    <ng-container [ngSwitch]="field.rawProperties.editor">
                        <ng-container *ngSwitchCase="'Tags'">
                            <sqx-tag-editor [formControl]="editorControl" [placeholder]="field.displayPlaceholder" [suggestions]="field.rawProperties.allowedValues"></sqx-tag-editor>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Checkboxes'">
                            <sqx-checkbox-group [formControl]="editorControl" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Dropdown'">
                            <select multiple class="form-control" [formControl]="editorControl">
                                <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                            </select>
                        </ng-container>
                    </ng-container>
                </ng-container>
                <ng-container *ngSwitchCase="'UI'">
                    <h4 class="ui-separator">{{field.displayName}}</h4>
                </ng-container>
			</ng-container>
		</ng-template>
	</div>

	<ng-container *ngIf="field.properties.hints; let hints">
		<sqx-form-hint *ngIf="hints.length > 0">
			{{hints}}
		</sqx-form-hint>
	</ng-container>
</div>