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

<div class="field" *ngIf="formModel">
    <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"></sqx-control-errors>

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

		<ng-template #noEditor>
			<ng-container [ngSwitch]="field.properties.fieldType">
                <ng-container *ngSwitchCase="'Array'">
                    <sqx-array-editor
                        [canUnset]="canUnset"
                        [formModel]="formModel"
                        [formContext]="formContext"
                        [language]="language"
                        [languages]="languages">
                    </sqx-array-editor>
                </ng-container>
                <ng-container *ngSwitchCase="'Assets'">
                    <sqx-assets-editor [formControl]="editorControl"></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'">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" type="checkbox" [formControl]="editorControl" id="{{uniqueId}}" sqxIndeterminateValue>
                                <label class="custom-control-label" for="{{uniqueId}}"></label>
                            </div>
                        </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 [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="custom-select" [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="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
									{{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"
                                [formContext]="formContext"
                                [language]="language"
                                [languages]="languages"
                                [schemaIds]="field.rawProperties.schemaIds">
                            </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 *ngSwitchCase="'Checkboxes'">
                            <sqx-references-checkboxes
                                [formControl]="editorControl" 
                                [language]="language"
								[schemaId]="field.rawProperties.singleId">
                            </sqx-references-checkboxes>
                        </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"></sqx-stock-photo-editor>
						</ng-container>
						<ng-container *ngSwitchCase="'Dropdown'">
							<select class="custom-select" [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="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
									{{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="custom-select" [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>

    <div *ngIf="canUnset" class="unset" title="Unset value">
        <button type="button" class="btn btn-sm btn-secondary" [disabled]="isEmpty | async" (click)="unset()">
            <i class="icon-close"></i>
        </button>
    </div>

    <sqx-form-hint *ngIf="field.properties.hints?.length > 0">
        <span [innerHTML]="field.properties.hints | sqxMarkdownInline"></span>
    </sqx-form-hint>
</div>