vendure/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html

<div class="card" *ngIf="operation">
    <div class="card-block">{{ interpolateDescription() }}</div>
    <div class="card-block" *ngIf="operation.args?.length">
        <form [formGroup]="form" *ngIf="operation" class="operation-inputs">
            <div *ngFor="let arg of operation.args" class="arg-row">
                <label>{{ arg.name | titlecase }}</label>
                <div *ngIf="arg.type === 'boolean'" class="checkbox">
                    <input type="checkbox" [formControlName]="arg.name" [id]="arg.name" />
                    <label [for]="arg.name"></label>
                </div>
                <input
                    *ngIf="arg.type === 'int'"
                    [name]="arg.name"
                    type="number"
                    step="1"
                    [formControlName]="arg.name"
                />
                <input
                    *ngIf="arg.type === 'string'"
                    [name]="arg.name"
                    type="text"
                    [formControlName]="arg.name"
                />
                <input
                    *ngIf="arg.type === 'datetime'"
                    [name]="arg.name"
                    type="date"
                    [formControlName]="arg.name"
                />
                <vdr-currency-input
                    *ngIf="arg.type === 'money'"
                    [formControlName]="arg.name"
                ></vdr-currency-input>
                <vdr-percentage-suffix-input
                    *ngIf="arg.type === 'percentage'"
                    [formControlName]="arg.name"
                ></vdr-percentage-suffix-input>
                <vdr-facet-value-selector
                    [facets]="facets"
                    [formControlName]="arg.name"
                    *ngIf="arg.type === 'facetValueIds' && facets"
                ></vdr-facet-value-selector>
            </div>
        </form>
    </div>
    <div class="card-footer">
        <button class="btn btn-sm btn-link btn-warning" (click)="remove.emit(operation)">
            <clr-icon shape="times"></clr-icon>
            {{ 'common.remove' | translate }}
        </button>
    </div>
</div>