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

Credible's standard UI library

import * as i0 from '@angular/core';
import { Component, Optional, Inject, Injectable, Directive, Input, HostListener, NgModule, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
import * as i1 from '@angular/material/snack-bar';
import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBarRef } from '@angular/material/snack-bar';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import * as i5 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import * as i3$1 from '@angular/material/select';
import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i6 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i2 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatStepperModule } from '@angular/material/stepper';
import * as i1$2 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { getDocument, getWindow } from 'ssr-window';
import * as i4 from '@angular/material/core';
import * as i1$3 from '@angular/cdk/clipboard';
import { style, state, animate, transition, trigger } from '@angular/animations';

class CfAlertComponent {
    dialogRef;
    data;
    message = '';
    type = 'error';
    value = 0;
    duration = 0;
    timerId;
    constructor(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.message = data.message;
        this.duration = data.duration;
        this.type = data.type;
    }
    ngOnInit() {
        const stepperDuration = 250;
        this.timerId = setInterval(() => {
            this.value += stepperDuration;
            if (this.value >= this.duration)
                clearInterval(this.timerId);
        }, stepperDuration);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertComponent, deps: [{ token: i1.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfAlertComponent, selector: "cf-alert", ngImport: i0, template: "<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", styles: [".cf-alert .error{display:flex;justify-content:space-between}.cf-alert .error .message-holder .fa-circle-xmark{color:red;margin-right:.5rem}.cf-alert .error .message-holder .message{color:red;font-weight:700}.cf-alert .success{display:flex;justify-content:space-between}.cf-alert .success .message-holder .fa-circle-check{color:#90ee90;margin-right:.5rem}.cf-alert .success .message-holder .message{color:#90ee90;font-weight:700}::ng-deep .cf-alert .error .mat-progress-spinner circle,.cf-alert .error .mat-spinner circle{stroke:red}::ng-deep .cf-alert .success .mat-progress-spinner circle,.cf-alert .success .mat-spinner circle{stroke:#90ee90}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-alert', template: "<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", styles: [".cf-alert .error{display:flex;justify-content:space-between}.cf-alert .error .message-holder .fa-circle-xmark{color:red;margin-right:.5rem}.cf-alert .error .message-holder .message{color:red;font-weight:700}.cf-alert .success{display:flex;justify-content:space-between}.cf-alert .success .message-holder .fa-circle-check{color:#90ee90;margin-right:.5rem}.cf-alert .success .message-holder .message{color:#90ee90;font-weight:700}::ng-deep .cf-alert .error .mat-progress-spinner circle,.cf-alert .error .mat-spinner circle{stroke:red}::ng-deep .cf-alert .success .mat-progress-spinner circle,.cf-alert .success .mat-spinner circle{stroke:#90ee90}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatSnackBarRef }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_SNACK_BAR_DATA]
                }] }] });

