NGX CSS - Angular Components Squid Style
  1. Components
  2. SqInputFileComponent

File

src/components/sq-input-file/sq-input-file.component.ts

Description

Represents a file input component that extends SqInputComponent.

This component extends the SqInputComponent and adds additional properties and behavior for handling money input.

Example :
<sq-input-file [name]="'file-input'" [id]="'file-input'" [label]="'Upload File'" [(value)]='files'></sq-input-file>

Extends

SqInputComponent

Metadata

selector sq-input-file
standalone true
imports NgClass NgStyle NgTemplateOutlet SqLoaderComponent UniversalSafePipe
styleUrls ./sq-input-file.component.scss
templateUrl ./sq-input-file.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(validatorHelper: ValidatorHelper, element: ElementRef, translate: TranslateService)
Defined in src/components/sq-input-file/sq-input-file.component.ts:84

Constructs a new instance of SqInputFileComponent.

Parameters :
Name Type Optional Description
validatorHelper ValidatorHelper No
  • The ValidatorHelper service for input validation.
element ElementRef No
  • Reference to the native element.
translate TranslateService No
  • The TranslateService for translation support (optional).

Inputs

block
Type : boolean
Default value : false
Defined in src/components/sq-input-file/sq-input-file.component.ts:73

Display the file input as a block element.
borderColor
Type : string
Default value : 'var(--primary_color)'
Inherited from SqInputComponent
Defined in SqInputComponent:33

Border color for the file input.
color
Type : string
Default value : 'var(--primary_color)'
Defined in src/components/sq-input-file/sq-input-file.component.ts:38

Color for the file input.
fileType
Type : string
Default value : '*.*'
Defined in src/components/sq-input-file/sq-input-file.component.ts:58

Allowed file types pattern (e.g., '*.jpg, *.png').
fontSize
Type : string
Default value : '1rem'
Defined in src/components/sq-input-file/sq-input-file.component.ts:43

Font size for the file input.
loading
Type : boolean
Default value : false
Defined in src/components/sq-input-file/sq-input-file.component.ts:53

Indicates whether the file input is in a loading state.
maxSize
Type : number
Defined in src/components/sq-input-file/sq-input-file.component.ts:48

Maximum allowed file size in bytes.
multiple
Type : boolean
Default value : false
Defined in src/components/sq-input-file/sq-input-file.component.ts:63

Indicates whether multiple files can be selected.
noPadding
Type : boolean
Default value : false
Defined in src/components/sq-input-file/sq-input-file.component.ts:68

Indicates whether padding should be removed from the file input.
textColor
Type : string
Default value : 'var(--white-html)'
Defined in src/components/sq-input-file/sq-input-file.component.ts:28

Text color for the file input.
backgroundColor
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:147

Background color of the input element.
customClass
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:66

Custom CSS class for the input element.
disabled
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:107

Flag to disable the input element.
errorSpan
Type : boolean
Default value : true
Inherited from SqInputComponent
Defined in SqInputComponent:102

Flag to display an error span.
externalError
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:76

External error message to display.
externalIcon
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:81

External icon to display.
id
Type : string
Inherited from SqInputComponent
Defined in SqInputComponent:56

The id attribute for the input element.
inputMode
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:177

Input mode for mobile devices.
label
Type : string
Inherited from SqInputComponent
Defined in SqInputComponent:61

An optional label for the input.
labelColor
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:157

Color of the input label.
maxLength
Type : number | null
Default value : null
Inherited from SqInputComponent
Defined in SqInputComponent:167

