penpot/plugins/apps/rename-layers-plugin/src/app/app.component.html

<ng-template #iconArrowRight>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon"
  >
    <line x1="5" y1="12" x2="19" y2="12"></line>
    <polyline points="12 5 19 12 12 19"></polyline>
  </svg>
</ng-template>

<div class="wrapper">
  <div role="tablist" class="nav-tabs">
    <button
      (click)="selectTab('add')"
      [class.active]="tab === 'add'"
      type="button"
      role="tab"
      class="tab"
    >
      Add text
    </button>
    <button
      (click)="selectTab('replace')"
      [class.active]="tab === 'replace'"
      type="button"
      role="tab"
      class="tab"
    >
      Replace text
    </button>
  </div>

  @if (tab === 'add') {
    <div class="form">
      <p class="explanation body-s">
        Select layers to rename (otherwise it will apply to all layers) and
        enter the text you want to add.
      </p>
      <div class="form-group">
        <label class="input-label-hidden" for="search">Add text</label>
        <input
          #addElement
          [(ngModel)]="addText"
          class="input"
          type="text"
          placeholder="[Original layer name]"
          id="addText"
          (keydown.enter)="updateText()"
        />
      </div>
      <button
        type="button"
        data-appearance="primary"
        [class.btn-feedback]="btnFeedback"
        [disabled]="addText === '[Original layer name]' || !addText"
        (click)="updateText()"
      >
        @if (!btnFeedback) {
          <span class="text-btn">Add</span>
        }
        @if (btnFeedback) {
          <span class="icon icon-btn">
            <svg viewBox="0 0 16 16" fill="none">
              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
            </svg>
          </span>
        }
      </button>
      <p class="body-s preview">Previsualization:</p>
      <ul class="preview-list">
        @for (preview of previewList(); track preview) {
          <li class="preview-item">
            <span class="original" [title]="preview.name">{{
              preview.name
            }}</span>
            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
            <span class="result" [title]="resultAddText(preview)">{{
              resultAddText(preview)
            }}</span>
          </li>
        }
      </ul>
    </div>
  }

  @if (tab === 'replace') {
    <div class="form">
      <p class="explanation body-s">
        Select layers to rename (otherwise it will apply to all layers) and
        enter the replacement text.
      </p>
      <div class="form-group">
        <label class="input-label-hidden" for="search">Search</label>
        <input
          [(ngModel)]="textToReplace.search"
          class="input"
          type="text"
          placeholder="Search"
          id="search"
          #searchElement
          (keydown)="previewReplace()"
        />
      </div>
      <div class="form-group">
        <label class="input-label-hidden" for="replace">Replace</label>
        <input
          [(ngModel)]="textToReplace.replace"
          class="input"
          type="text"
          placeholder="Write the new text"
          id="replace"
          (keydown.enter)="updateText()"
        />
      </div>
      <button
        type="button"
        data-appearance="primary"
        (click)="updateText()"
        [class.btn-feedback]="btnFeedback"
        [disabled]="!textToReplace.search"
      >
        @if (!btnFeedback) {
          <span class="text-btn">Replace</span>
        }
        @if (btnFeedback) {
          <span class="icon icon-btn icon-tick">
            <svg width="16" height="16" fill="none">
              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
            </svg>
          </span>
        }
      </button>
      <p class="body-s preview">Previsualization:</p>
      <ul class="preview-list replace">
        @if (previewList().length === 0) {
          <li class="no-match">No matches found</li>
        }
        @for (preview of previewList(); track preview) {
          <li class="preview-item">
            <span
              class="original"
              [innerHTML]="highlightMatch(preview.name)"
              [title]="preview.name"
            ></span>
            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
            <span class="result" [title]="resultReplaceText(preview.name)">{{
              resultReplaceText(preview.name)
            }}</span>
          </li>
        }
      </ul>
    </div>
  }
</div>