vendure/packages/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 | sentenceCase }}</label>
                <clr-checkbox-wrapper *ngIf="getArgType(arg) === 'boolean'">
                    <input
                        type="checkbox"
                        clrCheckbox
                        [formControlName]="arg.name"
                        [id]="arg.name"
                        [vdrDisabled]="readonly"
                    />
                </clr-checkbox-wrapper>
                <input
                    *ngIf="isIntInput(arg)"
                    [name]="arg.name"
                    type="number"
                    step="1"
                    [readonly]="readonly"
                    [formControlName]="arg.name"
                />
                <input
                    *ngIf="isStringWithoutOptions(arg)"
                    [name]="arg.name"
                    type="text"
                    [readonly]="readonly"
                    [formControlName]="arg.name"
                />
                <input
                    *ngIf="getArgType(arg) === 'datetime'"
                    [name]="arg.name"
                    type="date"
                    [readonly]="readonly"
                    [formControlName]="arg.name"
                />
                <vdr-currency-input
                    *ngIf="isMoneyInput(arg)"
                    [formControlName]="arg.name"
                    [readonly]="readonly"
                    [currencyCode]="activeChannel?.currencyCode"
                ></vdr-currency-input>
                <vdr-percentage-suffix-input
                    *ngIf="isPercentageInput(arg)"
                    [readonly]="readonly"
                    [formControlName]="arg.name"
                ></vdr-percentage-suffix-input>
                <vdr-facet-value-selector
                    [readonly]="readonly"
                    [facets]="facets"
                    [formControlName]="arg.name"
                    *ngIf="getArgType(arg) === 'facetValueIds' && facets"
                ></vdr-facet-value-selector>
                <select clrSelect [formControlName]="arg.name" *ngIf="isStringWithOptions(arg)" [vdrDisabled]="readonly">
                    <option *ngFor="let option of getStringOptions(arg)" [value]="option.value">
                        {{ option.label || option.value }}
                    </option>
                </select>
            </div>
        </form>
    </div>
    <div class="card-footer" *ngIf="!readonly">
        <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>