cloud-ide-element 0.0.1

package/fesm2022/cloud-ide-element.mjs

@@ -0,0 +1,635 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, Injectable, EventEmitter, forwardRef, Component, Input, Output } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+
+class CapitalizePipe {
+    transform(value, capitalizationMethod) {
+        if (value) {
+            if (capitalizationMethod === 'allUpperCase') {
+                return value.toUpperCase();
+            }
+            else if (capitalizationMethod === 'titleCase') {
+                const splitString = value
+                    .split(' ')
+                    .map((s) => `${s[0].toUpperCase()}${s.slice(1)}`);
+                return splitString.join(' ');
+            }
+            else if (capitalizationMethod === 'sentenceCase') {
+                const splitString = value.split('.').map((s) => {
+                    const trimmedString = s.trim();
+                    if (trimmedString.length > 0) {
+                        return `${trimmedString[0].toUpperCase()}${trimmedString.slice(1)}`;
+                    }
+                    return '';
+                });
+                return splitString.join('. ');
+            }
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CapitalizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'capitalize',
+                    standalone: true
+                }]
+        }] });
+
+class CideElementsService {
+    constructor() {
+        this.cide_element_data = {};
+        this.is_cide_element_data_updated = new BehaviorSubject(false);
+    }
+    async getElementData(body) {
+        return new Promise((resolve) => {
+            const cide_element_data = this.cide_element_data[body?.sype_key];
+            if (cide_element_data) {
+                resolve(cide_element_data);
+            }
+            else {
+                const subscription = this.is_cide_element_data_updated?.subscribe((is_cide_element_data_updated) => {
+                    if (is_cide_element_data_updated) {
+                        const cide_element_data = this.cide_element_data[body?.sype_key];
+                        if (cide_element_data) {
+                            subscription?.unsubscribe();
+                            resolve(cide_element_data);
+                        }
+                    }
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideElementsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideElementsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideElementsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideInputComponent {
+    constructor(capitalizePipe, elementService) {
+        this.capitalizePipe = capitalizePipe;
+        this.elementService = elementService;
+        /*=======Set custom controls inputs to set components=========*/
+        /**
+         * @description to se the visual of control like solid control offerd by material design or outline with a border
+         * @options solid | outline | standard
+         */
+        this.fill = 'outline';
+        /** @description Lable of control (Title), Like Name, Email */
+        this.label = "";
+        /** @description to hide and show label */
+        this.labelHide = false;
+        /** @description is control Editable or Disabled */
+        this.disabled = false;
+        /** @description Is Clear Input Cross button is visible or not */
+        this.clearInput = false;
+        /** @description Position of Label 'floating' | 'fixed' */
+        this.labelPlacement = "fixed";
+        /** @description Lable direction from start of contrl or end of control */
+        this.labelDir = "start";
+        /** @description Place holder for control to display if there is no value */
+        this.placeholder = "";
+        /** @description it is to set leading icon, at the start of control  */
+        this.leadingIcon = "";
+        /** @description it is to set trailing icon, at the end of control, for password type control eye is the trailing icon  */
+        this.trailingIcon = "";
+        /** @description to display below the control for suggestion, if there is any error then error will bw the first to shoe in place of help text */
+        this.helperText = "";
+        /** @description default true to collapse when there is no help text or error text, if false then element area in DOM will be reserved never detroy  */
+        this.helperTextCollapse = true;
+        /** @description show and hide helper text its forecfull */
+        this.hideHelperAndErrorText = false;
+        /** @description if found any error in control the error thext will be used to display error message, if there is help text still error text is having higher priority then helptext */
+        this.errorText = "";
+        /** @description maxlength for control */
+        this.maxlength = 0;
+        /** @description minlength for control */
+        this.minlength = 0;
+        /** @description is control is required or not input type is true | false */
+        this.required = false;
+        /** @description Auto capatalization for the value and applicable to word or to complete sentance */
+        this.autocapitalize = "off";
+        /** @description auto complete type to help reader what is the type of value */
+        this.autocomplete = "off";
+        /** @description type of control */
+        this.type = '';
+        /** @description width of control, default width is 100% */
+        this.width = '100%';
+        /** @description uniq id of control, used to differenciat the value also prevent value should not effect another values */
+        this.id = '';
+        /** @description to get input value using one way binding like: [ngModel] or by two way binding [(ngModel)] */
+        this.ngModel = '';
+        this.option = ["anksuh", "bhure"];
+        /**
+         * @description
+         * Holds the size of the component like Small, Extra small, Large
+         * by Default it takes small size
+         * or the size set by the project setup service
+         * or it will beset for individual component
+         *
+         * Size Appled
+         * Component level then setup service then finally default md
+         *  Options: "2xs" | ""xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+         */
+        this.size = "sm";
+        /** @description to set return value using one way binding like: (ngModelChanges) or by two way binding [(ngModel)] */
+        this.ngModelChange = new EventEmitter();
+        /*
+            internal Properties for input
+        */
+        /** @description is vale need to read from ngModel or from value(need to implement), it is detected and maild fals on value chnages */
+        this.isNgModel = this.ngModel ? true : false;
+        /** @description this is to set control value is valid or not, set by us inside validate callbck method called by angular  */
+        this.isValid = true;
+        /** @description when control is touched then the will maid true by the us to check it is touched or not, when we will set this true we will call the onTouched callback method of angualr to inform angular that somthis is changed and control is touched */
+        this.isTouched = false;
+        /** @description we will take type of control in type but is may be not exactly which input's type so we need to get type and set actule type to our input, also when type is set password but in calse view in textt then inuut type need to change to text */
+        this.typeInternal = "text";
+        /** @description if traling is set the it is assigned by it, but some case tarling icon not as it is set need tro be changed at runtime, like password visibility hide and show */
+        this.trailingIconInternal = "";
+        /*
+            Properties connected with trailingIconInternal
+        */
+        this.isTrailingIconAllwedClick = false;
+        // Properties connected with id
+        this.idRandom = this.randomString();
+        // ==================================METHODS FOR CUSTOM FORM COMPONENT=============================
+        // FOR ANGULAR CALLED BY UI
+        /**
+         * @description Function to call when the HTML Chnage to tell Angular somthing is changed.
+         * @field value : inputType
+         */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.onChange = (value) => { };
+        /** @description Function to call when the input is touched (clciked) to tell Angular somthing is changed. */
+        this.onTouched = () => { };
+        /** @description Function to call when the input is need to Validate to tell Angular somthing is changed (in case of some input dipendent validation). */
+        this.onValidate = () => { };
+        // Validate control
+        this.onValidate();
+    }
+    /**
+     * @description
+     * Method that performs synchronous validation against the provided control.
+     * Exicuted by Angular
+     *
+     * @param control The control to validate against.
+     *
+     * @returns A map of validation errors if validation fails,
+     * otherwise null.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    validate(control) {
+        const validation_error = this.isControlValid(this.ngModel);
+        if (validation_error?.status) {
+            return validation_error;
+        }
+        else {
+            return null;
+        }
+    }
+    /**
+     * @description
+     * Registers a callback function to call when the validator inputs change.
+     * Exicuted by Angular
+     *
+     * @param fn The callback function
+     */
+    registerOnValidatorChange(fn) {
+        this.onValidate = fn;
+    }
+    /** @description when form control change from model side this method is implemented  */
+    writeValue(value) {
+        if (!this.isNgModel) {
+            this.ngModel = this.autoCapitalizeByOption(value, this.type);
+            this.ngModelChange?.emit(value);
+        }
+    }
+    /** @description Allows Angular to register a function to call when the model changes. */
+    // Save the function as a property to call later here.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @description Allows Angular to register a function to call when the input has been touched. */
+    // Save the function as a property to call later here.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    //==========================================================================
+    /*
+      Methods for input
+  */
+    /** @description Detect wether input propertires canged or not */
+    ngOnChanges(changes) {
+        if (changes?.['value']) {
+            this.isNgModel = true;
+            this.ngModel = this.processValue(this.ngModel, this.type);
+        }
+        if (this.isValidValueAndType(this.ngModel, this.type) || this.isTouched) {
+            this.isControlValid(this.ngModel);
+        }
+        // Ditect type change
+        if (changes?.['type']) {
+            this.detectTypeChange();
+        }
+    }
+    ngOnInit() {
+        if (this.id) {
+            this.getControlData();
+        }
+    }
+    /** @description custom method run when HTML changes, we call method registerd by angular to detect change */
+    upDateValue(value) {
+        const target = value.target;
+        this.isControlValid(target?.value);
+        const updatedValue = this.processValue(target?.value, this.type);
+        this.ngModel = updatedValue;
+        // console.log(target)
+        this.onChange(updatedValue);
+    }
+    /**
+     * @description method applicable in case of control type checkbox
+     *
+     * @param value boolean | string
+     */
+    updateValueCheckBox(value) {
+        // Convert string to boolean
+        this.ngModel = !this.ngModel;
+        value = (typeof value === 'boolean') ? value : (value === 'true' ? true : false);
+        this.ngModelChange?.emit(value);
+        this.onChange(value);
+    }
+    /** @description clear the value */
+    ClearInputValue() {
+        if (this.type == "text") {
+            this.upDateValue({ target: { value: "" } });
+        }
+    }
+    /** @description when HTML is focuesd */
+    focusControl() {
+        this.isTouched = true;
+        this.onTouched();
+        this.onValidate();
+    }
+    /** @description If control value need to be processed, like UPPERCASE */
+    processValue(value, type) {
+        value = this.autoCapitalizeByOption(value, type);
+        return value;
+    }
+    /** @description for capitalization */
+    autoCapitalizeByOption(value, type) {
+        if (type == 'text') {
+            if (this.autocapitalize == "on") {
+                return this.capitalizePipe?.transform(value, 'allUpperCase');
+            }
+            if (this.autocapitalize == "words") {
+                return this.capitalizePipe?.transform(value, 'titleCase');
+            }
+            if (this.autocapitalize == "sentences") {
+                return this.capitalizePipe?.transform(value, "sentenceCase");
+            }
+        }
+        return value;
+    }
+    /** @description It is used to return the value is valid or not */
+    isValidValueAndType(value, type) {
+        if (type == 'text') {
+            if (typeof (value) == 'string') {
+                if (value?.length > 0) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    /** @description to check control is valid or not */
+    isControlValid(value) {
+        const validation_status = {
+            validation: {},
+            status: false
+        };
+        if (this.required) {
+            if (!value) {
+                validation_status.status = true;
+                validation_status.validation.required = `required!`;
+            }
+        }
+        if (this.type == 'text') {
+            if (typeof (value) == 'string') {
+                if (this.maxlength > 0) {
+                    if (value?.length > this.maxlength) {
+                        validation_status.status = true;
+                        validation_status.validation.maxlength = `maximum length is ${this.maxlength}!`;
+                    }
+                }
+                if (this.minlength > 0) {
+                    if (value?.length < this.minlength) {
+                        validation_status.status = true;
+                        validation_status.validation.minlength = `minimum length is ${this.minlength}!`;
+                    }
+                }
+            }
+            else {
+                validation_status.status = true;
+                validation_status.validation.required = `required!`;
+            }
+        }
+        this.isValid = !validation_status.status;
+        this.errorText = Object.values(validation_status.validation).at(0) || '';
+        return validation_status;
+    }
+    /** @description Allows Angular to disable the input. */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** @description Method for trailing Icon Click */
+    trailingIconClick() {
+        if (this.type === 'password') {
+            if (this.typeInternal === 'password') {
+                this.typeInternal = 'text';
+                this.trailingIconInternal = 'visibility';
+            }
+            else {
+                this.typeInternal = 'password';
+                this.trailingIconInternal = 'visibility_off';
+            }
+        }
+    }
+    /**
+     * Method to generate Random String
+     * @param setupPrarameter { lenght: number, prefix: string }
+     * default lenght is 10, prefox is ""
+     * @returns string
+     */
+    randomString(setupPrarameter = { lenght: 10, prefix: "" }) {
+        //variable consisting alphabets in small and capital letter  
+        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
+        //loop to select a new character in each iteration  
+        let random_string = setupPrarameter?.prefix || "";
+        for (let i = 0; i < setupPrarameter?.lenght; i++) {
+            const rnum = Math.floor(Math.random() * characters.length);
+            random_string += characters.substring(rnum, rnum + 1);
+        }
+        //return the generated string  
+        return random_string;
+    }
+    async getControlData() {
+        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id });
+        if (cide_element_data) {
+            this.label = cide_element_data?.sype_label;
+            this.labelPlacement = (cide_element_data?.sype_label_placement || 'floating');
+            this.type = (cide_element_data?.sype_type || 'text');
+            this.required = (cide_element_data?.sype_required || false);
+            this.size = (cide_element_data?.sype_size || 'md');
+            this.helperTextCollapse = (cide_element_data?.sype_helper_text_collapse || false);
+            this.maxlength = (cide_element_data?.sype_max_length);
+            this.minlength = (cide_element_data?.sype_min_length);
+            this.leadingIcon = (cide_element_data?.sype_leading_icon);
+            this.labelHide = (cide_element_data?.sype_label_hide);
+            this.hideHelperAndErrorText = (cide_element_data?.sype_hide_helper_and_error_text);
+            this.detectTypeChange();
+            // Validate control
+            this.onValidate();
+        }
+    }
+    /**
+     * @description use to detact the change in type if changes done this method is ued to run
+     */
+    detectTypeChange() {
+        if (this.type === 'password') {
+            this.typeInternal = "password";
+            this.trailingIconInternal = "visibility_off";
+            this.isTrailingIconAllwedClick = true;
+        }
+        else {
+            this.typeInternal = "text";
+            this.trailingIconInternal = this.trailingIcon;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideInputComponent, deps: [{ token: CapitalizePipe }, { token: CideElementsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CideInputComponent, isStandalone: true, selector: "cide-ele-input", inputs: { fill: "fill", label: "label", labelHide: "labelHide", disabled: "disabled", clearInput: "clearInput", labelPlacement: "labelPlacement", labelDir: "labelDir", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", helperText: "helperText", helperTextCollapse: "helperTextCollapse", hideHelperAndErrorText: "hideHelperAndErrorText", errorText: "errorText", maxlength: "maxlength", minlength: "minlength", required: "required", autocapitalize: "autocapitalize", autocomplete: "autocomplete", type: "type", width: "width", id: "id", ngModel: "ngModel", option: "option", size: "size" }, outputs: { ngModelChange: "ngModelChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CideInputComponent),
+                multi: true
+            },
+            /** @description to apply validations  */
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: forwardRef(() => CideInputComponent),
+            },
+            CapitalizePipe
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'password'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cide-element-style-standard .cide-input-input{border-color:transparent}.cide-element-input-wrapper{position:relative}.cide-input-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-start{right:0}.cide-element-input-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-element-input-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-element-size-xxs .cide-input-input{height:var(--cide-element-size-xxs);font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input{height:var(--cide-element-size-xs);font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input{height:var(--cide-element-size-sm);font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input{height:var(--cide-element-size-md);font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input{height:var(--cide-element-size-lg);font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input{height:var(--cide-element-size-xl);font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xl)}.cide-input-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:-10;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // directives
+                CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 
+                // for ngModel
+                FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-input', standalone: true, imports: [
+                        // directives
+                        CommonModule,
+                        // for ngModel
+                        FormsModule
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CideInputComponent),
+                            multi: true
+                        },
+                        /** @description to apply validations  */
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => CideInputComponent),
+                        },
+                        CapitalizePipe
+                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'password'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cide-element-style-standard .cide-input-input{border-color:transparent}.cide-element-input-wrapper{position:relative}.cide-input-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-start{right:0}.cide-element-input-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-element-input-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-element-size-xxs .cide-input-input{height:var(--cide-element-size-xxs);font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input{height:var(--cide-element-size-xs);font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input{height:var(--cide-element-size-sm);font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input{height:var(--cide-element-size-md);font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input{height:var(--cide-element-size-lg);font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input{height:var(--cide-element-size-xl);font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear{right:var(--cide-element-size-xl)}.cide-input-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:-10;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: CapitalizePipe }, { type: CideElementsService }], propDecorators: { fill: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelHide: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clearInput: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], labelDir: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], helperTextCollapse: [{
+                type: Input
+            }], hideHelperAndErrorText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], autocapitalize: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ngModel: [{
+                type: Input
+            }], option: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], ngModelChange: [{
+                type: Output
+            }] } });
+
+class CideSpinnerComponent {
+    constructor() {
+        /**
+         * @description
+         * Holds the size of the component like Small, Extra small, Large
+         * by Default it takes small size
+         * or the size set by the project setup service
+         * or it will beset for individual component
+         *
+         * Size Appled
+         * Component level then setup service then finally default md
+         *  Options: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+         */
+        this.size = "sm";
+        this.type = "pill-spinner";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CideSpinnerComponent, isStandalone: true, selector: "cide-ele-spinner", inputs: { size: "size", type: "type" }, ngImport: i0, template: "@if (type === \"spinner\") {\r\n<svg class=\"cide-spinner tw-m-auto\"\r\n    [ngClass]=\"{'tw-max-w-6 tw-p-1': (size === 'xs'), 'tw-max-w-10 tw-p-2': (size === 'sm')}\" viewBox=\"0 0 24 24\">\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n</svg>\r\n}\r\n@else {\r\n<div class=\"cide-pill-loader tw-select-none\" [ngClass]=\"{'tw-h-4': (size === 'xs')}\">\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-spinner', standalone: true, imports: [CommonModule], template: "@if (type === \"spinner\") {\r\n<svg class=\"cide-spinner tw-m-auto\"\r\n    [ngClass]=\"{'tw-max-w-6 tw-p-1': (size === 'xs'), 'tw-max-w-10 tw-p-2': (size === 'sm')}\" viewBox=\"0 0 24 24\">\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n    <circle class=\"cide-spinner__value\" cx=\"12\" cy=\"12\" r=\"10\" />\r\n</svg>\r\n}\r\n@else {\r\n<div class=\"cide-pill-loader tw-select-none\" [ngClass]=\"{'tw-h-4': (size === 'xs')}\">\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n    <div class=\"cide-pill\" [ngClass]=\"{'tw-w-1 cide-pill-xs': (size === 'xs')}\"></div>\r\n</div>\r\n}" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class CideButtonComponent {
+    constructor(elementService) {
+        this.elementService = elementService;
+        // INPUTS
+        /**
+         * @description Lable of button like Submit, Update, Add, etc.
+         * note it is only used in case you was not set lebel between tags like button (ng-content),
+         * if lable is set ng contenet is not visisble
+         */
+        this.label = "";
+        /** @description button disabled or not use boolean type value */
+        this.disabled = false;
+        /** @description uniq id of control, used to differenciat the value also prevent value should not effect another values */
+        this.id = '';
+        /** @description to give the loading effect, diable button and enable loader */
+        this.loading = false;
+        // OUTPUTS
+        /**
+         *  @description click event of button similler to onClick (this is not possible beacuse no-output-no-prefix eslint) of angular or click of DOM
+         */
+        this.onclick = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.id) {
+            this.getControlData();
+        }
+    }
+    async getControlData() {
+        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id });
+        if (cide_element_data) {
+            this.label = cide_element_data?.sype_label;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideButtonComponent, deps: [{ token: CideElementsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideButtonComponent, isStandalone: true, selector: "cide-ele-button", inputs: { label: "label", disabled: "disabled", id: "id", loading: "loading" }, outputs: { onclick: "onclick" }, ngImport: i0, template: "<button class=\"cide-button tw-w-full tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-justify-around tw-flex\"\r\n    [ngClass]=\"{'cide-button-disabled': (disabled || loading)}\" [disabled]=\"(disabled || loading)\"\r\n    (click)=\"onclick.emit()\" [id]=\"id\">\r\n    <div class=\"tw-flex\">\r\n        <cide-ele-spinner *ngIf=\"loading\" class=\"tw-inline-block tw-my-1 tw-mr-2\" size=\"xs\"\r\n            [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\"></cide-ele-spinner>\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"!label\">\r\n            <ng-content></ng-content>\r\n        </span>\r\n        <span *ngIf=\"loading\" class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n    </div>\r\n</button>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-button', standalone: true, imports: [
+                        CommonModule,
+                        CideSpinnerComponent
+                    ], template: "<button class=\"cide-button tw-w-full tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-justify-around tw-flex\"\r\n    [ngClass]=\"{'cide-button-disabled': (disabled || loading)}\" [disabled]=\"(disabled || loading)\"\r\n    (click)=\"onclick.emit()\" [id]=\"id\">\r\n    <div class=\"tw-flex\">\r\n        <cide-ele-spinner *ngIf=\"loading\" class=\"tw-inline-block tw-my-1 tw-mr-2\" size=\"xs\"\r\n            [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\"></cide-ele-spinner>\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"!label\">\r\n            <ng-content></ng-content>\r\n        </span>\r\n        <span *ngIf=\"loading\" class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n    </div>\r\n</button>" }]
+        }], ctorParameters: () => [{ type: CideElementsService }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], onclick: [{
+                type: Output
+            }] } });
+
+class CideIconComponent {
+    constructor() {
+        this.size = "xs";
+        this.type = "round";
+        this.toolTip = "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideIconComponent, isStandalone: true, selector: "cide-ele-icon", inputs: { size: "size", type: "type", toolTip: "toolTip" }, ngImport: i0, template: "<button class=\"cide-icon tw-m-1 tw-overflow-hidden tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-icon', standalone: true, imports: [CommonModule], template: "<button class=\"cide-icon tw-m-1 tw-overflow-hidden tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], toolTip: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of cloud-ide-element
+ * Here we can add what need to be exported from library
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CideButtonComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSpinnerComponent };
+//# sourceMappingURL=cloud-ide-element.mjs.map