app.component.html

<header>
  <p align="center">
    <img width="20%" height="20%" src="../assets/logo.svg" alt="project logo" />
  </p>
  <h1>Edit in place examples</h1>
</header>

<section>
  <h4>Sample input</h4>
  <article>
    <editable
      data-testid="sample-input"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('inputText', 'inputControl')"
      (cancel)="cancelSingleField('inputText', 'inputControl')"
    >
      <ng-template viewMode>
        {{ inputText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            editableOnEnter
            editableOnEscape
            data-testid="sample-input-edit"
            placeholder="Title"
            type="text"
            [formControl]="inputControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample input triggered by single click</h4>
  <article>
    <editable
      data-testid="sample-input-click"
      (save)="updateSingleField('inputText', 'inputControl')"
      (cancel)="cancelSingleField('inputText', 'inputControl')"
    >
      <ng-template viewMode>
        {{ inputText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            data-testid="sample-input-click-edit"
            placeholder="Title"
            type="text"
            [formControl]="inputControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample input triggered by hovering</h4>
  <article>
    <editable
      data-testid="sample-input-hover"
      openBindingEvent="mouseover"
      closeBindingEvent="mouseout"
      (save)="updateSingleField('inputText', 'inputControl')"
      (cancel)="cancelSingleField('inputText', 'inputControl')"
    >
      <ng-template viewMode>
        {{ inputText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            data-testid="sample-input-hover-edit"
            placeholder="Title"
            type="text"
            [formControl]="inputControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample input with focus</h4>
  <article>
    <editable
      data-testid="sample-input-focus"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('inputFocusText', 'inputFocusControl')"
      (cancel)="cancelSingleField('inputFocusText', 'inputFocusControl')"
    >
      <ng-template viewMode>
        {{ inputFocusText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            data-testid="sample-input-focus-edit"
            editableFocusable
            placeholder="Title"
            type="text"
            [formControl]="inputFocusControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample input with action buttons</h4>
  <article>
    <editable
      data-testid="sampleForm-btn"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('inputButtonsText', 'inputButtonsControl')"
      (cancel)="cancelSingleField('inputButtonsText', 'inputButtonsControl')"
    >
      <ng-template viewMode>
        {{ inputButtonsText }}
      </ng-template>
      <ng-template editMode>
        <div class="d-flex align-items-baseline">
          <div class="form-group">
            <input
              class="form-control"
              data-testid="sampleForm-btn-edit"
              placeholder="Title"
              type="text"
              [formControl]="inputButtonsControl"
            />
          </div>
          <button class="btn btn-success" data-testid="sampleForm-save-btn" editableOnSave>Save</button>
          <button class="btn btn-secondary" data-testid="sampleForm-cancel-btn" editableOnCancel>Cancel</button>
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample select</h4>
  <article>
    <editable
      data-testid="sample-select"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('selectText', 'selectControl')"
      (cancel)="cancelSingleField('selectText', 'selectControl')"
    >
      <ng-template viewMode>
        {{ selectText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <select
            class="form-control"
            data-testid="sample-select-edit"
            name="sample-select"
            [formControl]="selectControl"
          >
            <option *ngFor="let option of selectOptions" [value]="option">{{ option }}</option>
          </select>
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample checkbox</h4>
  <article>
    <editable
      data-testid="sample-checkbox"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('checkboxText', 'checkboxControl')"
      (cancel)="cancelSingleField('checkboxText', 'checkboxControl')"
    >
      <ng-template viewMode>
        {{ checkboxText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-check">
          <input
            class="form-check-input"
            data-testid="sample-checkbox-edit"
            type="checkbox"
            [formControl]="checkboxControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample range</h4>
  <article>
    <editable
      data-testid="sample-range"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('rangeText', 'rangeControl')"
      (cancel)="cancelSingleField('rangeText', 'rangeControl')"
    >
      <ng-template viewMode>
        {{ rangeText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            data-testid="sample-range-edit"
            type="range"
            min="0"
            max="10"
            [formControl]="rangeControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Sample radio</h4>
  <article>
    <editable
      data-testid="sample-radio"
      [openBindingEvent]="openBindingEvent"
      (save)="updateSingleField('radioText', 'radioControl')"
      (cancel)="cancelSingleField('radioText', 'radioControl')"
    >
      <ng-template viewMode>
        {{ radioText }}
      </ng-template>
      <ng-template editMode>
        <div class="sample-radio" *ngFor="let option of radioOptions">
          <label>{{ option }}</label>
          <input
            name="sample-radio"
            [value]="option"
            data-testid="sample-radio-edit"
            type="radio"
            [formControl]="radioControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<section>
  <h4>Table example</h4>
  <article>
    <table class="table">
      <colgroup>
        <col class="name" />
        <col class="role" />
        <col class="active" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Active</th>
      </tr>
      <tr *ngFor="let account of accounts; index as index">
        <td>
          <editable data-testid="table-name" (save)="updateField(index, 'name')" (cancel)="cancel(index, 'name')">
            <ng-template viewMode>
              {{ account.name }}
            </ng-template>
            <ng-template editMode>
              <div class="form-group">
                <input class="form-control" placeholder="name" type="text" [formControl]="getControl(index, 'name')" />
              </div>
            </ng-template>
          </editable>
        </td>
        <td>
          <editable data-testid="table-role" (save)="updateField(index, 'role')" (cancel)="cancel(index, 'role')">
            <ng-template viewMode>
              {{ account.role }}
            </ng-template>
            <ng-template editMode>
              <div class="form-group">
                <select class="form-control" name="role" [formControl]="getControl(index, 'role')">
                  <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
                </select>
              </div>
            </ng-template>
          </editable>
        </td>
        <td>
          <editable
            data-testid="table-active"
            (save)="updateField(index, 'isActive')"
            (cancel)="cancel(index, 'isActive')"
          >
            <ng-template viewMode>
              <!-- nested value for testing purposes -->
              <span>{{ account.isActive }}</span>
            </ng-template>
            <ng-template editMode>
              <div class="form-check">
                <input
                  class="form-check-input"
                  placeholder="isActive"
                  type="checkbox"
                  [formControl]="getControl(index, 'isActive')"
                />
              </div>
            </ng-template>
          </editable>
        </td>
      </tr>
    </table>
  </article>
</section>

<section
  editableGroup
  (editableModeChange)="handleModeChange($event)"
  (save)="updateGroupedEdition()"
  (cancel)="cancelGroupedEdition()"
>
  <h4>Grouped inputs</h4>
  <aside>
    <button class="btn btn-primary" *ngIf="mode === 'view'" data-testid="groupedForm-edit-btn" editableGroupEdit>
      Edit
    </button>
    <button class="btn btn-success" *ngIf="mode === 'edit'" data-testid="groupedForm-save-btn" editableGroupSave>
      Save
    </button>
    <button class="btn btn-secondary" *ngIf="mode === 'edit'" data-testid="groupedForm-cancel-btn" editableGroupCancel>
      Cancel
    </button>
  </aside>
  <form [formGroup]="groupedForm">
    <article>
      <editable data-testid="grouped-input-1">
        <ng-template viewMode>
          {{ identity.name }}
        </ng-template>
        <ng-template editMode>
          <div class="form-group">
            <input
              class="form-control"
              data-testid="grouped-input-edit-1"
              placeholder="Name"
              type="text"
              formControlName="name"
            />
          </div>
        </ng-template>
      </editable>
    </article>
    <article>
      <editable data-testid="grouped-input-2">
        <ng-template viewMode>
          {{ identity.city }}
        </ng-template>
        <ng-template editMode>
          <div class="form-group">
            <input
              class="form-control"
              data-testid="grouped-input-edit-2"
              placeholder="City"
              type="text"
              formControlName="city"
            />
          </div>
        </ng-template>
      </editable>
    </article>
    <article>
      <editable data-testid="grouped-input-3">
        <ng-template viewMode>
          {{ identity.country }}
        </ng-template>
        <ng-template editMode>
          <div class="form-group">
            <input
              class="form-control"
              data-testid="grouped-input-edit-3"
              placeholder="Country"
              type="text"
              formControlName="country"
            />
          </div>
        </ng-template>
      </editable>
    </article>
  </form>
</section>

<section>
  <h4>Sample enable flag</h4>
  <div class="form-check">
    <input
      #enableFlagInput
      class="form-check-input"
      type="checkbox"
      id="enable-flag"
      name="enable-flag"
      checked
      data-testid="sample-enable-flag-check"
    />
    <label for="enable-flag" class="form-check-label">Allows edit</label>
  </div>
  <article>
    <editable
      data-testid="sample-enable-flag"
      [enabled]="enableFlagInput.checked"
      (save)="updateSingleField('inputText', 'inputControl')"
      (cancel)="cancelSingleField('inputText', 'inputControl')"
    >
      <ng-template viewMode>
        {{ inputText }}
      </ng-template>
      <ng-template editMode>
        <div class="form-group">
          <input
            class="form-control"
            data-testid="sample-enable-flag-edit"
            placeholder="Title"
            type="text"
            [formControl]="inputControl"
          />
        </div>
      </ng-template>
    </editable>
  </article>
</section>

<div data-testid="outside"></div>