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
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:79

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:68

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

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:33

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

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:38

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

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:43

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

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:63

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:23

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

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

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

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

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

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

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

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

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

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

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

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:45

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

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

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

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

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

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

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

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

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

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

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

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

The value of the input element.

Outputs

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

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

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

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

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

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

Event emitter for input value changes.

Methods

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

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:101

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:314

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:322

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:304

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:74

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

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

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

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

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

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

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

Timeout for input changes.

 
import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { ValidatorHelper } from '../../helpers/validator.helper'
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']
})
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
  }"
>
  <label
    *ngIf="label?.length"
    class="label"
    [ngClass]="{
      loading: loading
    }"
  >
    {{ label }}
  </label>
  <label *ngIf="customContent" [for]="id" class="label-custom">
    <ng-container *ngTemplateOutlet="customContent"></ng-container>
  </label>
  <label
    *ngIf="!customContent"
    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>
    <sq-loader *ngIf="loading" 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"
  />
  <div
    class="box-validation box-invalid show"
    *ngIf="errorSpan"
    [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 ""