igniteui-angular-sovn/src/lib/input-group/input-group.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<div class="igx-input-group__wrapper" *ngIf="isTypeBox; else bundle">
    <ng-container *ngTemplateOutlet="bundle"></ng-container>
</div>

<div class="igx-input-group__hint" (click)="hintClickHandler($event)">
    <ng-content select="igx-hint, [igxHint]"></ng-content>
</div>

<ng-template #label>
    <ng-content select="[igxLabel]"></ng-content>
</ng-template>

<ng-template #input>
    <ng-content select="[igxInput]"></ng-content>
</ng-template>

<ng-template #prefix>
    <ng-content select="igx-prefix, [igxPrefix]"></ng-content>
</ng-template>

<ng-template #uploadButton>
    <igx-prefix *ngIf="isFileType" class="igx-input-group__upload-button">
        <button
            igxButton="raised"
            type="button"
            (click)="uploadButtonHandler()"
            [displayDensity]="displayDensity"
            [disabled]="disabled"
            [ngClass]="{ 'igx-input-group__upload-button': isTypeLine }"
        >
            {{ resourceStrings.igx_input_upload_button }}
        </button>
    </igx-prefix>
</ng-template>

<ng-template #files>
    <div
        *ngIf="isFileType"
        class="igx-input-group__file-input"
        [title]="fileNames"
    >
        <span>{{ fileNames }}</span>
    </div>
</ng-template>

<ng-template #clear>
    <igx-suffix
        class="igx-input-group__clear-icon"
        *ngIf="isFileType && isFilled"
        (click)="clearValueHandler()"
        (keydown.Enter)="clearValueHandler()"
        title="clear files"
        tabindex="0"
    >
        <igx-icon>clear</igx-icon>
    </igx-suffix>
</ng-template>

<ng-template #suffix>
    <ng-content select="igx-suffix, [igxSuffix]"></ng-content>
</ng-template>

<ng-template #materialBundle>
    <div class="igx-input-group__bundle">
        <div class="igx-input-group__bundle-start">
            <ng-container *ngTemplateOutlet="prefix"></ng-container>
            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
        </div>

        <ng-container>
            <div class="igx-input-group__notch">
                <ng-container *ngTemplateOutlet="label"></ng-container>
            </div>
        </ng-container>

        <div class="igx-input-group__bundle-main">
            <ng-container *ngTemplateOutlet="input"></ng-container>
            <ng-container *ngTemplateOutlet="files"></ng-container>
        </div>

        <div class="igx-input-group__filler"></div>

        <div class="igx-input-group__bundle-end">
            <ng-container *ngTemplateOutlet="clear"></ng-container>
            <ng-container *ngTemplateOutlet="suffix"></ng-container>
        </div>

        <div class="igx-input-group__line" *ngIf="hasBorder"></div>
    </div>
</ng-template>

<ng-template #fluentBundle>
    <ng-container *ngTemplateOutlet="label"></ng-container>

    <div class="igx-input-group__bundle">
        <div class="igx-input-group__bundle-start">
            <ng-container *ngTemplateOutlet="prefix"></ng-container>
            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
        </div>


        <div class="igx-input-group__bundle-main">
            <ng-container *ngTemplateOutlet="input"></ng-container>
            <ng-container *ngTemplateOutlet="files"></ng-container>
        </div>

        <div class="igx-input-group__bundle-end">
            <ng-container *ngTemplateOutlet="clear"></ng-container>
            <ng-container *ngTemplateOutlet="suffix"></ng-container>
        </div>

        <div class="igx-input-group__line" *ngIf="hasBorder"></div>
    </div>
</ng-template>

<ng-template #bootstrapBundle>
    <ng-container *ngTemplateOutlet="label"></ng-container>

    <div class="igx-input-group__bundle">
        <div class="igx-input-group__bundle-start">
            <ng-container *ngTemplateOutlet="prefix"></ng-container>
            <ng-container *ngTemplateOutlet="uploadButton"></ng-container>
        </div>

        <ng-container *ngTemplateOutlet="input"></ng-container>
        <ng-container *ngTemplateOutlet="files"></ng-container>

        <div class="igx-input-group__bundle-end">
            <ng-container *ngTemplateOutlet="clear"></ng-container>
            <ng-container *ngTemplateOutlet="suffix"></ng-container>
        </div>
    </div>
</ng-template>

<ng-template #bundle>
    <ng-container [ngSwitch]="theme">
        <ng-container *ngSwitchCase="'bootstrap'">
            <ng-container *ngTemplateOutlet="bootstrapBundle"></ng-container>
        </ng-container>

        <ng-container *ngSwitchCase="'fluent'">
            <ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
        </ng-container>

        <ng-container *ngSwitchCase="'indigo-design'">
            <ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
        </ng-container>

        <ng-container *ngSwitchDefault>
            <ng-container *ngTemplateOutlet="materialBundle"></ng-container>
        </ng-container>
    </ng-container>
</ng-template>