@vraj.patel/viitorcloud-ng-utility-library-test-9/fesm2022/viitorcloud-ng-utility-library.mjs

The **ViitorCloud NG Utility Library** developed with the Angular 16 framework, stands out for its exceptional adaptability and reusability within Angular projects. This comprehensive collection encompasses utility services, directives, and components str

import * as i0 from '@angular/core';
import { isDevMode, Injectable, Component, Input, EventEmitter, Output, Directive, HostListener, forwardRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
import * as i1 from '@angular/common';
import { NgClass, CommonModule, NgIf } from '@angular/common';
import * as i1$1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';

class VcLoggerService {
    /**
     * The log function logs the value and any additional arguments to the console if the application is
     * in development mode.
     * @param {any} value - The `value` parameter is the main value that you want to log. It can be of
     * any type, as indicated by the `any` type annotation.
     * @param {any[]} rest - The rest parameter allows you to pass an arbitrary number of arguments to
     * the function. In this case, the rest parameter is denoted by the ellipsis (...) and is used to
     * capture any additional arguments passed to the function after the initial "value" parameter. These
     * additional arguments are then stored in an array
     */
    static log(value, ...rest) {
        if (isDevMode()) {
            console.log(value, ...rest);
        }
    }
    /**
     * The function logs an error to the console.
     * @param {any} error - The "error" parameter is of type "any", which means it can accept any type of
     * value.
     */
    static error(error) {
        console.error(error);
    }
    /**
     * The "warn" function logs a warning message to the console if the application is in development
     * mode.
     * @param {any} value - The value parameter is the value that you want to log as a warning message.
     * @param {any[]} rest - The rest parameter allows you to pass an arbitrary number of arguments to
     * the function. In this case, the rest parameter `...rest` is used to capture any additional
     * arguments that are passed to the `warn` function after the `value` parameter. These additional
     * arguments can be accessed as an array within
     */
    static warn(value, ...rest) {
        console.warn(value, ...rest);
    }
    /**
     * The function clears the console.
     */
    static clear() {
        console.clear();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcLoggerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcLoggerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class VcLoaderComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: VcLoaderComponent, isStandalone: true, selector: "vc-loader", inputs: { class: "class" }, ngImport: i0, template: "<div class=\"flex justify-center items-center\">\r\n    <div class=\"spinner animate-spin inline-block border-4 border-solid rounded-full\" [ngClass]=\"class\" role=\"status\">\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcLoaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vc-loader', standalone: true, imports: [NgClass], template: "<div class=\"flex justify-center items-center\">\r\n    <div class=\"spinner animate-spin inline-block border-4 border-solid rounded-full\" [ngClass]=\"class\" role=\"status\">\r\n    </div>\r\n</div>" }]
        }], propDecorators: { class: [{
                type: Input
            }] } });

class VcButtonComponent {
    constructor() {
        this.type = 'button';
        this.isDisabled = false;
        this.spin = false;
        this.buttonTap = new EventEmitter();
    }
    /**
     * The click function emits the buttonTap event.
     */
    click() {
        this.buttonTap.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: VcButtonComponent, isStandalone: true, selector: "vc-button", inputs: { type: "type", class: "class", isDisabled: "isDisabled", spin: "spin" }, outputs: { buttonTap: "buttonTap" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"isDisabled\" [ngClass]=\"class\" (click)=\"click()\">\r\n    <ng-container *ngIf=\"!spin; else spinner;\">\r\n        <ng-content></ng-content>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #spinner>\r\n    <vc-loader [class]=\"{ 'w-6 h-6 border-x-secondary border-y-transparent': true }\"></vc-loader>\r\n</ng-template>", styles: [":host>.close-btn{@apply w-[30px] h-[30px] absolute top-2 right-2 text-[20px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VcLoaderComponent, selector: "vc-loader", inputs: ["class"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vc-button', standalone: true, imports: [CommonModule, VcLoaderComponent], template: "<button [type]=\"type\" [disabled]=\"isDisabled\" [ngClass]=\"class\" (click)=\"click()\">\r\n    <ng-container *ngIf=\"!spin; else spinner;\">\r\n        <ng-content></ng-content>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #spinner>\r\n    <vc-loader [class]=\"{ 'w-6 h-6 border-x-secondary border-y-transparent': true }\"></vc-loader>\r\n</ng-template>", styles: [":host>.close-btn{@apply w-[30px] h-[30px] absolute top-2 right-2 text-[20px];}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], class: [{
                type: Input
            }], isDisabled: [{
                type: Input
            }], spin: [{
                type: Input
            }], buttonTap: [{
                type: Output
            }] } });

