@if(label) {
  @if(labelActions && labelActions.length > 0) {
    <div class="d-flex justify-content-between cell-flex align-items-center action-button-container h-label label-mb ">
        <mat-label [class.required]="isControlRequired()">{{label}}</mat-label>
        <div class="d-flex gap-2 action-button">
            @for(action of labelActions; track action.id) {
                @if (!action.showBelow) {
                    <button 
                        mat-icon-button 
                        [matTooltip]="action.matTooltip ?? ''" 
                        matTooltipClass="custom-tooltip"
                        [disabled]="action.disabled ?? false"
                        class="action-icon-label p-0"
                        (click)="onLabelActionClick(action)">
                        <lucide-angular 
                            [img]="action.icon.iconSvg" 
                            [size]="action.icon.size ?? '16'" 
                            [color]="action.icon.color ?? '#5D6F85'"
                            [class]="action.icon.class ?? 'lucide-angular-icon'">
                        </lucide-angular>
                    </button>
                }
            }
             @if(descriptionTooltip) {
                <button 
                class="action-icon-info d-flex align-items-center justify-content-center p-0 "
                    matTooltipClass="custom-tooltip">
                    <lucide-angular
                [size]="16"
                [color]="'#5D6F85'"
                [img]="infoCircle"
                [kitTooltip]="''"
                [tooltipDescription]="descriptionTooltip"
                [tooltipPosition]="'top'">
            </lucide-angular>
                </button>
                
           
        }
        </div>
    </div>
  } @else {
    <div class="w-100 d-flex justify-content-between align-items-center label-mb h-label">
        <mat-label [class.required]="isControlRequired()">{{label}}</mat-label>
        @if(descriptionTooltip) {

                <button 
                class="action-icon-info d-flex align-items-center justify-content-center p-0 "
                    matTooltipClass="custom-tooltip">
                    <lucide-angular
                [size]="16"
                [color]="'#5D6F85'"
                [img]="infoCircle"
                [kitTooltip]="''"
                [tooltipDescription]="descriptionTooltip"
                [tooltipPosition]="'top'">
            </lucide-angular>
                </button>
        }
    </div>
  }
}
    <mat-form-field class="example-full-width custom-label-outside" appearance="outline" floatLabel="always">
        
        <input matInput 
            [type]="type" 
            class="form-control" 
            [formControl]="control" 
            [placeholder]="placeholderText" 
            [dropSpecialCharacters]="mask && mask.dropSpecialCharacters ? false : true" 
            [prefix]="mask && mask.prefix ? mask.prefix : ''"  
            [suffix]="mask && mask.suffix ? mask.suffix : ''"
            [mask]="mask && mask.mask ? mask.mask : ''"
            [showMaskTyped]="mask && mask.showMaskTyped ? mask.showMaskTyped : false"
            [allowNegativeNumbers]="mask && mask.allowNegativeNumbers ? mask.allowNegativeNumbers : false"
            [placeHolderCharacter]="mask && mask.placeHolderCharacter ? mask.placeHolderCharacter : null"
            [clearIfNotMatch]="mask && mask.clearIfNotMatch ? mask.clearIfNotMatch : false" 
            [specialCharacters]="mask && mask.specialCharacters ? mask.specialCharacters : mask && mask.thousandSeparator ? [mask.thousandSeparator]:null"
            [thousandSeparator]="mask && mask.thousandSeparator ? mask.thousandSeparator : '.'"
            [decimalMarker]="(mask && mask.thousandSeparator && mask.thousandSeparator === '.') ? ',':'.'"
            [validation]="mask && mask.validation ? mask.validation : false"
            [patterns]="mask && mask.customPatterns ? mask.customPatterns : null"
        />
        @if(affixes && affixes.suffix) {
            @if(affixes.suffix.iconSuffix || affixes.suffix.imgSuffix) {

                <button mat-icon-button matSuffix (click)="onClickIcon($event)">
                    @if(affixes.suffix.iconSuffix) { 
                        <lucide-angular [img]="affixes.suffix.iconSuffix" [size]="affixes.suffix.size ? affixes.suffix.size : '24'" [color]="affixes.suffix.color ? affixes.suffix.color : '#5B62DA'" class="{{affixes.suffix.class? affixes.suffix.class:''}}"></lucide-angular>
                    } @else if(affixes.suffix.imgSuffix) {
                        <img [src]="affixes.suffix.imgSuffix" alt="" [width]="affixes.suffix.imgSizeWidth" [height]="affixes.suffix.imgSizeHeight" [class]="affixes.suffix.class" />
                    }
                </button>
            } @else if(affixes.suffix.textSuffix) {

                <span matSuffix class="suffix-text">{{affixes.suffix.textSuffix}}</span>
            }
        } 
        @if(affixes && affixes.prefix) {
            @if(affixes.prefix.iconPrefix || affixes.prefix.imgPreffix) {

                <button mat-icon-button matPrefix (click)="onClickIcon($event)">
                    @if(affixes.prefix.iconPrefix) { 
                        <lucide-angular [img]="affixes.prefix.iconPrefix" [size]="affixes.prefix.size ? affixes.prefix.size : '24'" [color]="affixes.prefix.color ? affixes.prefix.color : '#5B62DA'" class="{{affixes.prefix.class? affixes.prefix.class:''}}"></lucide-angular>
                    } @else if(affixes.prefix.imgPreffix) {
                        <img [src]="affixes.prefix.imgPreffix" alt="" [width]="affixes.prefix.imgSizeWidth" [height]="affixes.prefix.imgSizeHeight" [class]="affixes.prefix.class" />
                    }
                </button>
            } @else if(affixes.prefix.textPrefix) {
           
                <span matPrefix class="prefix-text">{{affixes.prefix.textPrefix}}</span>
            }
        }
        @if (control?.hasError('email') && !control?.hasError('required')) {
            <mat-error>El email no es válido</mat-error>
        }
        
        @if (control?.hasError('required')) {
        <mat-error
            > {{label ? label: 'Este campo'}} es <strong>requerido</strong></mat-error
        >
        }
        @if (control?.hasError('minlength')) {
        <mat-error
            >El mínimo permitido son {{minlength}} caracteres</mat-error
        >
        }

        @if (control?.hasError('errorCommons')) {
        <mat-error
            >{{messageErrorCustom}}</mat-error
        >
        }

        @if (control?.hasError('maxlength')) {
        <mat-error>El máximo permitido son {{maxlength}} caracteres</mat-error
    >
        }
        
    </mat-form-field>
@if(labelActions && labelActions.length > 0 && !control?.errors) {
    <div class="custom-hints">
        @for(action of labelActions; track action.id) {
            @if(action.showBelow) {
                <div class="hint-item-wrapper">
                    @if(action.text) {
                        <span class="hint-text">{{action.text}}</span>
                    }
                    <button
                        mat-icon-button 
                        [matTooltip]="action.matTooltip ?? ''" 
                        matTooltipClass="custom-tooltip"
                        [disabled]="action.disabled ?? false"
                        class="hint-icon-button"
                        (click)="onLabelActionClick(action)">
                        <lucide-angular 
                            [img]="action.icon.iconSvg" 
                            [size]="action.icon.size ?? '16'" 
                            [color]="action.icon.color ?? '#5D6F85'"
                            [class]="action.icon.class ?? 'lucide-angular-icon'">
                        </lucide-angular>
                    </button>
                </div>
            }
        }
    </div>
}