matrix-dimension/web/app/configs/widget/custom_widget/custom_widget-config.component.html

<div class="config-wrapper">
    <img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
    <div class="config-header">
        <img src="/img/avatars/customwidget.png">
        <h4>Configure custom widgets</h4>
    </div>
    <div class="config-content" *ngIf="isLoading">
        <div class="row">
            <div class="col-md-12">
                <p><i class="fa fa-circle-notch fa-spin"></i> Loading widgets...</p>
            </div>
        </div>
    </div>
    <div class="config-content" *ngIf="!isLoading">
        <form (submit)="addWidget()" novalidate name="addForm">
            <div class="row">
                <div class="col-md-8" style="margin-bottom: 12px;">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control"
                               placeholder="Custom widget URL"
                               [(ngModel)]="newWidgetUrl" name="newWidgetUrl"
                               [disabled]="isUpdating">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-success" [disabled]="isUpdating">
                                <i class="fa fa-plus-circle"></i> Add Widget
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-12 removable widget-item" *ngFor="let widget of widgets trackById">
                    {{ widget.name || widget.url }} <span class="text-muted" *ngIf="widget.ownerId">(added by {{ widget.ownerId }})</span>
                    <button type="button" class="btn btn-outline-info btn-sm" (click)="editWidget(widget)"
                            style="margin-top: -5px;" [disabled]="isUpdating">
                        <i class="fa fa-pencil"></i> Edit Widget
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeWidget(widget)"
                            style="margin-top: -5px;" [disabled]="isUpdating">
                        <i class="fa fa-times"></i> Remove Widget
                    </button>
                    <div *ngIf="isWidgetToggled(widget)">
                        <label>
                            Widget Name
                            <input type="text" class="form-control"
                                   placeholder="Custom Widget"
                                   [(ngModel)]="widget.newName" name="widget-name-{{widget.id}}"
                                   [disabled]="isUpdating">
                        </label>
                        <label>
                            Widget URL
                            <input type="text" class="form-control"
                                   placeholder="Custom widget URL"
                                   [(ngModel)]="widget.newUrl" name="widget-url-{{widget.id}}"
                                   [disabled]="isUpdating">
                        </label>
                        <button type="button" class="btn btn-primary btn-sm" (click)="saveWidget(widget)">Save
                        </button>
                        <button type="button" class="btn btn-outline btn-sm" (click)="toggleWidget(widget)">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>