class CfAlertService {
    _snackBar;
    duration = 5 * 1000;
    horizontalPosition = 'center';
    verticalPosition = 'top';
    constructor(_snackBar) {
        this._snackBar = _snackBar;
    }
    showError(err) {
        let message = 'Something went wrong';
        if (err && err.error && err.error.message)
            message = err.error.message;
        this._snackBar.openFromComponent(CfAlertComponent, {
            duration: this.duration,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            data: {
                message: message,
                type: 'error',
                duration: this.duration
            }
        });
    }
    showMessage(message, error = false) {
        this._snackBar.openFromComponent(CfAlertComponent, {
            duration: this.duration,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            data: {
                message: message,
                type: error ? 'error' : 'success',
                duration: this.duration
            }
        });
    }
    showSuccess(message) {
        this._snackBar.openFromComponent(CfAlertComponent, {
            duration: this.duration,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            data: {
                message: message,
                type: 'success',
                duration: this.duration
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertService, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1.MatSnackBar }] });

class PrecisionDirective {
    el;
    precision = 0;
    type = 'text';
    precisionType = '';
    allowedKeys = new Set();
    constructor(el) {
        this.el = el;
        const allowedKeys = [
            'Backspace',
            '0',
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            'ArrowRight',
            'ArrowLeft',
            'ArrowUp',
            'ArrowDown',
            '.',
            'Meta',
            'v'
        ];
        this.allowedKeys = new Set(allowedKeys);
    }
    onPaste(event) {
        const clipboardData = event.clipboardData;
        const pastedText = clipboardData?.getData('text');
        if (this.type === 'number' && pastedText?.length > 0) {
            if (Number(pastedText))
                return true;
            else {
                this.el.nativeElement.value = '';
                return false;
            }
        }
        return true;
    }
    onKeyDown(event) {
        const value = this.el.nativeElement.value;
        const regex = new RegExp(/[0-9]/);
        if (this.type === 'number') {
            const allowed = this.allowedKeys.has(event.key);
            if (!allowed)
                return false;
            if (event.code === 'Space')
                event.preventDefault();
            if (event.key === '.' && value.toString().indexOf('.') !== -1)
                return false;
            if (this.precisionType === 'decimal') {
                if (regex.test(event.key)) {
                    if (value.toString().includes('.')) {
                        const str = value.toString().split('.');
                        if (str[1].length >= this.precision)
                            return false;
                    }
                }
            }
            else if (this.precisionType === 'input') {
                if (event.code === 'Period')
                    event.preventDefault();
                if (event.code === 'Space')
                    event.preventDefault();
                if (!this.optionalKeys(event)) {
                    if (value.length >= this.precision)
                        return false;
                }
            }
        }
        return true;
    }
    optionalKeys(event) {
        if (event.code === 'Backspace')
            return true;
        if (event.code === 'ArrowLeft')
            return true;
        if (event.code === 'ArrowRight')
            return true;
        if (event.code === 'ArrowUp')
            return true;
        if (event.code === 'ArrowDown')
            return true;
        return false;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: PrecisionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: PrecisionDirective, selector: "[PrecisionDirective]", inputs: { precision: "precision", type: "type", precisionType: "precisionType" }, host: { listeners: { "paste": "onPaste($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: PrecisionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[PrecisionDirective]'
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { precision: [{
                type: Input
            }], type: [{
                type: Input
            }], precisionType: [{
                type: Input
            }], onPaste: [{
                type: HostListener,
                args: ['paste', ['$event']]
            }], onKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class SharedModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: SharedModule, declarations: [PrecisionDirective], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            MatSelectModule,
            MatCheckboxModule,
            MatTooltipModule,
            MatProgressSpinnerModule,
            MatSnackBarModule,
            MatSlideToggleModule,
            MatStepperModule,
            MatProgressBarModule], exports: [PrecisionDirective,
            FormsModule,
            ReactiveFormsModule,
            MatSelectModule,
            MatCheckboxModule,
            MatTooltipModule,
            MatProgressSpinnerModule,
            MatSnackBarModule,
            MatSlideToggleModule,
            MatStepperModule,
            MatProgressBarModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SharedModule, imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            MatSelectModule,
            MatCheckboxModule,
            MatTooltipModule,
            MatProgressSpinnerModule,
            MatSnackBarModule,
            MatSlideToggleModule,
            MatStepperModule,
            MatProgressBarModule, FormsModule,
            ReactiveFormsModule,
            MatSelectModule,
            MatCheckboxModule,
            MatTooltipModule,
            MatProgressSpinnerModule,
            MatSnackBarModule,
            MatSlideToggleModule,
            MatStepperModule,
            MatProgressBarModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SharedModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        PrecisionDirective
                    ],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatSelectModule,
                        MatCheckboxModule,
                        MatTooltipModule,
                        MatProgressSpinnerModule,
                        MatSnackBarModule,
                        MatSlideToggleModule,
                        MatStepperModule,
                        MatProgressBarModule
                    ],
                    exports: [
                        PrecisionDirective,
                        FormsModule,
                        ReactiveFormsModule,
                        MatSelectModule,
                        MatCheckboxModule,
                        MatTooltipModule,
                        MatProgressSpinnerModule,
                        MatSnackBarModule,
                        MatSlideToggleModule,
                        MatStepperModule,
                        MatProgressBarModule
                    ]
                }]
        }] });

class CfAlertModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CfAlertModule, declarations: [CfAlertComponent], imports: [CommonModule,
            SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertModule, providers: [
            CfAlertService,
            {
                provide: MatSnackBarRef,
                useValue: {}
            }
        ], imports: [CommonModule,
            SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        CfAlertComponent
                    ],
                    imports: [
                        CommonModule,
                        SharedModule
                    ],
                    providers: [
                        CfAlertService,
                        {
                            provide: MatSnackBarRef,
                            useValue: {}
                        }
                    ]
                }]
        }] });

class CfButtonComponent {
    label = '';
    type = 'solid';
    clicked = new EventEmitter();
    loading = false;
    disabled = false;
    align = 'center';
    theme = 'dark';
    constructor() { }
    raiseClickEvent($event) {
        $event.preventDefault();
        $event.stopImmediatePropagation();
        $event.stopPropagation();
        this.clicked.emit();
    }
    get classes() {
        if (this.disabled)
            return ['disabled', `button-${this.align}`, this.theme];
        else
            return [`button-${this.align}`, this.theme];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfButtonComponent, selector: "cf-button", inputs: { label: "label", type: "type", loading: "loading", disabled: "disabled", align: "align", theme: "theme" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<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>", styles: [".cf-button{line-height:normal}.cf-button .button-left{margin-right:auto}.cf-button .button-right{margin-left:auto}.cf-button .button-center{margin:auto}.cf-button .cf-button-solid.disabled,.cf-button .cf-button-theme.disabled{background:#0C0C0C!important}.cf-button .cf-button-outline.disabled,.cf-button .cf-button-text.disabled{background:rgba(0,0,0,.1)}.cf-button .cf-button-solid{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-solid .solid{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-solid .solid:disabled{cursor:not-allowed}.cf-button .cf-button-solid .solid:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-solid .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-solid .loader.disabled{cursor:not-allowed}.cf-button .cf-button-solid.dark{background:white!important}.cf-button .cf-button-solid.dark .solid{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-solid.dark .solid:disabled{color:gray!important}.cf-button .cf-button-solid.dark .solid:hover:not(:disabled){color:#000!important;background-color:#cf0!important;border:.5px solid #cf0}.cf-button .cf-button-solid.light{background:black!important}.cf-button .cf-button-solid.light .solid{color:#fff!important;background-color:transparent;border:1px solid black}.cf-button .cf-button-solid.light .solid:disabled{color:gray!important}.cf-button .cf-button-solid.light .solid:hover:not(:disabled){color:#000!important;background-color:#cf0!important;border:.5px solid #cf0}.cf-button .cf-button-theme{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-theme .theme{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-theme .theme:disabled{cursor:not-allowed}.cf-button .cf-button-theme .theme:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-theme .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-theme .loader.disabled{cursor:not-allowed}.cf-button .cf-button-theme.dark{background:#cf0!important}.cf-button .cf-button-theme.dark .theme{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-theme.dark .theme:disabled{color:gray!important}.cf-button .cf-button-theme.dark .theme:hover:not(:disabled){color:#000!important;background-color:#fff!important;border:.5px solid white}.cf-button .cf-button-theme.light{background:#cf0!important}.cf-button .cf-button-theme.light .theme{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-theme.light .theme:disabled{color:gray!important}.cf-button .cf-button-theme.light .theme:hover:not(:disabled){color:#000!important;background-color:#fff!important;border:1px solid #cf0}.cf-button .cf-button-outline{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-outline .outline{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-outline .outline:disabled{cursor:not-allowed;opacity:.5}.cf-button .cf-button-outline .outline:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-outline .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-outline .loader.disabled{cursor:not-allowed}.cf-button .cf-button-outline.dark{border:.5px solid rgb(125,125,125)!important;background:#1c1c1c!important}.cf-button .cf-button-outline.dark:hover:not(.disabled){border:.5px solid #cf0!important;background-color:#cf0!important;color:#000!important}.cf-button .cf-button-outline.dark .outline{color:#fff!important;border:none;background-color:transparent}.cf-button .cf-button-outline.dark .outline:disabled{background-color:transparent!important;color:inherit!important}.cf-button .cf-button-outline.dark .outline:hover:not([disabled]){color:#000!important}.cf-button .cf-button-outline.light{border:.1px solid #f5f5f5!important;background:transparent!important}.cf-button .cf-button-outline.light:hover:not(.disabled){background-color:#cf0!important;color:#000!important}.cf-button .cf-button-outline.light .outline{color:#000!important;border:none;background-color:transparent;border-radius:inherit}.cf-button .cf-button-outline.light .outline:disabled{background-color:transparent!important;color:inherit!important}.cf-button .cf-button-outline.light .outline:hover:not([disabled]){border:.1px solid black}.cf-button .cf-button-text{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-text .text{padding:12px 1.5rem;font-weight:700;border-radius:inherit}.cf-button .cf-button-text .text:disabled{cursor:not-allowed}.cf-button .cf-button-text .text:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-text .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-text .loader.disabled{cursor:not-allowed}.cf-button .cf-button-text.dark{background:transparent}.cf-button .cf-button-text.dark .text{color:#d3d3d3;background-color:transparent;border:none}.cf-button .cf-button-text.dark:hover{border:.1px solid #f5f5f5}.cf-button .cf-button-text.dark:hover .text{color:#fff}.cf-button .cf-button-text.light{background:transparent;border-radius:9px}.cf-button .cf-button-text.light .text{color:#000;background-color:transparent;border:none}.cf-button .cf-button-text.light .text:disabled{cursor:not-allowed}.cf-button .cf-button-text.light:hover{border:.1px solid #f5f5f5}::ng-deep .cf-button .mdc-circular-progress__circle-left svg{stroke:#cf0}::ng-deep .cf-button .mdc-circular-progress__gap-patch svg{stroke:#cf0}::ng-deep .cf-button .mdc-circular-progress__circle-right svg{stroke:#000}@media only screen and (max-width: 500px){button{font-size:1rem!important}.cf-button-solid .solid,.cf-button-outline .outline,.cf-button-text .text{padding:.5rem 1rem!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-button', template: "<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>", styles: [".cf-button{line-height:normal}.cf-button .button-left{margin-right:auto}.cf-button .button-right{margin-left:auto}.cf-button .button-center{margin:auto}.cf-button .cf-button-solid.disabled,.cf-button .cf-button-theme.disabled{background:#0C0C0C!important}.cf-button .cf-button-outline.disabled,.cf-button .cf-button-text.disabled{background:rgba(0,0,0,.1)}.cf-button .cf-button-solid{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-solid .solid{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-solid .solid:disabled{cursor:not-allowed}.cf-button .cf-button-solid .solid:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-solid .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-solid .loader.disabled{cursor:not-allowed}.cf-button .cf-button-solid.dark{background:white!important}.cf-button .cf-button-solid.dark .solid{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-solid.dark .solid:disabled{color:gray!important}.cf-button .cf-button-solid.dark .solid:hover:not(:disabled){color:#000!important;background-color:#cf0!important;border:.5px solid #cf0}.cf-button .cf-button-solid.light{background:black!important}.cf-button .cf-button-solid.light .solid{color:#fff!important;background-color:transparent;border:1px solid black}.cf-button .cf-button-solid.light .solid:disabled{color:gray!important}.cf-button .cf-button-solid.light .solid:hover:not(:disabled){color:#000!important;background-color:#cf0!important;border:.5px solid #cf0}.cf-button .cf-button-theme{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-theme .theme{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-theme .theme:disabled{cursor:not-allowed}.cf-button .cf-button-theme .theme:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-theme .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-theme .loader.disabled{cursor:not-allowed}.cf-button .cf-button-theme.dark{background:#cf0!important}.cf-button .cf-button-theme.dark .theme{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-theme.dark .theme:disabled{color:gray!important}.cf-button .cf-button-theme.dark .theme:hover:not(:disabled){color:#000!important;background-color:#fff!important;border:.5px solid white}.cf-button .cf-button-theme.light{background:#cf0!important}.cf-button .cf-button-theme.light .theme{color:#000!important;background-color:transparent;border:none}.cf-button .cf-button-theme.light .theme:disabled{color:gray!important}.cf-button .cf-button-theme.light .theme:hover:not(:disabled){color:#000!important;background-color:#fff!important;border:1px solid #cf0}.cf-button .cf-button-outline{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-outline .outline{padding:12px 1.5rem;border-radius:inherit}.cf-button .cf-button-outline .outline:disabled{cursor:not-allowed;opacity:.5}.cf-button .cf-button-outline .outline:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-outline .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-outline .loader.disabled{cursor:not-allowed}.cf-button .cf-button-outline.dark{border:.5px solid rgb(125,125,125)!important;background:#1c1c1c!important}.cf-button .cf-button-outline.dark:hover:not(.disabled){border:.5px solid #cf0!important;background-color:#cf0!important;color:#000!important}.cf-button .cf-button-outline.dark .outline{color:#fff!important;border:none;background-color:transparent}.cf-button .cf-button-outline.dark .outline:disabled{background-color:transparent!important;color:inherit!important}.cf-button .cf-button-outline.dark .outline:hover:not([disabled]){color:#000!important}.cf-button .cf-button-outline.light{border:.1px solid #f5f5f5!important;background:transparent!important}.cf-button .cf-button-outline.light:hover:not(.disabled){background-color:#cf0!important;color:#000!important}.cf-button .cf-button-outline.light .outline{color:#000!important;border:none;background-color:transparent;border-radius:inherit}.cf-button .cf-button-outline.light .outline:disabled{background-color:transparent!important;color:inherit!important}.cf-button .cf-button-outline.light .outline:hover:not([disabled]){border:.1px solid black}.cf-button .cf-button-text{display:flex;width:max-content;border-radius:9px}.cf-button .cf-button-text .text{padding:12px 1.5rem;font-weight:700;border-radius:inherit}.cf-button .cf-button-text .text:disabled{cursor:not-allowed}.cf-button .cf-button-text .text:hover:not(:disabled){cursor:pointer}.cf-button .cf-button-text .loader{margin:4px 4px 0 0;align-self:center}.cf-button .cf-button-text .loader.disabled{cursor:not-allowed}.cf-button .cf-button-text.dark{background:transparent}.cf-button .cf-button-text.dark .text{color:#d3d3d3;background-color:transparent;border:none}.cf-button .cf-button-text.dark:hover{border:.1px solid #f5f5f5}.cf-button .cf-button-text.dark:hover .text{color:#fff}.cf-button .cf-button-text.light{background:transparent;border-radius:9px}.cf-button .cf-button-text.light .text{color:#000;background-color:transparent;border:none}.cf-button .cf-button-text.light .text:disabled{cursor:not-allowed}.cf-button .cf-button-text.light:hover{border:.1px solid #f5f5f5}::ng-deep .cf-button .mdc-circular-progress__circle-left svg{stroke:#cf0}::ng-deep .cf-button .mdc-circular-progress__gap-patch svg{stroke:#cf0}::ng-deep .cf-button .mdc-circular-progress__circle-right svg{stroke:#000}@media only screen and (max-width: 500px){button{font-size:1rem!important}.cf-button-solid .solid,.cf-button-outline .outline,.cf-button-text .text{padding:.5rem 1rem!important}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }], type: [{
                type: Input
            }], clicked: [{
                type: Output
            }], loading: [{
                type: Input
            }], disabled: [{
                type: Input
            }], align: [{
                type: Input
            }], theme: [{
                type: Input
            }] } });

class CfButtonModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CfButtonModule, declarations: [CfButtonComponent], imports: [CommonModule,
            SharedModule], exports: [CfButtonComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfButtonModule, imports: [CommonModule,
            SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        CfButtonComponent
                    ],
                    imports: [
                        CommonModule,
                        SharedModule
                    ],
                    exports: [
                        CfButtonComponent
                    ]
                }]
        }] });

class CfCardComponent {
    stat = '';
    subtitle = '';
    heading = '';
    type = 'large';
    theme = 'dark';
    fullWidth = false;
    fullHeight = false;
    constructor() { }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCardComponent, selector: "cf-card", inputs: { stat: "stat", subtitle: "subtitle", heading: "heading", type: "type", theme: "theme", fullWidth: "fullWidth", fullHeight: "fullHeight" }, ngImport: i0, template: "<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>", styles: [".cf-card-large{display:grid;padding:1rem;border-radius:9px;height:max-content;display:block}.cf-card-large .stat{font-size:2rem;text-align:center}.cf-card-large .subtitle{font-size:1.2rem;margin-top:.8rem;text-align:center}.cf-card-large .heading{font-size:.8rem;margin-top:1rem;text-align:center}.cf-card-large.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-large.dark .stat{color:#fff}.cf-card-large.dark .subtitle,.cf-card-large.dark .heading{color:gray}.cf-card-large.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-large.light .stat{color:#000}.cf-card-large.light .subtitle{color:gray}.cf-card-large.light .heading{color:#000}.cf-card-compact{display:grid;border-radius:9px;padding:1rem;box-shadow:0 1px 9px -6px gray;background:#1D1E22}.cf-card-compact .stat{font-size:1.5rem;color:#fff;text-align:center}.cf-card-compact .subtitle{font-size:1rem;margin-top:.3rem;text-align:center}.cf-card-compact .heading{font-size:.8rem;margin-top:.3rem;text-align:center}.cf-card-compact.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-compact.dark .stat{color:#fff}.cf-card-compact.dark .subtitle,.cf-card-compact.dark .heading{color:gray}.cf-card-compact.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-compact.light .stat{color:#000}.cf-card-compact.light .subtitle{color:gray}.cf-card-compact.light .heading{color:#000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-card', template: "<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>", styles: [".cf-card-large{display:grid;padding:1rem;border-radius:9px;height:max-content;display:block}.cf-card-large .stat{font-size:2rem;text-align:center}.cf-card-large .subtitle{font-size:1.2rem;margin-top:.8rem;text-align:center}.cf-card-large .heading{font-size:.8rem;margin-top:1rem;text-align:center}.cf-card-large.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-large.dark .stat{color:#fff}.cf-card-large.dark .subtitle,.cf-card-large.dark .heading{color:gray}.cf-card-large.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-large.light .stat{color:#000}.cf-card-large.light .subtitle{color:gray}.cf-card-large.light .heading{color:#000}.cf-card-compact{display:grid;border-radius:9px;padding:1rem;box-shadow:0 1px 9px -6px gray;background:#1D1E22}.cf-card-compact .stat{font-size:1.5rem;color:#fff;text-align:center}.cf-card-compact .subtitle{font-size:1rem;margin-top:.3rem;text-align:center}.cf-card-compact .heading{font-size:.8rem;margin-top:.3rem;text-align:center}.cf-card-compact.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-compact.dark .stat{color:#fff}.cf-card-compact.dark .subtitle,.cf-card-compact.dark .heading{color:gray}.cf-card-compact.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-compact.light .stat{color:#000}.cf-card-compact.light .subtitle{color:gray}.cf-card-compact.light .heading{color:#000}\n"] }]
        }], ctorParameters: () => [], propDecorators: { stat: [{
                type: Input
            }], subtitle: [{
                type: Input
            }], heading: [{
                type: Input
            }], type: [{
                type: Input
            }], theme: [{
                type: Input
            }], fullWidth: [{
                type: Input
            }], fullHeight: [{
                type: Input
            }] } });

class CfCardModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CfCardModule, declarations: [CfCardComponent], imports: [CommonModule], exports: [CfCardComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        CfCardComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        CfCardComponent
                    ]
                }]
        }] });

class CfCheckboxComponent {
    name = '';
    id = '';
    disabled = false;
    checked = false;
    readonly = false;
    theme = 'dark';
    changed = new EventEmitter();
    formGroup;
    control;
    // HTML helpers
    objectFn = Object;
    constructor() {
        if (!this.control && !this.formGroup) {
            this.formGroup = new FormGroup({});
            this.control = new FormControl('');
            this.control.setValue(this.checked);
        }
    }
    ngOnInit() { }
    ngOnChanges(changes) {
        if (changes.checked)
            this.control.setValue(this.checked);
    }
    changeHandler(event) {
        this.changed.emit(event.currentTarget.checked);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCheckboxComponent, selector: "cf-checkbox", inputs: { name: "name", id: "id", disabled: "disabled", checked: "checked", readonly: "readonly", theme: "theme", formGroup: "formGroup", control: "control" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<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>", styles: [".cf-checkbox{width:max-content;margin:auto;font-family:inherit}.cf-container{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-weight:400}.cf-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cf-container .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;border-radius:2px}.cf-container.dark:hover input~.checkmark{background-color:#1d1e22}.cf-container.light:hover input~.checkmark{background-color:#fff}.cf-container.dark input:checked~.checkmark{color:#cf0}.cf-container.light input:checked~.checkmark{color:#cf0}.checkmark:after{content:\"\";position:absolute;display:none}.cf-container input:checked~.checkmark:after{display:block}.cf-container .checkmark:after{left:8px;top:3px;width:7px;height:13px;border-style:solid;border-width:0 3px 3px 0;transform:rotate(45deg)}.cf-container.dark .checkmark:after{border-color:#fff}.cf-container.light .checkmark:after{border-color:#000}.error ::ng-deep .mat-checkbox-layout .mat-checkbox-frame{border-color:#dc3545}.cf-container.dark{color:gray}.cf-container.dark .checkmark{border:.1px solid grey;background-color:transparent}.cf-container.light{color:#000}.cf-container.light .checkmark{border:.1px solid #f5f5f5;background-color:transparent}@media only screen and (max-width: 500px){.cf-checkbox{font-size:1rem!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-checkbox', template: "<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>", styles: [".cf-checkbox{width:max-content;margin:auto;font-family:inherit}.cf-container{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-weight:400}.cf-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cf-container .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;border-radius:2px}.cf-container.dark:hover input~.checkmark{background-color:#1d1e22}.cf-container.light:hover input~.checkmark{background-color:#fff}.cf-container.dark input:checked~.checkmark{color:#cf0}.cf-container.light input:checked~.checkmark{color:#cf0}.checkmark:after{content:\"\";position:absolute;display:none}.cf-container input:checked~.checkmark:after{display:block}.cf-container .checkmark:after{left:8px;top:3px;width:7px;height:13px;border-style:solid;border-width:0 3px 3px 0;transform:rotate(45deg)}.cf-container.dark .checkmark:after{border-color:#fff}.cf-container.light .checkmark:after{border-color:#000}.error ::ng-deep .mat-checkbox-layout .mat-checkbox-frame{border-color:#dc3545}.cf-container.dark{color:gray}.cf-container.dark .checkmark{border:.1px solid grey;background-color:transparent}.cf-container.light{color:#000}.cf-container.light .checkmark{border:.1px solid #f5f5f5;background-color:transparent}@media only screen and (max-width: 500px){.cf-checkbox{font-size:1rem!important}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { name: [{
                type: Input
            }], id: [{
                type: Input
            }], disabled: [{
                type: Input
            }], checked: [{
                type: Input
            }], readonly: [{
                type: Input
            }], theme: [{
                type: Input
            }], changed: [{
                type: Output
            }], formGroup: [{
                type: Input
            }], control: [{
                type: Input
            }] } });

class CfCheckboxModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9",