Maximum length for the input element.
name
Type : string
Default value : `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
Inherited from SqInputComponent
Defined in SqInputComponent:51

The name attribute for the input element.
pattern
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:172

Regular expression pattern for input validation.
placeholder
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:71

Placeholder text for the input element.
readonly
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:112

Flag to make the input element readonly.
required
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:117

Flag to mark the input as required.
timeToChange
Type : number
Default value : 0
Inherited from SqInputComponent
Defined in SqInputComponent:97

Time in milliseconds before triggering input timeout.
tooltipColor
Type : string
Default value : 'inherit'
Inherited from SqInputComponent
Defined in SqInputComponent:137

Color of the tooltip.
tooltipIcon
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:142

Icon for the tooltip.
tooltipMessage
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:127

Tooltip message to display.
tooltipPlacement
Type : "center top" | "center bottom" | "left center" | "right center"
Default value : 'right center'
Inherited from SqInputComponent
Defined in SqInputComponent:132

Placement of the tooltip.
type
Type : "text" | "email" | "email-multiple" | "hidden" | "password" | "tel" | "url" | "file"
Default value : 'text'
Inherited from SqInputComponent
Defined in SqInputComponent:162

Type of the input element (e.g., text, email, password).
useFormErrors
Type : boolean
Default value : true
Inherited from SqInputComponent
Defined in SqInputComponent:122

Flag to use form errors for validation messages.
value
Type : any
Inherited from SqInputComponent
Defined in SqInputComponent:87

The value of the input element.

Outputs

emitFocus
Type : EventEmitter<Event>
Inherited from SqInputComponent
Defined in SqInputComponent:207

Event emitter for focus input changes.
inFocus
Type : EventEmitter<boolean>
Inherited from SqInputComponent
Defined in SqInputComponent:192

Event emitter for input focus events.
keyPressDown
Type : EventEmitter<KeyboardEvent>
Inherited from SqInputComponent
Defined in SqInputComponent:182

Event emitter for keydown events.
keyPressUp
Type : EventEmitter<KeyboardEvent>
Inherited from SqInputComponent
Defined in SqInputComponent:187

Event emitter for keyup events.
valid
Type : EventEmitter<boolean>
Inherited from SqInputComponent
Defined in SqInputComponent:197

Event emitter for validation status.
valueChange
Type : EventEmitter<any>
Inherited from SqInputComponent
Defined in SqInputComponent:202

Event emitter for input value changes.

Methods

Async change
change(event: any)
Inherited from SqInputComponent
Defined in SqInputComponent:140

Handle the change event for the file input.

Parameters :
Name Type Optional Description
event any No
  • The input change event.
Returns : any
Async validate
validate(isBlur)
Inherited from SqInputComponent
Defined in SqInputComponent:106

Asynchronously validate the file input value.

Parameters :
Name Optional Default value Description
isBlur No false
  • Indicates if the input has lost focus.
Returns : any
keyDown
keyDown(event: KeyboardEvent)
Inherited from SqInputComponent
Defined in SqInputComponent:335

Handle keydown events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keydown event.
Returns : void
keyUp
keyUp(event: KeyboardEvent)
Inherited from SqInputComponent
Defined in SqInputComponent:343

Handle keyup events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keyup event.
Returns : void
Async setError
setError(key: string, interpolateParams: Object)
Inherited from SqInputComponent
Defined in SqInputComponent:325

Sets an error message.

Parameters :
Name Type Optional Default value Description
key string No
  • The translation key for the error message.
interpolateParams Object No {}
  • Value to interpolate with translation.
Returns : any

Properties

customContent
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('customContent', {static: true})
Defined in src/components/sq-input-file/sq-input-file.component.ts:79

Custom content to be displayed within the file input.
nativeElement
Type : ElementRef
Inherited from SqInputComponent
Defined in SqInputComponent:84

Reference to the native element.
Public translate
Type : TranslateService
Decorators :
@Optional()
Inherited from SqInputComponent
Defined in SqInputComponent:95
- The TranslateService for translation support (optional).
Public validatorHelper
Type : ValidatorHelper
Inherited from SqInputComponent
Defined in SqInputComponent:93
- The ValidatorHelper service for input validation.
_value
Type : any
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:230

The internal value of the input element.
error
Type : boolean | string
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:235

Error message to display.
labelTemplate
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('labelTemplate')
Inherited from SqInputComponent
Defined in SqInputComponent:225

Reference to a label template.
leftLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('leftLabel')
Inherited from SqInputComponent
Defined in SqInputComponent:213

Reference to a left-aligned label template.
rightLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('rightLabel')
Inherited from SqInputComponent
Defined in SqInputComponent:219

Reference to a right-aligned label template.
timeoutInput
Type : ReturnType<>
Inherited from SqInputComponent
Defined in SqInputComponent:245

Timeout for input changes.

 
import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { ValidatorHelper } from '../../helpers/validator.helper';
import { SqLoaderComponent } from '../sq-loader/sq-loader.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';
import { SqInputComponent } from '../sq-input/sq-input.component';

/**
 * Represents a file input component that extends SqInputComponent.
 *
 * This component extends the {@link SqInputComponent} and adds additional properties and behavior for handling money input.
 *
 * @example
 * <sq-input-file [name]="'file-input'" [id]="'file-input'" [label]="'Upload File'" [(value)]='files'></sq-input-file>
 */
@Component({
  selector: 'sq-input-file',
  templateUrl: './sq-input-file.component.html',
  styleUrls: ['./sq-input-file.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, SqLoaderComponent, UniversalSafePipe],
})
export class SqInputFileComponent extends SqInputComponent {
  /**
   * Text color for the file input.
   */
  @Input() textColor = 'var(--white-html)';

  /**
   * Border color for the file input.
   */
  @Input() override borderColor = 'var(--primary_color)';

  /**
   * Color for the file input.
   */
  @Input() color = 'var(--primary_color)';

  /**
   * Font size for the file input.
   */
  @Input() fontSize = '1rem';

  /**
   * Maximum allowed file size in bytes.
   */
  @Input() maxSize?: number;

  /**
   * Indicates whether the file input is in a loading state.
   */
  @Input() loading = false;

  /**
   * Allowed file types pattern (e.g., '*.jpg, *.png').
   */
  @Input() fileType = '*.*';

  /**
   * Indicates whether multiple files can be selected.
   */
  @Input() multiple = false;

  /**
   * Indicates whether padding should be removed from the file input.
   */
  @Input() noPadding = false;

  /**
   * Display the file input as a block element.
   */
  @Input() block = false;

  /**
   * Custom content to be displayed within the file input.
   */
  @ContentChild('customContent', { static: true })
  customContent: TemplateRef<HTMLElement> | null = null;

  /**
   * Reference to the native element.
   */
  override nativeElement: ElementRef;

  /**
   * Constructs a new instance of SqInputFileComponent.
   * @param validatorHelper - The ValidatorHelper service for input validation.
   * @param element - Reference to the native element.
   * @param translate - The TranslateService for translation support (optional).
   */
  constructor(
    public override validatorHelper: ValidatorHelper,
    element: ElementRef,
    @Optional() public override translate: TranslateService
  ) {
    super(validatorHelper, element, translate);
    this.nativeElement = element.nativeElement;
    this.type = 'file';
  }

  /**
   * Asynchronously validate the file input value.
   * @param isBlur - Indicates if the input has lost focus.
   */
  override async validate(isBlur = false) {
    this.emitFocus.emit();
    if (this.externalError) {
      this.error = false;
    } else if (!!this.required && (!this.value || this.value.length < 1) && this.value !== 0) {
      this.setError('forms.required');
      this.valid.emit(false);
    } else if (this.maxSize && this.value && this.value.length > 0) {
      let bigFiles = 0;
      for (const file of this.value) {
        if (file.size > this.maxSize) {
          bigFiles++;
        }
      }
      if (bigFiles > 0) {
        this.setError('forms.fileSize');
        this.valid.emit(false);
      } else {
        this.valid.emit(true);
        this.error = '';
      }
    } else {
      this.valid.emit(true);
      this.error = '';
    }
    if (isBlur) {
      this.inFocus.emit(false);
    }
  }

  /**
   * Handle the change event for the file input.
   * @param event - The input change event.
   */
  override async change(event: any) {
    this.value = event.target?.files || event;
    this.valueChange.emit(this.value);
    this.validate();
  }
}

<div
  class="wrapper-input-file-squid"
  [ngClass]="{
    error: (externalError && externalError !== '') || (error && error !== ''),
    block: block,
  }"
>
  @if (label?.length) {
    <label
      class="label"
      [ngClass]="{
        loading: loading,
      }"
    >
      {{ label }}
    </label>
  }
  @if (customContent) {
    <label [for]="id" class="label-custom">
      <ng-container *ngTemplateOutlet="customContent"></ng-container>
    </label>
  }
  @if (!customContent) {
    <label
      class="placeholder button"
      [for]="id"
      [ngStyle]="{
        'font-size': fontSize,
        color: textColor,
        'background-color': color,
        'border-color': borderColor || textColor,
      }"
      [ngClass]="{
        loading: loading,
        'p-0': noPadding,
      }"
    >
      <span
        [innerHtml]="placeholder || '' | universalSafe"
        [ngStyle]="{
          'font-size': fontSize,
        }"
      ></span>
      @if (loading) {
        <sq-loader color="{{ textColor }}"></sq-loader>
      }
    </label>
  }
  <input
    #inputFile
    type="file"
    [id]="id"
    [name]="name"
    [required]="required"
    [disabled]="disabled || loading"
    [readonly]="disabled || loading"
    [accept]="fileType"
    (click)="inputFile.value = ''"
    (change)="change($event)"
    (keydown)="keyDown($event)"
    [multiple]="multiple"
  />
  @if (errorSpan) {
    <div
      class="box-validation box-invalid show"
      [ngClass]="{
        'visibility-hidden-force':
          ((!externalError || externalError === '') && (!error || error === '')) || disabled || readonly,
      }"
    >
      <i
        [ngClass]="{
          'visibility-hidden-force': !error && !externalError,
        }"
        class="fa-solid fa-triangle-exclamation"
      ></i>
      {{ externalError ? externalError : '' }}
      {{ error && !externalError ? error : '' }}
    </div>
  }
</div>

./sq-input-file.component.scss 

.wrapper-input-file-squid {
  display: inline-block;
  &.block {
    display: block;
    width: 100%;
  }
  label {
    color: inherit;
    width: 100%;
    margin: 0;
    font-size: 0.86rem;
    line-height: 10px;
    margin: 0 auto 0.35rem;
    &.label-custom {
      margin: 0;
    }
    &.placeholder {
      line-height: initial;
      width: initial;
      display: inline-flex;
      text-align: center;
      position: relative;
      text-transform: capitalize;
      font-weight: 500;
      font-size: 0.86rem;
      border-radius: 7px;
      overflow: hidden;
      box-shadow: none;
      border: 2px solid transparent;
      transition: var(--transition);
      opacity: 1;
      cursor: pointer;
      margin: 0;
      sq-loader {
        display: inline-block;
        margin-left: 0.35rem;
      }
      span {
        color: inherit;
        width: 100%;
        display: inline-block;
        margin: 0;
        font-weight: inherit;
      }
      &.p-0 {
        padding: 0;
      }
      &:hover,
      &:focus {
        outline: none;
        cursor: pointer;
        color: inherit;
        border-color: inherit;
        &:before {
          border-color: inherit;
        }
      }
      &.loading {
        cursor: wait;
        &:hover,
        &:focus {
          border-color: transparent !important;
        }
      }
      &.disabled {
        cursor: not-allowed;
      }
    }
  }
  input {
    display: none;
  }
  .icon {
    position: absolute;
    right: 35px;
    bottom: 3px;
    color: var(--color_text-icon_system_success);
  }
  &.error {
    background: transparent;
    border-color: var(--color_border_input_error) !important;
    .icon {
      color: var(--color_text-icon_system_danger);
    }
    label.label {
      color: var(--color_text-icon_system_danger) !important;
    }
  }
}
.error-name {
  display: block;
  margin: 0 auto;
  min-height: 22px;
  color: var(--color_text-icon_system_danger);
  font-weight: 700;
  font-size: 0.86rem;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""