var IconPosition;
(function (IconPosition) {
    IconPosition["left"] = "left";
    IconPosition["right"] = "right";
})(IconPosition || (IconPosition = {}));
var RegexType;
(function (RegexType) {
    RegexType["decimal"] = "decimal";
    RegexType["integer"] = "integer";
})(RegexType || (RegexType = {}));
const REGEX_CONSTANTS = {
    EMAIL_REGEX: /^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/,
    PASSWORD_REGEX: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?\d)(?=.*?[#?!@$%^&*-]).{8,}$/,
    WEB_URL_REGEX: /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/,
    INTEGER_REGEX: /^\d*$/,
    DECIMAL_REGEX: /^\d*\.?\d*$/,
    ZIP_REGEX: /^[0-9]{4,6}$/
};

class VcAllowNumberOnlyDirective {
    /* The `@Input() set regexType(type: string)` is a setter method for the `regexType` input property.
    It allows the value of `regexType` to be set from the outside. */
    set regexType(type) {
        switch (type) {
            case RegexType.decimal:
                this.regex = REGEX_CONSTANTS.DECIMAL_REGEX;
                break;
            case RegexType.integer:
                this.regex = REGEX_CONSTANTS.INTEGER_REGEX;
                break;
            default:
                this.regex = REGEX_CONSTANTS.DECIMAL_REGEX;
                break;
        }
    }
    /**
     * The constructor function takes an ElementRef parameter and assigns it to the private el property.
     * @param {ElementRef} el - The `el` parameter is of type `ElementRef`, which is a wrapper around a
     * native element inside a View. It can be used to access properties and methods of the native
     * element.
     */
    constructor(el) {
        this.el = el;
        /* The `@Input() vcAllowNumberOnly = false;` is a decorator that allows the `vcAllowNumberOnly`
        property to be set from the outside. It is initialized with a default value of `false`. */
        this.vcAllowNumberOnly = false;
    }
    /* The `@HostListener('keypress', ['']) keyPress(event: KeyboardEvent): void` is a decorator that
    listens for the 'keypress' event on the host element and triggers the `keyPress` method when the
    event occurs. */
    keyPress(event) {
        const val = this.el.nativeElement.value + event.key;
        if (this.vcAllowNumberOnly) {
            if (!this.regex.test(val)) {
                event.preventDefault();
                event.stopPropagation();
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcAllowNumberOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: VcAllowNumberOnlyDirective, isStandalone: true, selector: "[vcAllowNumberOnly]", inputs: { vcAllowNumberOnly: "vcAllowNumberOnly", regexType: "regexType" }, host: { listeners: { "keypress": "keyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcAllowNumberOnlyDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[vcAllowNumberOnly]',
                    standalone: true
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { vcAllowNumberOnly: [{
                type: Input
            }], regexType: [{
                type: Input
            }], keyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

const modules = [
    NgClass,
    FormsModule,
    NgIf,
    VcAllowNumberOnlyDirective,
    FormsModule
];
class VcInputComponent {
    #controlValue;
    #propagateChange; // Initialize the property
    #propagateTouched; // Initialize the property
    //#endregion 
    constructor(renderer) {
        this.renderer = renderer;
        //#endregion 
        //#region optional 
        this.type = 'text';
        this.position = 'left';
        this.placeholder = '';
        this.maxLength = undefined;
        this.required = false;
        this.isDisabled = false;
        this.readOnly = false;
        this.applyAllowNumberOnly = false;
        this.#controlValue = '';
        this.#propagateChange = () => { }; // Initialize the property
        this.#propagateTouched = () => { }; // Initialize the property
    }
    /**
     * The function returns the value of the private control property.
     * @returns The value of the private property `#controlValue` is being returned.
     */
    get control() {
        return this.#controlValue;
    }
    /**
     * The function sets the value of a control and propagates the change to other components.
     * @param {string} value - The value parameter is a string that represents the new value for the
     * control.
     */
    set control(value) {
        this.#controlValue = value;
        this.#propagateChange !== undefined && this.#propagateChange(this.#controlValue);
    }
    /**
     * The writeValue function assigns a value to the control property if the value is not empty.
     * @param {string} value - The value parameter is a string that represents the value to be assigned to
     * the control property.
     */
    writeValue(value) {
        value && (this.control = value);
    }
    /**
     * The function "registerOnChange" sets a callback function to be called when a change event occurs.
     * @param fn - A function that will be called when a change event occurs.
     */
    registerOnChange(fn) {
        this.#propagateChange = fn;
    }
    /**
     * The function "registerOnTouched" assigns a callback function to the "propagateTouched" property.
     * @param fn - A function that takes no arguments and returns nothing.
     */
    registerOnTouched(fn) {
        this.#propagateTouched = fn;
    }
    /**
     * The function "touched" calls the "propagateTouched" function with the provided event parameter.
     * @param {any}  - The  parameter is typically an object that represents the event that was
     * triggered. It contains information about the event, such as the target element, event type, and any
     * additional data associated with the event. In this case, it is of type "any", which means it can be
     * any type of
     */
    touched($event) {
        this.#propagateTouched($event);
    }
    /**
     * The ngAfterViewInit function adds dynamic styles to an SVG element and an input element based on the
     * position value.
     */
    ngAfterViewInit() {
        if (this.projectedSvgElement) {
            const element = this.projectedSvgElement?._elementRef.nativeElement;
            // Add styles dynamically using Renderer2
            if (this.position === IconPosition.left) {
                this.renderer.addClass(element, 'left-[10px]');
                this.renderer.addClass(this.inputElement.element.nativeElement, 'pl-[44px]');
            }
            else {
                this.renderer.addClass(element, 'right-[10px]');
                this.renderer.addClass(this.inputElement.element.nativeElement, 'pl-[10px]');
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: VcInputComponent, isStandalone: true, selector: "vc-input", inputs: { name: "name", type: "type", position: "position", placeholder: "placeholder", maxLength: "maxLength", required: "required", isDisabled: "isDisabled", readOnly: "readOnly", applyAllowNumberOnly: "applyAllowNumberOnly", customClass: "customClass", label: "label", pattern: "pattern", regexType: "regexType" }, providers: [{
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => VcInputComponent),
                multi: true
            }], queries: [{ propertyName: "projectedSvgElement", first: true, predicate: ["projectedElement"], descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-content select=\"[matIcon]\"></ng-content>\r\n<input #input [(ngModel)]='control' [vcAllowNumberOnly]=\"applyAllowNumberOnly\" [attr.max]=\"maxLength\"\r\n    [pattern]=\"pattern\" [required]=\"required\" [attr.name]=\"name\" [regexType]=\"regexType\" [attr.type]=\"type\"\r\n    [ngClass]=\"customClass\" [placeholder]=\"placeholder\" (blur)=\"touched($event)\" />", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: VcAllowNumberOnlyDirective, selector: "[vcAllowNumberOnly]", inputs: ["vcAllowNumberOnly", "regexType"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: VcInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vc-input', standalone: true, providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => VcInputComponent),
                            multi: true
                        }], imports: [...modules], template: "<ng-content select=\"[matIcon]\"></ng-content>\r\n<input #input [(ngModel)]='control' [vcAllowNumberOnly]=\"applyAllowNumberOnly\" [attr.max]=\"maxLength\"\r\n    [pattern]=\"pattern\" [required]=\"required\" [attr.name]=\"name\" [regexType]=\"regexType\" [attr.type]=\"type\"\r\n    [ngClass]=\"customClass\" [placeholder]=\"placeholder\" (blur)=\"touched($event)\" />", styles: [":host{width:100%}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { name: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], position: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], maxLength: [{
                type: Input
            }], required: [{
                type: Input
            }], isDisabled: [{
                type: Input
            }], readOnly: [{
                type: Input
            }], applyAllowNumberOnly: [{
                type: Input
            }], customClass: [{
                type: Input
            }], label: [{
                type: Input
            }], pattern: [{
                type: Input
            }], regexType: [{
                type: Input
            }], projectedSvgElement: [{
                type: ContentChild,
                args: ['projectedElement', { static: false }]
            }], inputElement: [{
                type: ViewChild,
                args: ['input', { read: ViewContainerRef }]
            }] } });

/*
 * Public API Surface of viitorcloud-ng-utility-library
 */
// #region Services
//#endregion

/**
 * Generated bundle index. Do not edit.
 */

export { VcButtonComponent, VcInputComponent, VcLoaderComponent, VcLoggerService };
//# sourceMappingURL=viitorcloud-ng-utility-library.mjs.map