web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<nz-input-group
  [nzSearch]="type === 'search'"
  [nzPrefixIcon]="prefixIcon || (type === 'search' ? 'search' : undefined)"
  [nzSuffixIcon]="suffixIcon"
  [nzPrefix]="prefixTpl"
  [nzSuffix]="suffixTpl"
  [nzSize]="size"
  [style]="groupStyle"
>
  <input
    nz-input
    [id]="id || ''"
    [type]="passwordVisible ? 'text' : type"
    [name]="name || ''"
    [style]="inputStyle || ''"
    [required]="required || false"
    [readonly]="readonly || false"
    [disabled]="disabled || false"
    [placeholder]="placeholder || ''"
    [(ngModel)]="value"
    (ngModelChange)="onChange($event)"
  />
</nz-input-group>

<ng-template #prefixTpl>
  <ng-container *ngIf="prefix; else noPrefixContent">
    <ng-template [ngTemplateOutlet]="prefix"></ng-template>
  </ng-container>
  <ng-template #noPrefixContent></ng-template>
</ng-template>

<ng-template #suffixTpl>
  <ng-container *ngIf="suffix; else noSuffixContent">
    <ng-template [ngTemplateOutlet]="suffix"></ng-template>
  </ng-container>
  <ng-template #noSuffixContent>
    @if (type === 'password') {<i
      nz-icon
      [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
      (click)="passwordVisible = !passwordVisible"
    ></i>
    } @if (allowClear && value) {
    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="onClear($event)"></i>
    }
  </ng-template>
</ng-template>