@crediblefinance/credible-ui/fesm2022/crediblefinance-credible-ui.mjs.map

Credible's standard UI library

{"version":3,"file":"crediblefinance-credible-ui.mjs","sources":["../../../projects/credible-ui/src/lib/cf-alert/cf-alert.component.ts","../../../projects/credible-ui/src/lib/cf-alert/cf-alert.component.html","../../../projects/credible-ui/src/lib/cf-alert/cf-alert.service.ts","../../../projects/credible-ui/src/lib/directives/precision-directive.ts","../../../projects/credible-ui/src/lib/shared/shared.module.ts","../../../projects/credible-ui/src/lib/cf-alert/cf-alert.module.ts","../../../projects/credible-ui/src/lib/cf-button/cf-button.component.ts","../../../projects/credible-ui/src/lib/cf-button/cf-button.component.html","../../../projects/credible-ui/src/lib/cf-button/cf-button.module.ts","../../../projects/credible-ui/src/lib/cf-card/cf-card.component.ts","../../../projects/credible-ui/src/lib/cf-card/cf-card.component.html","../../../projects/credible-ui/src/lib/cf-card/cf-card.module.ts","../../../projects/credible-ui/src/lib/cf-checkbox/cf-checkbox.component.ts","../../../projects/credible-ui/src/lib/cf-checkbox/cf-checkbox.component.html","../../../projects/credible-ui/src/lib/cf-checkbox/cf-checkbox.module.ts","../../../projects/credible-ui/src/lib/cf-checkbox-large/Checkbox.ts","../../../projects/credible-ui/src/lib/cf-checkbox-large/cf-checkbox-large.component.ts","../../../projects/credible-ui/src/lib/cf-checkbox-large/cf-checkbox-large.component.html","../../../projects/credible-ui/src/lib/cf-checkbox-large/cf-checkbox-large.module.ts","../../../projects/credible-ui/src/lib/cf-chip/cf-chip.component.ts","../../../projects/credible-ui/src/lib/cf-chip/cf-chip.component.html","../../../projects/credible-ui/src/lib/cf-chip/cf-chip.module.ts","../../../projects/credible-ui/src/lib/cf-progress-bar/cf-progress-bar.component.ts","../../../projects/credible-ui/src/lib/cf-progress-bar/cf-progress-bar.component.html","../../../projects/credible-ui/src/lib/cf-progress-bar/cf-progress-bar.module.ts","../../../projects/credible-ui/src/lib/cf-circular-timer-progress/cf-circular-timer-progress.component.ts","../../../projects/credible-ui/src/lib/cf-circular-timer-progress/cf-circular-timer-progress.component.html","../../../projects/credible-ui/src/lib/cf-circular-timer-progress/cf-circular-timer-progress.module.ts","../../../projects/credible-ui/src/lib/cf-circular-progress-bar/cf-circular-progress-bar.component.ts","../../../projects/credible-ui/src/lib/cf-circular-progress-bar/cf-circular-progress-bar.component.html","../../../projects/credible-ui/src/lib/cf-circular-progress-bar/cf-circular-progress-bar.module.ts","../../../projects/credible-ui/src/lib/models/Dropdown.ts","../../../projects/credible-ui/src/lib/cf-dropdown/cf-dropdown.component.ts","../../../projects/credible-ui/src/lib/cf-dropdown/cf-dropdown.component.html","../../../projects/credible-ui/src/lib/cf-dropdown/cf-dropdown.module.ts","../../../projects/credible-ui/src/lib/cf-input-currency-dropdown/cf-input-currency-dropdown.component.ts","../../../projects/credible-ui/src/lib/cf-input-currency-dropdown/cf-input-currency-dropdown.component.html","../../../projects/credible-ui/src/lib/cf-input-currency-dropdown/cf-input-currency-dropdown.module.ts","../../../projects/credible-ui/src/lib/cf-input/cf-input.component.ts","../../../projects/credible-ui/src/lib/cf-input/cf-input.component.html","../../../projects/credible-ui/src/lib/cf-input/cf-input.module.ts","../../../projects/credible-ui/src/lib/cf-input-currency/cf-input-currency.component.ts","../../../projects/credible-ui/src/lib/cf-input-currency/cf-input-currency.component.html","../../../projects/credible-ui/src/lib/cf-input-currency/cf-input-currency.module.ts","../../../projects/credible-ui/src/lib/cf-redirect/cf-redirect.component.ts","../../../projects/credible-ui/src/lib/cf-redirect/cf-redirect.component.html","../../../projects/credible-ui/src/lib/cf-redirect/cf-redirect.module.ts","../../../projects/credible-ui/src/lib/cf-toggle/cf-toggle.component.ts","../../../projects/credible-ui/src/lib/cf-toggle/cf-toggle.component.html","../../../projects/credible-ui/src/lib/cf-toggle/cf-toggle.module.ts","../../../projects/credible-ui/src/lib/cf-vertical-progress-bar/cf-vertical-progress-bar.component.ts","../../../projects/credible-ui/src/lib/cf-vertical-progress-bar/cf-vertical-progress-bar.component.html","../../../projects/credible-ui/src/lib/cf-vertical-progress-bar/cf-vertical-progress-bar.module.ts","../../../projects/credible-ui/src/lib/cf-paginator/cf-paginator.component.ts","../../../projects/credible-ui/src/lib/cf-paginator/cf-paginator.component.html","../../../projects/credible-ui/src/lib/cf-paginator/cf-paginator.module.ts","../../../projects/credible-ui/src/lib/cf-mobile-number/cf-mobile-number.component.ts","../../../projects/credible-ui/src/lib/cf-mobile-number/cf-mobile-number.component.html","../../../projects/credible-ui/src/lib/cf-mobile-number/cf-mobile-number.module.ts","../../../projects/credible-ui/src/lib/cf-loader/cf-loader.component.ts","../../../projects/credible-ui/src/lib/cf-loader/cf-loader.component.html","../../../projects/credible-ui/src/lib/cf-loader/cf-loader.module.ts","../../../projects/credible-ui/src/lib/cf-otp/cf-otp.component.ts","../../../projects/credible-ui/src/lib/cf-otp/cf-otp.component.html","../../../projects/credible-ui/src/lib/cf-otp/cf-otp.module.ts","../../../projects/credible-ui/src/lib/cf-tick/animation.ts","../../../projects/credible-ui/src/lib/cf-tick/cf-tick.component.ts","../../../projects/credible-ui/src/lib/cf-tick/cf-tick.component.html","../../../projects/credible-ui/src/lib/cf-tick/cf-tick.module.ts","../../../projects/credible-ui/src/lib/cf-cross/animation.ts","../../../projects/credible-ui/src/lib/cf-cross/cf-cross.component.ts","../../../projects/credible-ui/src/lib/cf-cross/cf-cross.component.html","../../../projects/credible-ui/src/lib/cf-cross/cf-cross.module.ts","../../../projects/credible-ui/src/lib/cf-tabs/cf-tabs.component.ts","../../../projects/credible-ui/src/lib/cf-tabs/cf-tabs.component.html","../../../projects/credible-ui/src/lib/cf-tabs/cf-tabs.module.ts","../../../projects/credible-ui/src/lib/utility/utilityFunctions.ts","../../../projects/credible-ui/src/public-api.ts","../../../projects/credible-ui/src/crediblefinance-credible-ui.ts"],"sourcesContent":["import {\n    Component, Inject, OnInit, Optional\n} from '@angular/core';\nimport {\n    MatSnackBarRef, MAT_SNACK_BAR_DATA\n} from '@angular/material/snack-bar';\n\n@Component({\n    selector: 'cf-alert',\n    templateUrl: './cf-alert.component.html',\n    styleUrls: ['./cf-alert.component.scss']\n})\nexport class CfAlertComponent implements OnInit {\n    message: string = '';\n    type: string = 'error';\n    value: number = 0;\n    duration: number = 0;\n    timerId: any;\n\n    constructor(public dialogRef: MatSnackBarRef<CfAlertComponent>, @Optional() @Inject(MAT_SNACK_BAR_DATA) public data: any\n    ) {\n        this.message = data.message;\n        this.duration = data.duration;\n        this.type = data.type;\n    }\n\n    ngOnInit(): void {\n        const stepperDuration = 250;\n\n        this.timerId = setInterval(() => {\n            this.value += stepperDuration;\n\n            if (this.value >= this.duration)\n                clearInterval(this.timerId);\n        }, stepperDuration);\n    }\n}\n","<div class=\"cf-alert\">\n    <div class=\"error\" *ngIf=\"type === 'error'\">\n        <div class=\"message-holder\">\n            <i class=\"fa-solid fa-circle-xmark\"></i>\n            <span class=\"message\">{{ message }}</span>\n        </div>\n        <mat-spinner\n            mode=\"determinate\"\n            diameter=\"20\"\n            [value]=\"(value / duration) * 100\"\n        ></mat-spinner>\n    </div>\n    <div class=\"success\" *ngIf=\"type === 'success'\">\n        <div class=\"message-holder\">\n            <i class=\"fa-solid fa-circle-check\"></i>\n            <span class=\"message\">{{ message }}</span>\n        </div>\n        <mat-spinner\n            mode=\"determinate\"\n            diameter=\"20\"\n            [value]=\"(value / duration) * 100\"\n        ></mat-spinner>\n    </div>\n</div>\n","import { HttpErrorResponse } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n    MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition\n} from '@angular/material/snack-bar';\nimport { CfAlertComponent } from './cf-alert.component';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class CfAlertService {\n    duration: number = 5 * 1000;\n    horizontalPosition: MatSnackBarHorizontalPosition = 'center';\n    verticalPosition: MatSnackBarVerticalPosition = 'top';\n\n    constructor(private _snackBar: MatSnackBar) { }\n\n    showError(err: HttpErrorResponse): void {\n        let message: string = 'Something went wrong';\n\n        if (err && err.error && err.error.message)\n            message = err.error.message;\n\n        this._snackBar.openFromComponent(CfAlertComponent, {\n            duration: this.duration,\n            horizontalPosition: this.horizontalPosition,\n            verticalPosition: this.verticalPosition,\n            data: {\n                message: message,\n                type: 'error',\n                duration: this.duration\n            }\n        });\n    }\n\n    showMessage(message: string, error: boolean = false): void {\n        this._snackBar.openFromComponent(CfAlertComponent, {\n            duration: this.duration,\n            horizontalPosition: this.horizontalPosition,\n            verticalPosition: this.verticalPosition,\n            data: {\n                message: message,\n                type: error ? 'error' : 'success',\n                duration: this.duration\n            }\n        });\n    }\n\n    showSuccess(message: string) {\n        this._snackBar.openFromComponent(CfAlertComponent, {\n            duration: this.duration,\n            horizontalPosition: this.horizontalPosition,\n            verticalPosition: this.verticalPosition,\n            data: {\n                message: message,\n                type: 'success',\n                duration: this.duration\n            }\n        });\n    }\n}\n","import {\n    Directive, ElementRef, HostListener, Input\n} from '@angular/core';\n\n@Directive({\n    selector: '[PrecisionDirective]'\n})\nexport class PrecisionDirective {\n    @Input() precision: number = 0;\n    @Input() type: string = 'text';\n    @Input() precisionType: string = '';\n\n    allowedKeys: Set<string> = new Set();\n    constructor(private el: ElementRef) {\n        const allowedKeys = [\n            'Backspace', // backspace\n            '0', // zero\n            '1', // one\n            '2', // two\n            '3', // three\n            '4', // four\n            '5', // five\n            '6', // six\n            '7', // seven\n            '8', // eight\n            '9', // nine,\n            'ArrowRight',\n            'ArrowLeft',\n            'ArrowUp',\n            'ArrowDown',\n            '.',\n            'Meta',\n            'v'\n        ];\n\n        this.allowedKeys = new Set(allowedKeys);\n    }\n\n    @HostListener('paste', [ '$event' ])\n    onPaste(event: ClipboardEvent) {\n        const clipboardData: DataTransfer | null = event.clipboardData;\n        const pastedText = clipboardData?.getData('text') as string;\n\n        if (this.type === 'number' && pastedText?.length > 0) {\n            if (Number(pastedText))\n                return true;\n            else {\n                this.el.nativeElement.value = '';\n\n                return false;\n            }\n        }\n\n        return true;\n    }\n\n    @HostListener('keydown', [ '$event' ])\n    onKeyDown(event: KeyboardEvent) {\n        const value = this.el.nativeElement.value;\n        const regex: RegExp = new RegExp(/[0-9]/);\n\n        if (this.type === 'number') {\n            const allowed = this.allowedKeys.has(event.key);\n\n            if (!allowed)\n                return false;\n\n            if (event.code === 'Space')\n                event.preventDefault();\n\n            if (event.key === '.' && value.toString().indexOf('.') !== -1)\n                return false;\n\n            if (this.precisionType === 'decimal') {\n                if (regex.test(event.key)) {\n                    if (value.toString().includes('.')) {\n                        const str = value.toString().split('.');\n\n                        if (str[1].length >= this.precision)\n                            return false;\n                    }\n                }\n            }\n            else if (this.precisionType === 'input') {\n                if (event.code === 'Period')\n                    event.preventDefault();\n\n                if (event.code === 'Space')\n                    event.preventDefault();\n\n                if (!this.optionalKeys(event)) {\n                    if (value.length >= this.precision)\n                        return false;\n                }\n            }\n        }\n\n        return true;\n    }\n\n    optionalKeys(event: KeyboardEvent) {\n        if (event.code === 'Backspace')\n            return true;\n\n        if (event.code === 'ArrowLeft')\n            return true;\n\n        if (event.code === 'ArrowRight')\n            return true;\n\n        if (event.code === 'ArrowUp')\n            return true;\n\n        if (event.code === 'ArrowDown')\n            return true;\n\n        return false;\n    }\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PrecisionDirective } from '../directives/precision-directive';\nimport {\n    FormsModule, ReactiveFormsModule \n} from '@angular/forms';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\n\n@NgModule({\n    declarations: [\n        PrecisionDirective\n    ],\n    imports: [\n        CommonModule,\n        FormsModule,\n        ReactiveFormsModule,\n        MatSelectModule,\n        MatCheckboxModule,\n        MatTooltipModule,\n        MatProgressSpinnerModule,\n        MatSnackBarModule,\n        MatSlideToggleModule,\n        MatStepperModule,\n        MatProgressBarModule\n    ],\n    exports: [\n        PrecisionDirective,\n        FormsModule,\n        ReactiveFormsModule,\n        MatSelectModule,\n        MatCheckboxModule,\n        MatTooltipModule,\n        MatProgressSpinnerModule,\n        MatSnackBarModule,\n        MatSlideToggleModule,\n        MatStepperModule,\n        MatProgressBarModule\n    ]\n})\nexport class SharedModule { }\n","import { NgModule } from '@angular/core';\nimport { CfAlertComponent } from './cf-alert.component';\nimport { MatSnackBarRef } from '@angular/material/snack-bar';\nimport { CfAlertService } from './cf-alert.service';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfAlertComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    providers: [\n        CfAlertService,\n        {\n            provide: MatSnackBarRef,\n            useValue: {}\n        }\n    ]\n})\nexport class CfAlertModule { }\n","import {\n    Component, Input, EventEmitter, Output\n} from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'cf-button',\n    templateUrl: './cf-button.component.html',\n    styleUrls: ['./cf-button.component.scss']\n})\nexport class CfButtonComponent {\n    @Input() label: string = '';\n    @Input() type: string = 'solid';\n    @Output() clicked = new EventEmitter();\n    @Input() loading: boolean = false;\n    @Input() disabled: boolean = false;\n    @Input() align: string = 'center';\n    @Input() theme: string = 'dark';\n\n    constructor() { }\n\n    raiseClickEvent($event: Event) {\n        $event.preventDefault();\n        $event.stopImmediatePropagation();\n        $event.stopPropagation();\n\n        this.clicked.emit();\n    }\n\n    public get classes(): string[] {\n        if (this.disabled)\n            return ['disabled', `button-${this.align}`, this.theme];\n\n        else\n            return [`button-${this.align}`, this.theme];\n    }\n}\n","<div class=\"cf-button\">\n    <div class=\"cf-button-solid\" *ngIf=\"type === 'solid'\" [ngClass]=\"classes\" [class.disabled]=\"disabled\">\n        <button class=\"solid\" (click)=\"raiseClickEvent($event)\" [disabled]=\"loading || disabled\">\n            {{ label }}\n        </button>\n        <mat-spinner mode=\"indeterminate\" diameter=\"20\" *ngIf=\"loading\" class=\"loader d-flex\"\n            [ngClass]=\"{ disabled: loading }\"></mat-spinner>\n    </div>\n\n    <div class=\"cf-button-theme\" *ngIf=\"type === 'theme'\" [ngClass]=\"classes\" [class.disabled]=\"disabled\">\n        <button class=\"theme\" (click)=\"raiseClickEvent($event)\" [disabled]=\"loading || disabled\">\n            {{ label }}\n        </button>\n        <mat-spinner mode=\"indeterminate\" diameter=\"20\" *ngIf=\"loading\" class=\"loader d-flex\"\n            [ngClass]=\"{ disabled: loading }\"></mat-spinner>\n    </div>\n\n    <div class=\"cf-button-outline\" *ngIf=\"type === 'outline'\" [ngClass]=\"classes\" [class.disabled]=\"disabled\">\n        <button class=\"outline\" (click)=\"raiseClickEvent($event)\" [disabled]=\"loading || disabled\">\n            {{ label }}\n        </button>\n        <mat-spinner mode=\"indeterminate\" diameter=\"20\" *ngIf=\"loading\" class=\"loader d-flex\"\n            [ngClass]=\"{ disabled: loading }\"></mat-spinner>\n    </div>\n\n    <div class=\"cf-button-text\" *ngIf=\"type === 'text'\" [ngClass]=\"classes\" [class.disabled]=\"disabled\">\n        <button class=\"text\" (click)=\"raiseClickEvent($event)\" [disabled]=\"loading || disabled\">\n            {{ label }}\n        </button>\n        <mat-spinner mode=\"indeterminate\" diameter=\"20\" *ngIf=\"loading\" class=\"loader d-flex\"\n            [ngClass]=\"{ disabled: loading }\"></mat-spinner>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CfButtonComponent } from './cf-button.component';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfButtonComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    exports: [\n        CfButtonComponent\n    ]\n})\nexport class CfButtonModule { }\n","import {\n    Component, Input\n} from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'cf-card',\n    templateUrl: './cf-card.component.html',\n    styleUrls: ['./cf-card.component.scss']\n})\nexport class CfCardComponent {\n    @Input() stat: string = '';\n    @Input() subtitle: string = '';\n    @Input() heading: string = '';\n    @Input() type: string = 'large';\n    @Input() theme: string = 'dark';\n    @Input() fullWidth: boolean = false;\n    @Input() fullHeight: boolean = false;\n\n    constructor() { }\n}\n","<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'large'\" [ngClass]=\"theme\">\n    <div class=\"row\">\n        <span class=\"stat\">{{ stat }}</span>\n    </div>\n    <div class=\"row\">\n        <span class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n    <div class=\"row\">\n        <span class=\"heading\">{{ heading }}</span>\n    </div>\n</div>\n\n<div class=\"container-fluid cf-card-compact\" *ngIf=\"type === 'compact'\" [ngClass]=\"theme\">\n    <div class=\"row\">\n        <span class=\"stat\">{{ stat }}</span>\n    </div>\n    <div class=\"row\">\n        <span class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n    <div class=\"row\">\n        <span class=\"heading\">{{ heading }}</span>\n    </div>\n</div>\n\n<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'empty'\" [ngClass]=\"theme\"\n    [ngStyle]=\"{'width': fullWidth ? '100%' : null, 'height': fullHeight ? '100%' : null}\">\n    <ng-content> </ng-content>\n</div>","import { NgModule } from '@angular/core';\nimport { CfCardComponent } from './cf-card.component';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfCardComponent\n    ],\n    imports: [\n        CommonModule\n    ],\n    exports: [\n        CfCardComponent\n    ]\n})\nexport class CfCardModule { }\n","import {\n    Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges\n} from '@angular/core';\nimport {\n    FormControl, FormGroup\n} from '@angular/forms';\n\n@Component({\n    selector: 'cf-checkbox',\n    templateUrl: './cf-checkbox.component.html',\n    styleUrls: [ './cf-checkbox.component.scss' ]\n})\nexport class CfCheckboxComponent implements OnInit, OnChanges {\n    @Input() name: string = '';\n    @Input() id: string = '';\n    @Input() disabled: boolean = false;\n    @Input() checked: boolean = false;\n    @Input() readonly: boolean = false;\n    @Input() theme: string = 'dark';\n\n    @Output() changed = new EventEmitter<boolean>();\n\n    @Input() formGroup!: FormGroup;\n    @Input() control!: FormControl;\n    // HTML helpers\n    objectFn = Object;\n\n    constructor() {\n        if (!this.control && !this.formGroup) {\n            this.formGroup = new FormGroup({});\n            this.control = new FormControl('');\n            this.control.setValue(this.checked);\n        }\n    }\n\n    ngOnInit(): void { }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.checked)\n            this.control.setValue(this.checked);\n    }\n\n    changeHandler(event: any) {\n        this.changed.emit(event.currentTarget.checked);\n    }\n}\n","<div [ngClass]=\"\n        control.invalid && control.touched ? 'cf-checkbox mb-0' : 'cf-checkbox'\n    \">\n    <div class=\"container-fluid\">\n        <div class=\"row\">\n            <div class=\"col-md-12\" [formGroup]=\"formGroup\">\n                <label class=\"cf-container\" [ngClass]=\"theme\">{{ name }}\n                    <input type=\"checkbox\" [checked]=\"checked ? 'checked' : null\" [readonly]=\"readonly\"\n                        [disabled]=\"disabled\" [id]=\"id\" (change)=\"changeHandler($event)\">\n                    <span class=\"checkmark\"></span>\n                </label>\n            </div>\n        </div>\n        <span class=\"text-danger\" *ngIf=\"control.errors && control.touched\">\n            {{ control.errors[objectFn.keys(control.errors)[0]] }}\n        </span>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CfCheckboxComponent } from './cf-checkbox.component';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfCheckboxComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    exports: [\n        CfCheckboxComponent\n    ]\n})\nexport class CfCheckboxModule { }\n","import ICheckbox from './ICheckbox';\n\nexport default class checkbox implements ICheckbox {\n    label = '';\n    value = '';\n    optionEnabled = true;\n}\n","import {\n    Component, EventEmitter, Input, \n    OnChanges, \n    Output,\n    SimpleChanges\n} from '@angular/core';\nimport ICheckbox from './ICheckbox';\nimport checkbox from './Checkbox';\n\n@Component({\n    selector: 'cf-checkbox-large',\n    templateUrl: './cf-checkbox-large.component.html',\n    styleUrl: './cf-checkbox-large.component.scss'\n})\nexport class CfCheckboxLargeComponent implements OnChanges {\n    @Input() options: Array<ICheckbox> = [];\n    @Input() disabled: boolean = false;\n    @Input() theme: string = 'dark';\n    @Input() layout: string = 'flex';\n    @Output() changed = new EventEmitter<ICheckbox>();\n    @Input() selected: string | null = '';\n    @Input() showLabel: boolean = true;\n    @Input() label: string = '';\n\n    currentSelected: ICheckbox = new checkbox();\n\n    changedHandled(option: ICheckbox) {\n        const currentSelected = this.getCurrentSelectedOption(option.value);\n\n        if (currentSelected) {\n            this.currentSelected = currentSelected;\n\n            this.changed.emit(this.currentSelected);\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['selected']?.currentValue) {\n            this.selected = changes['selected'].currentValue;\n\n            if (this.options.length > 0)\n                this.setDefaultSingleSelection();\n        }\n\n        if (changes['options']?.currentValue.length > 0) {\n            this.setDefaultSingleSelection();\n        }\n    }\n\n    setDefaultSingleSelection() {\n        if (typeof this.selected === 'string') {\n            const index = this.validOption(this.selected);\n\n            if (index === -1) \n                this.currentSelected = this.options[0];\n            \n            else\n                this.currentSelected = this.options[index];\n        }\n        else\n            this.currentSelected = this.options[0];\n    }\n\n    getCurrentSelectedOption(value: string) {\n        return this.options.find((x: ICheckbox) => x.value === value);\n    }\n\n    validOption(value: string) {\n        if (value === '')\n            return -1;\n\n        for (let i = 0; i < this.options.length; i++) {\n            if (this.options[i].value === value)\n                return i;\n        }\n\n        return -1;\n    }\n}\n","<div class=\"cf-checkbox-large\" [ngClass]=\"theme\">\n    <div *ngIf=\"showLabel\">\n        <label class=\"label\">{{ label }}</label>\n    </div>\n\n    <div class=\"checkbox-content\" [ngStyle]=\"{'flex-direction' : layout === 'flex' ? 'row' : 'column'}\">\n        <div class=\"cf-checkbox-large-item\" (click)=\"changedHandled(option)\" *ngFor=\"let option of options\"\n            [ngClass]=\"{'cf-checkbox-large-item-active': currentSelected.value === option.value}\">\n            <i class=\"fa-regular fa-circle-check\" *ngIf=\"currentSelected?.value === option.value\"></i>\n            <i class=\"fa-regular fa-circle\" *ngIf=\"currentSelected?.value !== option.value\"></i>\n            <span class=\"item-label\"> {{ option.label }}</span>\n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\nimport { CfCheckboxLargeComponent } from './cf-checkbox-large.component';\n\n@NgModule({\n    declarations: [\n        CfCheckboxLargeComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    exports: [\n        CfCheckboxLargeComponent\n    ]\n})\nexport class CfCheckboxLargeModule { }\n","import {\n    Component, Input\n} from '@angular/core';\n\n@Component({\n    selector: 'cf-chip',\n    templateUrl: './cf-chip.component.html',\n    styleUrls: [ './cf-chip.component.scss' ]\n})\nexport class CfChipComponent {\n    @Input() label: string = '';\n    @Input() theme: string = 'dark';\n\n    constructor() { }\n}\n","<div class=\"cf-chip\">\n    <span>{{ label }}</span>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CfChipComponent } from './cf-chip.component';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfChipComponent\n    ],\n    imports: [\n        CommonModule\n    ],\n    exports: [\n        CfChipComponent\n    ]\n})\nexport class CfChipModule { }\n","import {\n    Component, Input\n} from '@angular/core';\nimport { ProgressBarMode } from '@angular/material/progress-bar';\n\n@Component({\n    selector: 'cf-progress-bar',\n    templateUrl: './cf-progress-bar.component.html',\n    styleUrls: ['./cf-progress-bar.component.scss']\n})\nexport class CfProgressBarComponent {\n    @Input() mode: ProgressBarMode = 'indeterminate';\n    @Input() value: number = 0;\n\n    constructor() { }\n}\n","<div class=\"cf-progress-bar\">\n    <mat-progress-bar [mode]=\"mode\"></mat-progress-bar>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CfProgressBarComponent } from './cf-progress-bar.component';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfProgressBarComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    exports: [\n        CfProgressBarComponent\n    ]\n})\nexport class CfProgressBarModule { }\n","import {\n    Component, Input, OnChanges, OnDestroy, SimpleChanges\n} from '@angular/core';\n\n@Component({\n    selector: 'cf-circular-timer-progress',\n    templateUrl: './cf-circular-timer-progress.component.html',\n    styleUrls: ['./cf-circular-timer-progress.component.scss']\n})\nexport class CfCircularTimerProgressComponent implements OnChanges, OnDestroy {\n    @Input() expiry = 0;\n    @Input() theme: string = 'dark';\n\n    timer = 0;\n    hours = 0;\n    mins = 0;\n    secs = 0;\n    timerId: any;\n    timerString: string = '00:00';\n    animationClass: any = {};\n\n    constructor() {\n\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['expiry']) {\n            const currentValue = changes['expiry'].currentValue;\n\n            if (currentValue)\n                this.expiryChanged();\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.clearInterval();\n    }\n\n    expiryChanged() {\n        this.clearInterval();\n\n        this.timer = (this.expiry - (new Date()).getTime()) / 1000;\n\n        this.animationClass['animation-duration'] = this.timer + 's';\n\n        this.timerId = setInterval(() => {\n            if (this.timer > 1)\n                this.timer--;\n\n            this.formatTime();\n\n            if (this.timer === 0)\n                this.clearInterval();\n        }, 1000);\n    }\n\n    clearInterval() {\n        if (this.timerId)\n            clearInterval(this.timerId);\n    }\n\n    formatTime() {\n        if (this.timer > 60 * 60)\n            this.hours = this.timer / (60 * 60);\n\n        this.mins = Math.floor(this.timer / 60);\n\n        this.secs = Math.floor(this.timer - (this.mins * 60));\n\n        let timerString = '';\n\n        if (this.hours > 0)\n            timerString = this.hours < 10 ? `0${this.hours}:` : `${this.hours}:`;\n\n        timerString += (this.mins < 10 ? `0${this.mins}:` : `${this.mins}:`);\n        timerString += (this.secs < 10 ? `0${this.secs}` : `${this.secs}`);\n\n        this.timerString = timerString;\n    }\n}\n","<div class=\"outside-circle\" [ngStyle]=\"animationClass\" [ngClass]=\"theme\">\n    <div class=\"inside-circle\" [ngClass]=\"theme\">\n        <span class=\"blinking-text\">{{ timerString }} </span>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CfCircularTimerProgressComponent } from './cf-circular-timer-progress.component';\n\n@NgModule({\n    declarations: [\n        CfCircularTimerProgressComponent\n    ],\n    imports: [\n        CommonModule\n    ],\n    exports: [\n        CfCircularTimerProgressComponent\n    ]\n})\nexport class CfCircularTimerProgressModule { }\n","import {\n    Component, Input, \n    OnChanges, \n    OnDestroy, \n    OnInit,\n    SimpleChanges\n} from '@angular/core';\nimport { getDocument } from 'ssr-window';\n\n@Component({\n    selector: 'cf-circular-progress-bar',\n    templateUrl: './cf-circular-progress-bar.component.html',\n    styleUrl: './cf-circular-progress-bar.component.scss'\n})\nexport class CfCircularProgressBarComponent implements OnInit, OnDestroy, OnChanges {\n    @Input() progress: number = 70;\n    @Input() showAnimation: boolean = true;\n    @Input() theme: string = 'dark';\n    \n    id: string = 'cf-circular-progress-bar-' + Math.random().toString(36).substring(7);\n    animationDuration: number = 10;\n    animationDelay: number = 0;\n    animationStep: number = 1;\n    setIntervalId: any;\n    startProgress: number = 0;\n    endProgress: number = this.progress;\n    document = getDocument();\n\n    ngOnInit(): void {\n        this.start(this.progress, this.showAnimation);\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['showAnimation']) {\n            const currentValue = changes['showAnimation'].currentValue;\n\n            if (currentValue)\n                setTimeout(() => this.startAnimation(), 200);\n        }\n\n        if (changes['progress']) {\n            const currentValue = changes['progress'].currentValue;\n\n            if (currentValue)\n                this.start(currentValue, this.showAnimation);\n        }\n    }\n\n    start(progress: number, showAnimation: boolean) {\n        if (showAnimation)\n            setTimeout(() => this.startAnimation(), 200);\n\n        else\n            setTimeout(() => this.setProgress(progress), 100);\n    }\n\n    startAnimation() {\n        this.startProgress = 0;\n\n        this.setIntervalId = setInterval(() => {\n            // console.log('startProgress', this.startProgress, 'endProgress', this.endProgress);\n\n            if (this.startProgress >= this.endProgress)\n                return clearInterval(this.setIntervalId);\n\n            this.setProgress(this.startProgress);\n\n            if (this.startProgress + this.animationStep >= this.endProgress)\n                this.startProgress = this.endProgress;\n            \n            else \n                this.startProgress += this.animationStep;\n        }, this.animationDuration);\n    }\n\n    setProgress(progress: number) {\n        const outside_cicle = this.document.getElementById(this.id);\n\n        if (outside_cicle) {\n            const progressAngle = `${progress * 360 / 100}deg`;\n\n            console.log('progressAngle', progressAngle);\n\n            outside_cicle.style.setProperty('--progress', progressAngle);\n        }\n    }\n\n    ngOnDestroy(): void {\n        clearInterval(this.setIntervalId);\n    }\n}\n","<div class=\"outside-circle\" [id]=\"id\" [ngClass]=\"theme\">\n    <div class=\"inside-circle\" [ngClass]=\"theme\">\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CfCircularProgressBarComponent } from './cf-circular-progress-bar.component';\n\n@NgModule({\n    declarations: [\n        CfCircularProgressBarComponent\n    ],\n    imports: [\n        CommonModule\n    ],\n    exports: [\n        CfCircularProgressBarComponent\n    ]\n})\nexport class CfCircularProgressBarModule { }\n","import IDropdown from '../interfaces/IDropdown';\n\nexport default class Dropdown implements IDropdown {\n    label = '';\n    value = '';\n    optionEnabled = true;\n}\n","import {\n    Component, OnInit, Output, EventEmitter, Input, OnChanges, SimpleChanges, ViewEncapsulation\n} from '@angular/core';\nimport {\n    FormControl, FormGroup\n} from '@angular/forms';\nimport { MatSelectChange } from '@angular/material/select';\nimport IDropdown from '../interfaces/IDropdown';\nimport Dropdown from '../models/Dropdown';\n\n@Component({\n    selector: 'cf-dropdown',\n    templateUrl: './cf-dropdown.component.html',\n    styleUrls: ['./cf-dropdown.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class CfDropdownComponent implements OnInit, OnChanges {\n    @Input() options: Array<IDropdown> = [];\n    @Output() change = new EventEmitter();\n    @Input() label: string = '';\n    @Input() name?: string;\n    @Input() showLogo: boolean = true;\n    @Input() showLabel: boolean = true;\n    @Input() selected: string | string[] = '';\n    @Input() disabled: boolean = false;\n    @Input() multiple: boolean = false;\n    @Input() showDescription: boolean = false;\n\n    currentSelected: IDropdown = new Dropdown();\n    currentMultiSelected: Array<IDropdown> = [];\n\n    multiSelectText: string = '';\n\n    @Input() formGroup!: FormGroup;\n    @Input() control!: FormControl;\n\n    @Input() theme: string = 'dark';\n\n    // HTML helpers\n    objectFn = Object;\n    constructor() {\n        if (!this.control && !this.formGroup) {\n            this.formGroup = new FormGroup({});\n            this.control = new FormControl('');\n        }\n    }\n\n    ngOnInit(): void {\n        if (this.multiple)\n            this.control.setValue([]);\n\n        if (this.options && this.options.length > 0) {\n            if (this.multiple)\n                this.setDefaultMultipleSelection();\n\n            else\n                this.setDefaultSingleSelection();\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.selected?.currentValue) {\n            this.selected = changes.selected.currentValue;\n\n            if (this.options.length > 0)\n                this.setDefaultSingleSelection();\n        }\n\n        if (changes.options?.currentValue.length > 0)\n            this.setDefaultSingleSelection();\n    }\n\n    setDefaultSingleSelection() {\n        if (typeof this.selected === 'string') {\n            const index = this.validOption(this.selected);\n\n            if (index === -1) {\n                if (this.control.value && this.getCurrentSelectedOption(this.control.value))\n                    this.currentSelected = this.getCurrentSelectedOption(this.control.value) as IDropdown;\n                else\n                    this.currentSelected = this.options[0];\n            }\n            else\n                this.currentSelected = this.options[index];\n        }\n        else\n            this.currentSelected = this.options[0];\n\n        this.control.setValue(this.currentSelected.value);\n    }\n\n    setDefaultMultipleSelection() {\n        if (typeof this.selected === 'string') {\n            const index = this.validOption(this.selected);\n\n            if (index === -1)\n                this.currentMultiSelected = [this.options[0]];\n\n            else\n                this.currentMultiSelected = [this.options[index]];\n\n            this.multiSelectText = this.currentMultiSelected.map(x => x.label).join(', ');\n            this.control.setValue(this.currentMultiSelected.map(x => x.value));\n        }\n        else if (this.selected.constructor.name == 'Array') {\n            const validOptions: Array<string> = [];\n            const arr = Array.from(this.selected);\n\n            arr.forEach(x => {\n                const index = this.validOption(x);\n\n                if (index !== -1)\n                    validOptions.push(this.options[index].value);\n            });\n\n            this.currentMultiSelected = this.getCurrentMultiSelectedOption(validOptions);\n            this.multiSelectText = this.currentMultiSelected.map(x => x.label).join(', ');\n            this.control.setValue(this.currentMultiSelected.map(x => x.value));\n        }\n    }\n\n    validOption(value: string) {\n        if (value === '')\n            return -1;\n\n        for (let i = 0; i < this.options.length; i++) {\n            if (this.options[i].value === value)\n                return i;\n        }\n\n        return -1;\n    }\n\n    changeDropdown(matSelectChange: MatSelectChange) {\n        const currentSelected = this.getCurrentSelectedOption(matSelectChange.value);\n\n        if (currentSelected) {\n            this.currentSelected = currentSelected as IDropdown;\n            this.change.emit(this.currentSelected);\n        }\n    }\n\n    getCurrentSelectedOption(value: string) {\n        return this.options.find((x: IDropdown) => x.value === value);\n    }\n\n    getCurrentMultiSelectedOption(optionsArray: Array<string>) {\n        let data: IDropdown;\n\n        return optionsArray.map((x: string) => {\n            this.options.forEach((y: IDropdown) => {\n                if (x === y.value)\n                    data = y as IDropdown;\n            });\n\n            return data as IDropdown;\n        });\n    }\n\n    changeMultiDropdown(matSelectChange: MatSelectChange) {\n        this.currentMultiSelected = this.getCurrentMultiSelectedOption(matSelectChange.value);\n\n        this.multiSelectText = this.currentMultiSelected.map(x => x.label).join(', ');\n        this.change.emit(this.currentMultiSelected);\n    }\n\n    public get classes(): string[] {\n        return ['cf-dropdown-overlay-pane', this.theme];\n    }\n}\n","<div class=\"cf-dropdown container\" [ngClass]=\"classes\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div *ngIf=\"showLabel\">\n                <label class=\"label\">{{ label }}</label>\n            </div>\n            <div [class.error]=\"control.invalid && control.touched\" class=\"dropdown-holder\" [ngClass]=\"classes\"\n                [formGroup]=\"formGroup\">\n                <!-- For multi select dropdown -->\n                <mat-select matNativeControl [formControl]=\"control\" (selectionChange)=\"changeMultiDropdown($event)\"\n                    [ngClass]=\"classes\" [disabled]=\"disabled\" multiple *ngIf=\"multiple\">\n                    <mat-select-trigger>\n                        <span [ngStyle]=\"{ color: theme === 'dark' ? 'white' : 'black' }\">{{\n                            multiSelectText\n                            }}</span>\n                    </mat-select-trigger>\n                    <mat-option [value]=\"item.value\" *ngFor=\"let item of options\">\n                        <img [src]=\"item.logo\" [alt]=\"item.label\" width=\"25\" *ngIf=\"showLogo\" />\n                        {{ item.label }}\n                    </mat-option>\n                </mat-select>\n\n                <!-- For single select dropdown -->\n                <mat-select matNativeControl [formControl]=\"control\" (selectionChange)=\"changeDropdown($event)\"\n                    [panelClass]=\"classes\" [disabled]=\"disabled\" *ngIf=\"!multiple\">\n                    <mat-select-trigger>\n                        <img [src]=\"currentSelected.logo\" [alt]=\"currentSelected.label\" width=\"25\"\n                            style=\"margin-right: 0.5rem\" *ngIf=\"showLogo\" />\n                        <span [ngStyle]=\"{ color: theme === 'dark' ? 'white' : 'black' }\">{{\n                            currentSelected.label\n                            }}</span>\n                    </mat-select-trigger>\n                    <mat-option [disabled]=\"!item.optionEnabled\" [value]=\"item.value\" *ngFor=\"let item of options\"\n                        [ngClass]=\"{ description: showDescription, dark: theme === 'dark', light: theme === 'light' }\">\n                        <img [src]=\"item.logo\" [alt]=\"item.label\" width=\"25\" *ngIf=\"showLogo\"\n                            style=\"margin-right: 0.5rem\" />\n                        <span class=\"primary-text\">{{ item.label }}</span>\n                        <span class=\"text-description\" *ngIf=\"showDescription\">\n                            {{ item.description }}\n                        </span>\n                    </mat-option>\n                </mat-select>\n            </div>\n        </div>\n    </div>\n    <span class=\"text-danger\" *ngIf=\"control.errors && control.touched\">\n        {{ control.errors[objectFn.keys(control.errors)[0]] }}\n    </span>\n</div>","import { NgModule } from '@angular/core';\nimport { CfDropdownComponent } from './cf-dropdown.component';\nimport { SharedModule } from '../shared/shared.module';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [\n        CfDropdownComponent\n    ],\n    imports: [\n        CommonModule,\n        SharedModule\n    ],\n    exports: [\n        CfDropdownComponent\n    ]\n})\nexport class CfDropdownModule { }\n","import {\n    Component, OnInit, Output, EventEmitter, Input, OnChanges, SimpleChanges\n} from '@angular/core';\nimport {\n    FormControl, FormGroup\n} from '@angular/forms';\nimport { MatSelectChange } from '@angular/material/select';\nimport IDropdown from '../interfaces/IDropdown';\nimport Dropdown from '../models/Dropdown';\n\n@Component({\n    selector: 'cf-input-currency-dropdown',\n    templateUrl: './cf-input-currency-dropdown.component.html',\n    styleUrls: ['./cf-input-currency-dropdown.component.scss']\n})\nexport class CfInputCurrencyDropdownComponent implements OnInit, OnChanges {\n    // for dropdown\n    @Input() options: Array<IDropdown> = [];\n    @Output() currencyChanged = new EventEmitter();\n    @Input() label: string = '';\n    @Input() name?: string;\n    @Input() id?: string | null = null;\n    @Input() showLabel: boolean = true;\n    @Input() dark: boolean = false;\n    @Input() selected: string | string[] = '';\n    @Input() disabled: boolean = false;\n\n    // for input\n    @Input() value: string | number = 0;\n    @Input() type: 'number' | 'text' = 'number';\n    @Input() readonly?: boolean = false;\n    @Input() placeholder: string = '';\n    @Input() precision: number = 8;\n    @Input() precisionType: string = 'decimal';\n    @Output() valueChanged = new EventEmitter();\n\n    currentSelected: IDropdown = new Dropdown();\n\n    @Input() formGroup!: FormGroup;\n    @Input() inputControl!: FormControl;\n    @Input() currencyControl!: FormControl;\n\n    @Input() theme: string = 'dark';\n    // HTML helpers\n    objectFn = Object;\n    constructor() {\n        if (!this.inputControl && !this.formGroup && !this.currencyControl) {\n            this.formGroup = new FormGroup({});\n            this.inputControl = new FormControl('');\n            this.currencyControl = new FormControl('');\n        }\n    }\n\n    ngOnInit(): void {\n\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.value) {\n            const currentValue = changes.value.currentValue.toString();\n\n            if (this.type === 'number' && currentValue.includes('.')) {\n                const str = currentValue.split('.');\n\n                this.value = str[0] + '.' + str[1].slice(0, this.precision);\n            }\n\n            this.inputControl.setValue(this.value);\n        }\n\n        if (changes.selected && changes.selected.currentValue) {\n            this.setDefaultSingleSelection();\n        }\n\n        if (changes.options && changes.options.currentValue) {\n            this.setDefaultSingleSelection();\n        }\n    }\n\n    setDefaultSingleSelection() {\n        if (!this.options || this.options.length === 0)\n            return;\n\n        if (typeof this.selected === 'string') {\n            const index = this.validOption(this.selected);\n\n            if (index === -1) {\n                if (this.currencyControl.value && this.getCurrentSelectedOption(this.currencyControl.value))\n                    this.currentSelected = this.getCurrentSelectedOption(this.currencyControl.value) as IDropdown;\n                else\n                    this.currentSelected = this.options[0];\n            }\n            else\n                this.currentSelected = this.options[index];\n        }\n        else\n            this.currentSelected = this.options[0];\n\n        this.currencyControl.setValue(this.currentSelected.value);\n    }\n\n    validOption(value: string) {\n        if (value === '')\n            return -1;\n\n        for (let i = 0; i < this.options.length; i++) {\n            if (this.options[i].value === value)\n                return i;\n        }\n\n        return -1;\n    }\n\n    changeDropdown(matSelectChange: MatSelectChange) {\n        const currentSelected = this.getCurrentSelectedOption(matSelectChange.value);\n\n        if (currentSelected) {\n            this.currentSelected = currentSelected as IDropdown;\n            this.currencyChanged.emit(this.currentSelected);\n        }\n    }\n\n    getCurrentSelectedOption(value: string) {\n        return this.options.find((x: IDropdown) => x.value === value);\n    }\n\n    valueChangedHandler($event: any) {\n        this.valueChanged.emit($event.target.value);\n    }\n}\n","<div class=\"cf-input-currency-dropdown container\" [ngClass]=\"theme\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div *ngIf=\"showLabel\">\n                <label class=\"label\">{{ label }}</label>\n            </div>\n            <div [class.error]=\"\n                    (inputControl.invalid && inputControl.touched) ||\n                    (currencyControl.invalid && currencyControl.touched)\n                \" class=\"holder\" [formGroup]=\"formGroup\">\n                <div class=\"input-holder\">\n                    <input [type]=\"type\" [readonly]=\"readonly\" [formControl]=\"inputControl\" class=\"value-span\"\n                        [placeholder]=\"placeholder\" [value]=\"value\" (keyup)=\"valueChangedHandler($event)\" [id]=\"id\"\n                        PrecisionDirective [precision]=\"precision\" [precisionType]=\"precisionType\" />\n                </div>\n                <div class=\"dropdown-holder\" [ngClass]=\"{ dark: dark }\">\n                    <mat-select matNativeControl [formControl]=\"currencyControl\"\n                        [panelClass]=\"['cf-overlay-input-dropdown-child-pane', theme]\" (selectionChange)=\"changeDropdown($event)\"\n                        [ngClass]=\"{ dark: dark }\" [disabled]=\"disabled\">\n                        <mat-select-trigger style=\"display: flex; align-items: center;\">\n                            <img [src]=\"currentSelected.logo\" [alt]=\"currentSelected.label\" width=\"25\"\n                                style=\"margin-right: 0.5rem\" />\n                            <span class=\"selected-op