cats-ui-lib 2.0.0 → 2.0.1

package/fesm2022/cats-ui.mjs

@@ -1,2558 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive, LOCALE_ID, Inject, TemplateRef } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule, NgClass, DatePipe } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-
-class CatsUiService {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class InputComponent {
-    inputConfig;
-    onKeyDown = new EventEmitter();
-    onKeyUp = new EventEmitter();
-    value = '';
-    disabled = false;
-    touched = false;
-    control = null;
-    showPassword = false;
-    onChange = (value) => { };
-    onTouched = () => { };
-    /**
-     * @description Method to when value changes
-     * @author Shiva Kant
-     */
-    handleInput(event) {
-        const target = event.target;
-        this.value = target.value;
-        this.onChange(this.value);
-        if (this.control) {
-            this.control.markAsDirty();
-            this.control.updateValueAndValidity();
-        }
-    }
-    /**
-     * @description Method to Handle key down event
-     * @author Shiva Kant
-     */
-    handleKeyDown(event) {
-        this.onKeyDown.emit({ value: this.value, ...event });
-    }
-    /**
-     * @description Method to handle key up event
-     * @author Shiva Kant
-     */
-    handleKeyUp(event) {
-        this.onKeyUp.emit({ value: this.value, ...event });
-    }
-    /**
-     * @description Method to Handle blur (touched
-     * @author Shiva Kant
-     */
-    handleBlur(event) {
-        this.touched = true;
-        this.onTouched();
-        const control = event.target?.control;
-        control?.markAsTouched?.();
-    }
-    /**
-     * @description Method to ControlValueAccessor methods
-     * @author Shiva Kant
-     */
-    writeValue(value) {
-        this.value = value ?? '';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * @description Method to Validator interface
-     * @author Shiva Kant
-     */
-    validate(control) {
-        this.control = control;
-    }
-    /**
-     * @description method to use show password
-     * @author Shiva Kant
-     */
-    togglePassword() {
-        this.showPassword = !this.showPassword;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputComponent),
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => InputComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"input_container\">\r\n  @if (inputConfig.label) {\r\n  <label>{{ inputConfig.label }}</label>\r\n  }\r\n  <div class=\"custom-input\">\r\n    <input\r\n      class=\"input-box\"\r\n      [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n      [placeholder]=\"inputConfig.placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (keydown)=\"handleKeyDown($event)\"\r\n      (keyup)=\"handleKeyUp($event)\"\r\n    />\r\n    <!-- Eye Icon Only When Type Is Password -->\r\n    @if (inputConfig.type === 'password') {\r\n    <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n      <img\r\n        [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n        alt=\"toggle password visibility\"\r\n      />\r\n    </span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => InputComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"input_container\">\r\n  @if (inputConfig.label) {\r\n  <label>{{ inputConfig.label }}</label>\r\n  }\r\n  <div class=\"custom-input\">\r\n    <input\r\n      class=\"input-box\"\r\n      [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n      [placeholder]=\"inputConfig.placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (keydown)=\"handleKeyDown($event)\"\r\n      (keyup)=\"handleKeyUp($event)\"\r\n    />\r\n    <!-- Eye Icon Only When Type Is Password -->\r\n    @if (inputConfig.type === 'password') {\r\n    <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n      <img\r\n        [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n        alt=\"toggle password visibility\"\r\n      />\r\n    </span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"] }]
-        }], propDecorators: { inputConfig: [{
-                type: Input
-            }], onKeyDown: [{
-                type: Output
-            }], onKeyUp: [{
-                type: Output
-            }] } });
-
-class SingleSelectConfig {
-    idField = 'id';
-    textField = 'name';
-    disabledField = '';
-    placeholder = 'Select Option';
-    prefixLabel = '';
-    enableSearch = false;
-    required = false;
-}
-class MultiSelectConfig {
-    idField = 'id';
-    textField = 'name';
-    disabledField = '';
-    placeholder = 'Select Option';
-    prefixLabel = '';
-    enableSearch = false;
-    chipLimit = 2;
-    selectAll = true;
-    required = false;
-}
-class SearchConfig {
-    serachValue = '';
-    placeholder = 'Search';
-}
-class InputConfig {
-    type = 'text';
-    placeholder = '';
-    label = '';
-}
-class AutoCompleteSingleSelectConfig {
-    idField = 'id';
-    textField = 'name';
-    disabledField = '';
-    placeholder = 'Enter or Select';
-    required = false;
-    customInput = false;
-}
-class AutoCompleteMultiSelectConfig {
-    idField = 'id';
-    textField = 'name';
-    disabledField = '';
-    selectAll = true;
-    placeholder = 'Enter or Select';
-    required = false;
-    chipLimit = 2;
-    customInput = false;
-    pattern = '';
-}
-class ToggleConfig {
-    checked = false;
-    disabled = false;
-}
-class CheckBoxSubtask {
-    idField = '';
-    textField = '';
-    checked = false;
-}
-class CheckBoxConfig {
-    idField = '';
-    textField = '';
-    disabledField = '';
-    name = '';
-    checked = false;
-    subtasks;
-}
-
-const noop$1 = () => { };
-const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SingleSelectComponent),
-    multi: true,
-};
-const SINGLE_SELECT_CONTROL_VALUE_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SingleSelectComponent),
-    multi: true,
-};
-class SingleSelectComponent {
-    cd;
-    el;
-    optionList = [];
-    singleSelectConfig = new SingleSelectConfig();
-    selectedOption;
-    onSelection = new EventEmitter();
-    showDropdown = false;
-    searchText = '';
-    inValid = false;
-    control;
-    disableControl = false;
-    onScroll = new EventEmitter();
-    parentNativeElement;
-    selectedData;
-    constructor(cd, el) {
-        this.cd = cd;
-        this.el = el;
-    }
-    // These lifecycle hooks will be in use for further implementation
-    ngOnInit() { }
-    ngOnChanges(_changes) {
-        if (!_changes['optionList']?.currentValue) {
-            this.optionList = [];
-        }
-        else {
-            if (this.optionList.length > 10)
-                this.singleSelectConfig.enableSearch = true;
-            this.writeValue(this.control?.value);
-        }
-    }
-    /**
-     * @description Method to toggle dropdown list
-     * @author Shiva Kant
-     */
-    toggleDropdown() {
-        this.showDropdown = !this.showDropdown;
-        if (this.parentNativeElement) {
-            this.parentNativeElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center',
-            });
-            let parentDiv = document.getElementById(this.parentNativeElement);
-            setTimeout(() => {
-                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
-                let dropdonwList = document.getElementById('container_scroll');
-                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
-                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
-                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
-                }
-            }, 20);
-        }
-    }
-    /**
-     * @description Method to check if provide arg is an object or not
-     * @author Shiva Kant
-     * @param Obj:any
-     * @returns boolean
-     */
-    isObjEmpty(obj) {
-        if (typeof obj == 'string' || typeof obj == 'number')
-            return true;
-        return !(obj && Object.keys(obj).length > 0);
-    }
-    /**
-     * @description Method is to update selected option and then
-     * update formcontrol by call onChangeCallback.
-     * @author Shiva Kant
-     * @param item
-     * @returns void
-     */
-    updateSelectedOption(item) {
-        this.selectedOption = item;
-        this.toggleDropdown();
-        this.inValid = false;
-        this.onChangeCallback(item);
-        this.onTouchedCallback();
-        this.onSelection.emit(item);
-    }
-    validate(control) {
-        this.control = control;
-    }
-    // Below Methods are used to register form API methods in these variable to use them later
-    onTouchedCallback = noop$1;
-    onChangeCallback = noop$1;
-    // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
-    /**
-     * @description method to update value of selectedOption
-     * @author Shiva Kant
-     * @param obj this is provided by formcontrol
-     * @returns void
-     */
-    writeValue(obj) {
-        this.selectedOption = '';
-        if (this.optionList.length && obj) {
-            if (typeof obj === 'string' || typeof obj === 'number') {
-                if (typeof this.optionList?.[0] === 'string' ||
-                    typeof this.optionList?.[0] === 'number') {
-                    if (this.optionList.includes(obj)) {
-                        this.selectedOption = obj;
-                    }
-                }
-                else if (obj != '') {
-                    for (const option of this.optionList) {
-                        if (option[this.singleSelectConfig.idField] == obj ||
-                            option[this.singleSelectConfig.textField] == obj) {
-                            this.selectedOption = option;
-                            break;
-                        }
-                    }
-                }
-            }
-            else {
-                if (obj?.hasOwnProperty(this.singleSelectConfig.idField) &&
-                    !this.isObjEmpty(this.optionList[0])) {
-                    for (const option of this.optionList) {
-                        if (option[this.singleSelectConfig.idField] ==
-                            obj[this.singleSelectConfig.idField]) {
-                            this.selectedOption = option;
-                            break;
-                        }
-                    }
-                }
-            }
-            setTimeout(() => {
-                this.onChangeCallback(this.selectedOption);
-            }, 0);
-            this.cd.markForCheck();
-        }
-    }
-    /**
-     * @description method to register on change callback from form API
-     * @author Shiva Kant
-     * @param fn
-     * @returns void
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @description method to register on touch callback from form API
-     * @author Shiva Kant
-     * @param fn
-     * @returns void
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    //willbe used in further implementation
-    setDisabledState(isDisabled) {
-        this.disableControl = isDisabled;
-    }
-    /**
-     * @description method to update ontouchcallback on blur
-     * @author Shiva Kant
-     */
-    onTouched() {
-        this.onTouchedCallback();
-    }
-    /**
-     * @description method to toggle dropdown on outside click
-     * @author Shiva Kant
-     */
-    closeDropdown(event) {
-        if (!this.el.nativeElement.contains(event.target)) {
-            if (this.showDropdown && this.singleSelectConfig.required) {
-                this.inValid =
-                    this.selectedOption == '' ||
-                        JSON.stringify(this.selectedOption) == '{}';
-            }
-            if (this.showDropdown)
-                this.onTouchedCallback();
-            this.showDropdown = false;
-        }
-    }
-    /**
-     * @description method to load more list
-     * @author Shiva Kant
-     * @param event
-     */
-    onDivScroll(event) {
-        if (event.target.offsetHeight + event.target.scrollTop >=
-            event.target.scrollHeight - 1 &&
-            this.optionList.length) {
-            this.onScroll.emit();
-        }
-    }
-    get filteredOptionsValue() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            return this.optionList;
-        }
-        return this.optionList.filter((option) => {
-            if (typeof option != 'object') {
-                return option?.toLowerCase().includes(this.searchText.toLowerCase());
-            }
-            else {
-                return option[this.singleSelectConfig.textField]
-                    ?.toLowerCase()
-                    .includes(this.searchText.toLowerCase());
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SingleSelectComponent, isStandalone: true, selector: "cats-ui-single-select", inputs: { optionList: "optionList", singleSelectConfig: "singleSelectConfig", selectedOption: "selectedOption", parentNativeElement: "parentNativeElement" }, outputs: { onSelection: "onSelection", onScroll: "onScroll" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: SingleSelectComponent,
-                multi: true,
-            },
-            SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
-        ], queries: [{ propertyName: "selectedData", first: true, predicate: ["selectedData"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n  <div\r\n    class=\"single-select-dropdown\"\r\n    (click)=\"toggleDropdown()\"\r\n    [ngClass]=\"{\r\n      'border-danger':\r\n        (control?.touched || control?.dirty) &&\r\n        control?.invalid &&\r\n        control?.errors,\r\n      'disable-control': disableControl\r\n    }\"\r\n  >\r\n    <div class=\"left_details\">\r\n      @if(singleSelectConfig.prefixLabel){\r\n      <span class=\"predefine_label\">\r\n        <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n      </span>\r\n      } @if (!isObjEmpty(selectedOption) &&\r\n      selectedOption[singleSelectConfig.textField]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n        [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n      ></ng-container>\r\n\r\n      <ng-template #defaultTemplate let-data=\"data\">\r\n        <span class=\"textTruncate\">\r\n          {{ selectedOption[singleSelectConfig.textField] }}\r\n        </span>\r\n      </ng-template>\r\n      }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n        [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n      ></ng-container>\r\n\r\n      <ng-template #defaultTemplate1 let-data=\"data\">\r\n        <span class=\"textTruncate\">\r\n          {{ selectedOption }}\r\n        </span>\r\n      </ng-template>\r\n      }@else{\r\n      <span class=\"placeholderColor textTruncate\">{{\r\n        singleSelectConfig.placeholder\r\n      }}</span>\r\n\r\n      }\r\n    </div>\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"\"\r\n        srcset=\"\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"\"\r\n        srcset=\"\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n  @if (showDropdown) {\r\n  <div\r\n    class=\"dropdown-list\"\r\n    id=\"container_scroll\"\r\n    (scroll)=\"onDivScroll($event)\"\r\n  >\r\n    @if (singleSelectConfig.enableSearch) {\r\n    <div class=\"search_bar\">\r\n      <div class=\"input_box\">\r\n        <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n        <input\r\n          type=\"text\"\r\n          class=\"filter_search_box\"\r\n          name=\"\"\r\n          id=\"\"\r\n          placeholder=\"Search here\"\r\n          [(ngModel)]=\"searchText\"\r\n        />\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          alt=\"\"\r\n          (click)=\"searchText = ''\"\r\n        />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n      filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{ option }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } } @else { @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{\r\n          option[singleSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SingleSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-single-select', imports: [CommonModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: SingleSelectComponent,
-                            multi: true,
-                        },
-                        SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n  <div\r\n    class=\"single-select-dropdown\"\r\n    (click)=\"toggleDropdown()\"\r\n    [ngClass]=\"{\r\n      'border-danger':\r\n        (control?.touched || control?.dirty) &&\r\n        control?.invalid &&\r\n        control?.errors,\r\n      'disable-control': disableControl\r\n    }\"\r\n  >\r\n    <div class=\"left_details\">\r\n      @if(singleSelectConfig.prefixLabel){\r\n      <span class=\"predefine_label\">\r\n        <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n      </span>\r\n      } @if (!isObjEmpty(selectedOption) &&\r\n      selectedOption[singleSelectConfig.textField]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n        [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n      ></ng-container>\r\n\r\n      <ng-template #defaultTemplate let-data=\"data\">\r\n        <span class=\"textTruncate\">\r\n          {{ selectedOption[singleSelectConfig.textField] }}\r\n        </span>\r\n      </ng-template>\r\n      }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n        [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n      ></ng-container>\r\n\r\n      <ng-template #defaultTemplate1 let-data=\"data\">\r\n        <span class=\"textTruncate\">\r\n          {{ selectedOption }}\r\n        </span>\r\n      </ng-template>\r\n      }@else{\r\n      <span class=\"placeholderColor textTruncate\">{{\r\n        singleSelectConfig.placeholder\r\n      }}</span>\r\n\r\n      }\r\n    </div>\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"\"\r\n        srcset=\"\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"\"\r\n        srcset=\"\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n  @if (showDropdown) {\r\n  <div\r\n    class=\"dropdown-list\"\r\n    id=\"container_scroll\"\r\n    (scroll)=\"onDivScroll($event)\"\r\n  >\r\n    @if (singleSelectConfig.enableSearch) {\r\n    <div class=\"search_bar\">\r\n      <div class=\"input_box\">\r\n        <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n        <input\r\n          type=\"text\"\r\n          class=\"filter_search_box\"\r\n          name=\"\"\r\n          id=\"\"\r\n          placeholder=\"Search here\"\r\n          [(ngModel)]=\"searchText\"\r\n        />\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          alt=\"\"\r\n          (click)=\"searchText = ''\"\r\n        />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n      filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{ option }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } } @else { @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{\r\n          option[singleSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
-                type: Input
-            }], singleSelectConfig: [{
-                type: Input
-            }], selectedOption: [{
-                type: Input
-            }], onSelection: [{
-                type: Output
-            }], onScroll: [{
-                type: Output
-            }], parentNativeElement: [{
-                type: Input
-            }], selectedData: [{
-                type: ContentChild,
-                args: ['selectedData']
-            }], onTouched: [{
-                type: HostListener,
-                args: ['blur']
-            }], closeDropdown: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-const noop = () => { };
-const MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MultiSelectComponent),
-    multi: true,
-};
-const MULTI_SELECT_CONTROL_VALUE_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MultiSelectComponent),
-    multi: true,
-};
-class MultiSelectComponent {
-    cd;
-    el;
-    optionList = [];
-    multiSelectConfig = new MultiSelectConfig();
-    selectedOptions = [];
-    onSelection = new EventEmitter();
-    control;
-    showDropdown = false;
-    isListArrayOfObject = false;
-    isSelectedAll = false;
-    inValid = false;
-    searchText = '';
-    disabledControl = false;
-    constructor(cd, el) {
-        this.cd = cd;
-        this.el = el;
-    }
-    // These lifecycle hooks will be in use for further implementation
-    ngOnInit() { }
-    ngOnChanges(_changes) {
-        if (_changes['optionList'].currentValue &&
-            _changes['optionList'].currentValue.length > 0) {
-            if (typeof this.optionList[0] === 'string' ||
-                typeof this.optionList[0] === 'number') {
-                this.optionList = this.optionList.map((option) => {
-                    const item = {
-                        [this.multiSelectConfig.idField]: option,
-                        [this.multiSelectConfig.textField]: option,
-                        isSelected: false,
-                    };
-                    if (this.multiSelectConfig.disabledField) {
-                        item[this.multiSelectConfig.disabledField] = false;
-                    }
-                    return item;
-                });
-            }
-            else {
-                this.isListArrayOfObject = true;
-                this.optionList = this.optionList.map((option) => {
-                    return {
-                        ...option,
-                        isSelected: false,
-                    };
-                });
-            }
-            if (this.optionList.length > 10)
-                this.multiSelectConfig.enableSearch = true;
-            this.writeValue(this.control?.value);
-        }
-    }
-    /**
-     * @description Method to toggle dropdown list
-     * @author Shiva Kant
-     */
-    toggleDropdown() {
-        this.showDropdown = !this.showDropdown;
-    }
-    /**
-     * @description Method to check if provide arg is an object or not
-     * @author Shiva Kant
-     * @param Obj:any
-     * @returns boolean
-     */
-    isObjEmpty(obj) {
-        return !(obj && Object.keys(obj).length > 0);
-    }
-    /**
-     * @description Method is to update selected option and then
-     * update formcontrol by call onChangeCallback.
-     * @author Shiva Kant
-     * @param item
-     * @returns void
-     */
-    updateSelectedOption(item) {
-        item.isSelected = !item.isSelected;
-        if (!item.isSelected) {
-            let ind = this.selectedOptions.findIndex((option) => item[this.multiSelectConfig.idField] ==
-                option[this.multiSelectConfig.idField]);
-            if (ind >= 0)
-                this.selectedOptions.splice(ind, 1);
-        }
-        else {
-            this.selectedOptions.push(item);
-        }
-        this.isSelectedAll = this.optionList.every((option) => option.isSelected == true);
-        this.inValid = false;
-        this.onChangeCallback(this.selectedOptions);
-        this.onTouchedCallback();
-        this.onSelection.emit(this.selectedOptions);
-        this.cd.markForCheck();
-    }
-    // Below Methods are used to register form API methods in these variable to use them later
-    onTouchedCallback = noop;
-    onChangeCallback = noop;
-    validate(control) {
-        this.control = control;
-    }
-    // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
-    /**
-     * @description method to update value of selectedOption
-     * @author Shiva Kant
-     * @param controlValue this is provided by formcontrol
-     * @returns void
-     */
-    writeValue(controlValue) {
-        if (this.optionList.length) {
-            this.selectedOptions = [];
-            if (controlValue && controlValue.length > 0) {
-                if (typeof controlValue[0] === 'string' ||
-                    typeof controlValue[0] === 'number') {
-                    controlValue = controlValue.map((option) => {
-                        return {
-                            [this.multiSelectConfig.idField]: option,
-                            [this.multiSelectConfig.textField]: option,
-                        };
-                    });
-                }
-                for (const option of controlValue) {
-                    let ind = this.optionList.findIndex((item) => item[this.multiSelectConfig.idField] ==
-                        option[this.multiSelectConfig.idField] ||
-                        item[this.multiSelectConfig.textField] ==
-                            option[this.multiSelectConfig.textField]);
-                    if (ind >= 0) {
-                        this.optionList[ind] = {
-                            ...this.optionList[ind],
-                            isSelected: true,
-                        };
-                        this.selectedOptions.push(this.optionList[ind]);
-                    }
-                }
-            }
-            this.isSelectedAll = this.optionList.every((option) => option.isSelected == true);
-            this.onChangeCallback(this.selectedOptions);
-            this.cd.markForCheck();
-        }
-    }
-    /**
-     * @description method to register on change callback from form API
-     * @author Shiva Kant
-     * @param fn
-     * @returns void
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @description method to register on touch callback from form API
-     * @author Shiva Kant
-     * @param fn
-     * @returns void
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    //willbe used in further implementation
-    setDisabledState(isDisabled) {
-        this.disabledControl = isDisabled;
-    }
-    /**
-     * @description method to update ontouchcallback on blur
-     * @author Shiva Kant
-     */
-    onTouched() {
-        this.onTouchedCallback();
-    }
-    /**
-     * @description method to toggle dropdown on outside click
-     * @author Shiva Kant
-     */
-    closeDropdown(event) {
-        if (!this.el.nativeElement.contains(event.target)) {
-            if (this.showDropdown && this.multiSelectConfig.required) {
-                this.inValid = this.selectedOptions.length < 0;
-            }
-            this.showDropdown = false;
-        }
-    }
-    checkUncheckAll() {
-        if (this.isSelectedAll) {
-            this.optionList = this.optionList.map((option) => {
-                if (this.multiSelectConfig.disabledField &&
-                    option[this.multiSelectConfig.disabledField]) {
-                    return option;
-                }
-                return { ...option, isSelected: false };
-            });
-            this.isSelectedAll = false;
-            this.selectedOptions = this.optionList.filter((o) => o.isSelected);
-        }
-        else {
-            this.optionList = this.optionList.map((option) => {
-                if (this.multiSelectConfig.disabledField &&
-                    option[this.multiSelectConfig.disabledField]) {
-                    return option;
-                }
-                return { ...option, isSelected: true };
-            });
-            this.isSelectedAll = true;
-            this.selectedOptions = this.optionList.filter((o) => o.isSelected);
-        }
-        this.onChangeCallback(this.selectedOptions);
-        this.onSelection.emit(this.selectedOptions);
-    }
-    get filteredOptionsValue() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            return this.optionList;
-        }
-        return this.optionList.filter((option) => option[this.multiSelectConfig.textField]
-            ?.toLowerCase()
-            .includes(this.searchText.toLowerCase()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MultiSelectComponent, isStandalone: true, selector: "cats-ui-multi-select", inputs: { optionList: "optionList", multiSelectConfig: "multiSelectConfig", selectedOptions: "selectedOptions" }, outputs: { onSelection: "onSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
-            MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
-            MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\">\r\n  <div\r\n    class=\"display-div\"\r\n    (click)=\"toggleDropdown()\"\r\n    [ngClass]=\"{\r\n      'border-danger': this.inValid,\r\n      'disable-control': disabledControl\r\n    }\"\r\n  >\r\n    <div class=\"left_details\">\r\n      @if(multiSelectConfig.prefixLabel){\r\n      <span class=\"predefine_label\">\r\n        <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n      </span>\r\n      }\r\n      <div class=\"multi_label_wrapper\">\r\n        @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n        $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n        <div class=\"input_text\">\r\n          <span class=\"textTruncate\">{{\r\n            item[multiSelectConfig.textField]\r\n          }}</span>\r\n          <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n          <img\r\n            src=\"images/x.svg\"\r\n            (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n            class=\"cross_icon\"\r\n            alt=\"\"\r\n          />\r\n        </div>\r\n        } } } @else{\r\n        <span class=\"placeholderColor textTruncate\">{{\r\n          multiSelectConfig.placeholder\r\n        }}</span>\r\n        } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n        <div class=\"view_more\">\r\n          +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown-list\" id=\"container_scroll\">\r\n    @if (multiSelectConfig.enableSearch) {\r\n    <div class=\"search_bar\">\r\n      <div class=\"input_box\">\r\n        <img src=\"images/search.svg\" alt=\"\" />\r\n        <input\r\n          type=\"text\"\r\n          class=\"filter_search_box\"\r\n          name=\"\"\r\n          id=\"\"\r\n          placeholder=\"Search here\"\r\n          [(ngModel)]=\"searchText\"\r\n        />\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          alt=\"\"\r\n          (click)=\"searchText = ''\"\r\n        />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n      <li (click)=\"checkUncheckAll()\">\r\n        <span class=\"checkbox_container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n          @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n        </span>\r\n      </li>\r\n      } @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            multiSelectConfig.disabledField &&\r\n            option[multiSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n        <span class=\"textTruncate\"\r\n          >{{ option[multiSelectConfig.textField] }}\r\n        </span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-multi-select', imports: [NgClass, FormsModule], providers: [
-                        MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
-                        MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\">\r\n  <div\r\n    class=\"display-div\"\r\n    (click)=\"toggleDropdown()\"\r\n    [ngClass]=\"{\r\n      'border-danger': this.inValid,\r\n      'disable-control': disabledControl\r\n    }\"\r\n  >\r\n    <div class=\"left_details\">\r\n      @if(multiSelectConfig.prefixLabel){\r\n      <span class=\"predefine_label\">\r\n        <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n      </span>\r\n      }\r\n      <div class=\"multi_label_wrapper\">\r\n        @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n        $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n        <div class=\"input_text\">\r\n          <span class=\"textTruncate\">{{\r\n            item[multiSelectConfig.textField]\r\n          }}</span>\r\n          <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n          <img\r\n            src=\"images/x.svg\"\r\n            (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n            class=\"cross_icon\"\r\n            alt=\"\"\r\n          />\r\n        </div>\r\n        } } } @else{\r\n        <span class=\"placeholderColor textTruncate\">{{\r\n          multiSelectConfig.placeholder\r\n        }}</span>\r\n        } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n        <div class=\"view_more\">\r\n          +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown-list\" id=\"container_scroll\">\r\n    @if (multiSelectConfig.enableSearch) {\r\n    <div class=\"search_bar\">\r\n      <div class=\"input_box\">\r\n        <img src=\"images/search.svg\" alt=\"\" />\r\n        <input\r\n          type=\"text\"\r\n          class=\"filter_search_box\"\r\n          name=\"\"\r\n          id=\"\"\r\n          placeholder=\"Search here\"\r\n          [(ngModel)]=\"searchText\"\r\n        />\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          alt=\"\"\r\n          (click)=\"searchText = ''\"\r\n        />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n      <li (click)=\"checkUncheckAll()\">\r\n        <span class=\"checkbox_container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n          @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n        </span>\r\n      </li>\r\n      } @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            multiSelectConfig.disabledField &&\r\n            option[multiSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n        <span class=\"textTruncate\"\r\n          >{{ option[multiSelectConfig.textField] }}\r\n        </span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
-                type: Input
-            }], multiSelectConfig: [{
-                type: Input
-            }], selectedOptions: [{
-                type: Input
-            }], onSelection: [{
-                type: Output
-            }], onTouched: [{
-                type: HostListener,
-                args: ['blur']
-            }], closeDropdown: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class SearchBoxComponent {
-    searchParam = '';
-    searchConfig = new SearchConfig();
-    onClose = new EventEmitter();
-    searchParamValue = new EventEmitter();
-    onChange = () => { };
-    onTouched = () => { };
-    isDisabled = false;
-    ngOnInit() {
-        this.searchParam = this.searchConfig?.serachValue || '';
-    }
-    /**
-     * @description Method to Called when input changes
-     * @author Shiva Kant
-     */
-    onInputChange(event) {
-        const value = event.target?.value;
-        this.searchParam = value;
-        this.onChange(value);
-        this.searchParamValue.emit(value);
-    }
-    /**
-     * @description Method to closeSearchBar
-     * @author Shiva Kant
-     */
-    closeSearchBar() {
-        this.searchParam = '';
-        this.onChange('');
-        this.searchParamValue.emit('');
-        this.onClose.emit();
-    }
-    // -------- ControlValueAccessor methods --------
-    writeValue(value) {
-        this.searchParam = value || '';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SearchBoxComponent, isStandalone: true, selector: "cats-ui-search-box", inputs: { searchConfig: "searchConfig" }, outputs: { onClose: "onClose", searchParamValue: "searchParamValue" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SearchBoxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"search_input\">\r\n  <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n  <input\r\n    [placeholder]=\"searchConfig.placeholder\"\r\n    type=\"text\"\r\n    [value]=\"searchParam\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n  @if (searchParam.length > 0) {\r\n  <div class=\"cross_icon\">\r\n    <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-search-box', imports: [FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SearchBoxComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"search_input\">\r\n  <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n  <input\r\n    [placeholder]=\"searchConfig.placeholder\"\r\n    type=\"text\"\r\n    [value]=\"searchParam\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n  @if (searchParam.length > 0) {\r\n  <div class=\"cross_icon\">\r\n    <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"] }]
-        }], propDecorators: { searchConfig: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }], searchParamValue: [{
-                type: Output
-            }] } });
-
-class OutsideClickDirective {
-    elementRef;
-    clickOutSide = new EventEmitter();
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    /**
-     * @description Hosts listener
-     * @author Shiva Kant
-     * @param event
-     * @returns click
-     */
-    onClick(event) {
-        const targetElement = event.target;
-        // Guard clause: exit early if no target or not an element
-        if (!targetElement) {
-            return;
-        }
-        const clickInside = this.elementRef.nativeElement.contains(targetElement);
-        if (!clickInside) {
-            this.clickOutSide.emit(event);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: OutsideClickDirective, isStandalone: true, selector: "[catsOutsideClick]", outputs: { clickOutSide: "clickOutSide" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[catsOutsideClick]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutSide: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-;
-class AutoCompleteSingleSelectComponent {
-    autoSingleSelectConfig = new AutoCompleteSingleSelectConfig();
-    selectedItem;
-    optionsList = [];
-    parentNativeElement;
-    onItemSelection = new EventEmitter();
-    onScroll = new EventEmitter();
-    showDropdown = false;
-    inputValue = '';
-    selectedOption;
-    constructor() { }
-    ngOnInit() { }
-    /**
-     * @description Method to toggle dropdown list
-     * @author Shiva Kant
-     */
-    toggleDropdown() {
-        this.showDropdown = !this.showDropdown;
-        if (this.parentNativeElement) {
-            this.parentNativeElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center',
-            });
-            let parentDiv = document.getElementById(this.parentNativeElement);
-            setTimeout(() => {
-                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
-                let dropdonwList = document.getElementById('container_scroll');
-                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
-                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
-                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
-                }
-            }, 20);
-        }
-    }
-    /**
-     * @description method to update selected item
-     * @author Shiva Kant
-     * @param item this is selected item from list
-     * @param type type of list
-     * @returns none
-     */
-    updateSelectedItem(item, type) {
-        if (type == 'object') {
-            this.inputValue = item[this.autoSingleSelectConfig.textField];
-        }
-        else {
-            this.inputValue = item;
-        }
-        this.selectedOption = item;
-        this.showDropdown = false;
-        this.onItemSelection.emit(this.selectedOption);
-    }
-    /**
-     * @description this method is use to update input value
-     */
-    updateInputValue() {
-        let data = this.selectedOption;
-        if (!data ||
-            (typeof data == 'object'
-                ? data[this.autoSingleSelectConfig.textField] != this.inputValue
-                : data != this.inputValue)) {
-            data = this.inputValue;
-            if (this.isObject(this.optionsList?.[0])) {
-                data = {
-                    [this.autoSingleSelectConfig.idField]: null,
-                    [this.autoSingleSelectConfig.textField]: this.inputValue,
-                };
-            }
-        }
-        this.onItemSelection.emit(data);
-    }
-    /**
-     * @description method to update dropdown list state on input type
-     * @author Shiva Kant
-     */
-    updateDropdownStatus() {
-        this.showDropdown = !!this.inputValue;
-    }
-    /**
-     * @description method to check if the list is Array of string or object
-     * @author Shiva Kant
-     * @param data this is the any one one item of list
-     * @returns boolean
-     */
-    isObject(data) {
-        const type = typeof data;
-        return data && type != 'string';
-    }
-    /**
-     * @description This method is use to close dropdown on click outside
-     */
-    outsideClicked() {
-        if (this.showDropdown) {
-            if (this.autoSingleSelectConfig.customInput) {
-                this.updateInputValue();
-            }
-        }
-        this.showDropdown = false;
-    }
-    onClickEnter(control) {
-        if (this.autoSingleSelectConfig.customInput) {
-            this.updateInputValue();
-        }
-    }
-    /**
-     * @description method to load more list
-     * @author Shiva Kant
-     * @param event
-     */
-    onDivScroll(event) {
-        if (event.target.offsetHeight + event.target.scrollTop >=
-            event.target.scrollHeight - 1 &&
-            this.optionsList.length) {
-            this.onScroll.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, ngImport: i0, template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n  <div class=\"input_container\">\r\n    <div class=\"input_box\">\r\n      <input\r\n        class=\"textTruncate\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        (keyup.enter)=\"onClickEnter(inputValue)\"\r\n        (keyup)=\"updateDropdownStatus()\"\r\n        [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n      />\r\n    </div>\r\n    <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"up-arrow\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"down-arrow\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list_single_auto_select\">\r\n    <!-- if optionList is an array of object-->\r\n    @if (isObject(optionsList[0])) {\r\n    <ng-container>\r\n      <ul>\r\n        @for (item of optionsList; track $index) {\r\n        <ng-container>\r\n          @if\r\n          (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n          || inputValue == '') {\r\n          <li\r\n            (click)=\"updateSelectedItem(item, 'object')\"\r\n            [ngClass]=\"\r\n              autoSingleSelectConfig.disabledField &&\r\n              item[autoSingleSelectConfig.disabledField]\r\n                ? 'disabled_option'\r\n                : ''\r\n            \"\r\n          >\r\n            <span class=\"textTruncate\">\r\n              {{ item[autoSingleSelectConfig.textField] }}\r\n            </span>\r\n          </li>\r\n          }\r\n        </ng-container>\r\n        }\r\n      </ul>\r\n    </ng-container>\r\n    }\r\n\r\n    <!-- if optionList is an array of string-->\r\n    @if (!isObject(optionsList[0])) {\r\n    <ng-container>\r\n      <ul>\r\n        @for (item of optionsList; track $index) {\r\n        <ng-container>\r\n          @if (item.includes(inputValue) || inputValue == '') {\r\n          <li\r\n            [ngClass]=\"\r\n              autoSingleSelectConfig.disabledField &&\r\n              item[autoSingleSelectConfig.disabledField]\r\n                ? 'disabled_option'\r\n                : ''\r\n            \"\r\n            (click)=\"updateSelectedItem(item, 'string')\"\r\n          >\r\n            {{ item }}\r\n          </li>\r\n\r\n          } </ng-container\r\n        >}\r\n      </ul></ng-container\r\n    >}\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-auto-complete-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n  <div class=\"input_container\">\r\n    <div class=\"input_box\">\r\n      <input\r\n        class=\"textTruncate\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        (keyup.enter)=\"onClickEnter(inputValue)\"\r\n        (keyup)=\"updateDropdownStatus()\"\r\n        [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n      />\r\n    </div>\r\n    <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        alt=\"up-arrow\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        alt=\"down-arrow\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list_single_auto_select\">\r\n    <!-- if optionList is an array of object-->\r\n    @if (isObject(optionsList[0])) {\r\n    <ng-container>\r\n      <ul>\r\n        @for (item of optionsList; track $index) {\r\n        <ng-container>\r\n          @if\r\n          (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n          || inputValue == '') {\r\n          <li\r\n            (click)=\"updateSelectedItem(item, 'object')\"\r\n            [ngClass]=\"\r\n              autoSingleSelectConfig.disabledField &&\r\n              item[autoSingleSelectConfig.disabledField]\r\n                ? 'disabled_option'\r\n                : ''\r\n            \"\r\n          >\r\n            <span class=\"textTruncate\">\r\n              {{ item[autoSingleSelectConfig.textField] }}\r\n            </span>\r\n          </li>\r\n          }\r\n        </ng-container>\r\n        }\r\n      </ul>\r\n    </ng-container>\r\n    }\r\n\r\n    <!-- if optionList is an array of string-->\r\n    @if (!isObject(optionsList[0])) {\r\n    <ng-container>\r\n      <ul>\r\n        @for (item of optionsList; track $index) {\r\n        <ng-container>\r\n          @if (item.includes(inputValue) || inputValue == '') {\r\n          <li\r\n            [ngClass]=\"\r\n              autoSingleSelectConfig.disabledField &&\r\n              item[autoSingleSelectConfig.disabledField]\r\n                ? 'disabled_option'\r\n                : ''\r\n            \"\r\n            (click)=\"updateSelectedItem(item, 'string')\"\r\n          >\r\n            {{ item }}\r\n          </li>\r\n\r\n          } </ng-container\r\n        >}\r\n      </ul></ng-container\r\n    >}\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { autoSingleSelectConfig: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], optionsList: [{
-                type: Input
-            }], parentNativeElement: [{
-                type: Input
-            }], onItemSelection: [{
-                type: Output
-            }], onScroll: [{
-                type: Output
-            }] } });
-
-class AutoCompleteMultiSelectComponent {
-    autoCompleteMultiSelectConfig;
-    selectedItem;
-    optionsList = [];
-    parentNativeElement;
-    onItemSelection = new EventEmitter();
-    onScroll = new EventEmitter();
-    showDropdown = false;
-    inputValue = '';
-    selectedOptions = [];
-    isSelectedAll = false;
-    constructor() { }
-    ngOnInit() { }
-    ngOnChanges() {
-        this.applyDefaultConfig();
-    }
-    applyDefaultConfig() {
-        const defaults = new AutoCompleteMultiSelectConfig();
-        this.autoCompleteMultiSelectConfig = {
-            ...defaults,
-            ...this.autoCompleteMultiSelectConfig,
-        };
-    }
-    /**
-     * @description Method to toggle dropdown list
-     * @author Shiva Kant
-     */
-    toggleDropdown() {
-        this.showDropdown = !this.showDropdown;
-        if (this.parentNativeElement) {
-            this.parentNativeElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center',
-            });
-            let parentDiv = document.getElementById(this.parentNativeElement);
-            setTimeout(() => {
-                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
-                let dropdonwList = document.getElementById('container_scroll');
-                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
-                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
-                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
-                }
-            }, 20);
-        }
-    }
-    /**
-     * @description method to update selected item
-     * @author Shiva Kant
-     * @param item this is selected item from list
-     * @param type type of list
-     * @returns none
-     */
-    updateSelectedItem(item, type) {
-        if (type === 'object') {
-            // Toggle the option's isSelected
-            item.isSelected = !item.isSelected;
-            if (item.isSelected) {
-                // add to selectedOptions if not already present
-                const exists = this.selectedOptions.some((opt) => this.isObject(opt) &&
-                    opt[this.autoCompleteMultiSelectConfig.textField] ===
-                        item[this.autoCompleteMultiSelectConfig.textField]);
-                if (!exists)
-                    this.selectedOptions.push(item);
-            }
-            else {
-                // remove from selectedOptions
-                this.selectedOptions = this.selectedOptions.filter((opt) => !(this.isObject(opt) &&
-                    opt[this.autoCompleteMultiSelectConfig.textField] ===
-                        item[this.autoCompleteMultiSelectConfig.textField]));
-            }
-        }
-        else {
-            // string type
-            const existsIndex = this.selectedOptions.findIndex((opt) => opt === item);
-            if (existsIndex > -1) {
-                // remove
-                this.selectedOptions.splice(existsIndex, 1);
-            }
-            else {
-                // add
-                this.selectedOptions.push(item);
-            }
-            // If optionsList contains this string, also toggle its isSelected there
-            const idxInOptions = this.optionsList.findIndex((o) => typeof o === 'string' && o === item);
-            if (idxInOptions > -1) {
-                // toggle corresponding option's isSelected
-                const opt = this.optionsList[idxInOptions];
-                opt.isSelected = !opt.isSelected;
-            }
-        }
-        // keep select all state consistent
-        this.updateSelectAllState();
-        this.onItemSelection.emit(this.selectedOptions);
-    }
-    /**
-     * @description method to checkUncheckAll
-     * @author Shiva Kant
-     */
-    checkUncheckAll(event) {
-        if (event)
-            event.stopPropagation();
-        this.isSelectedAll = !this.isSelectedAll;
-        this.optionsList.forEach((item) => {
-            if (!this.autoCompleteMultiSelectConfig.disabledField ||
-                !item[this.autoCompleteMultiSelectConfig.disabledField]) {
-                item.isSelected = this.isSelectedAll;
-            }
-        });
-        // Keep custom values intact
-        const customChips = this.selectedOptions.filter((opt) => this.isObject(opt)
-            ? !this.optionsList.some((o) => o[this.autoCompleteMultiSelectConfig.textField] ===
-                opt[this.autoCompleteMultiSelectConfig.textField])
-            : !this.optionsList.includes(opt));
-        const selectedOptionItems = this.optionsList.filter((opt) => opt.isSelected);
-        this.selectedOptions = [...customChips, ...selectedOptionItems];
-        this.onItemSelection.emit(this.selectedOptions);
-    }
-    /**
-     * @description method to removeChip
-     * @author Shiva Kant
-     */
-    removeChip(item) {
-        // Remove from selectedOptions
-        this.selectedOptions = this.selectedOptions.filter((opt) => this.isObject(opt)
-            ? opt[this.autoCompleteMultiSelectConfig.textField] !==
-                (this.isObject(item)
-                    ? item[this.autoCompleteMultiSelectConfig.textField]
-                    : item)
-            : opt !== item);
-        // If item corresponds to an optionsList entry, unselect it there too
-        if (this.isObject(item)) {
-            const idx = this.optionsList.findIndex((o) => this.isObject(o) &&
-                o[this.autoCompleteMultiSelectConfig.textField] ===
-                    item[this.autoCompleteMultiSelectConfig.textField]);
-            if (idx > -1) {
-                (this.optionsList[idx]).isSelected = false;
-            }
-        }
-        else {
-            // string case
-            const idx = this.optionsList.findIndex((o) => o === item);
-            if (idx > -1) {
-                (this.optionsList[idx]).isSelected = false;
-            }
-        }
-        // update select all state & emit
-        this.updateSelectAllState();
-        this.onItemSelection.emit(this.selectedOptions);
-    }
-    /**
-     * @description method to update dropdown list state on input type
-     * @author Shiva Kant
-     */
-    updateDropdownStatus() {
-        this.showDropdown = true;
-    }
-    /**
-     * @description method to check if the list is Array of string or object
-     * @author Shiva Kant
-     * @param data this is the any one one item of list
-     * @returns boolean
-     */
-    isObject(data) {
-        const type = typeof data;
-        return data && type != 'string';
-    }
-    /**
-     * @description This method is use to close dropdown on onClickEnter
-     * @author Shiva Kant
-     */
-    onClickEnter(control) {
-        if (!this.inputValue.trim())
-            return;
-        // pattern check
-        if (this.autoCompleteMultiSelectConfig.pattern) {
-            const regex = new RegExp(this.autoCompleteMultiSelectConfig.pattern);
-            if (!regex.test(this.inputValue)) {
-                this.inputValue = '';
-                return;
-            }
-        }
-        const val = this.inputValue.trim();
-        const valLower = val.toLowerCase();
-        // Avoid duplicate
-        const exists = this.selectedOptions.some((opt) => this.isObject(opt)
-            ? opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
-                valLower
-            : opt.toLowerCase() === valLower);
-        if (exists) {
-            this.inputValue = '';
-            return;
-        }
-        // Try find matched item in optionsList
-        const matchedItem = this.isObject(this.optionsList?.[0])
-            ? this.optionsList.find((opt) => opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
-                valLower)
-            : this.optionsList.find((opt) => opt.toLowerCase() === valLower);
-        if (matchedItem) {
-            // If matched, ensure option is marked selected and present in selectedOptions
-            matchedItem.isSelected = true;
-            const already = this.selectedOptions.some((opt) => this.isObject(opt)
-                ? opt[this.autoCompleteMultiSelectConfig.textField] ===
-                    matchedItem[this.autoCompleteMultiSelectConfig.textField]
-                : opt === matchedItem);
-            if (!already)
-                this.selectedOptions.push(matchedItem);
-        }
-        else if (this.autoCompleteMultiSelectConfig.customInput) {
-            // create custom item and mark it selected
-            let newItem = val;
-            if (this.isObject(this.optionsList?.[0])) {
-                newItem = {
-                    [this.autoCompleteMultiSelectConfig.idField]: null,
-                    [this.autoCompleteMultiSelectConfig.textField]: val,
-                    isSelected: true, // mark selected for consistency
-                    __isCustom: true, // optional flag to identify custom items
-                };
-            }
-            this.selectedOptions.push(newItem);
-        }
-        // reset input but keep dropdown open (as you wanted)
-        this.inputValue = '';
-        // update select all state and emit
-        this.updateSelectAllState();
-        this.onItemSelection.emit(this.selectedOptions);
-    }
-    outsideClicked() {
-        this.showDropdown = false;
-    }
-    /**
-     * @description method to load more list
-     * @author Shiva Kant
-     * @param event
-     */
-    onDivScroll(event) {
-        if (event.target.offsetHeight + event.target.scrollTop >=
-            event.target.scrollHeight - 1 &&
-            this.optionsList.length) {
-            this.onScroll.emit();
-        }
-    }
-    updateSelectAllState() {
-        // only consider non-disabled items for select-all state
-        const selectable = this.optionsList.filter((opt) => !(this.autoCompleteMultiSelectConfig.disabledField &&
-            opt[this.autoCompleteMultiSelectConfig.disabledField]));
-        this.isSelectedAll =
-            selectable.length > 0 && selectable.every((opt) => !!opt.isSelected);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-multi-select", inputs: { autoCompleteMultiSelectConfig: "autoCompleteMultiSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\">\r\n  <div\r\n    class=\"input_container\"\r\n    catsOutsideClick\r\n    (clickOutSide)=\"outsideClicked()\"\r\n  >\r\n    <div class=\"chips_wrapper\">\r\n      <!-- Chips -->\r\n      @for (item of selectedOptions; track $index) { @if ($index <\r\n      autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n        <span class=\"textTruncate\">\r\n          {{\r\n            isObject(item)\r\n              ? item[autoCompleteMultiSelectConfig.textField]\r\n              : item\r\n          }}\r\n        </span>\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n        />\r\n      </div>\r\n      } }\r\n      <!-- +N counter -->\r\n      @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"view_more\">\r\n        +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n      </div>\r\n      }\r\n      <!-- Input Box (always available) -->\r\n      <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"inputValue\"\r\n          (keyup.enter)=\"onClickEnter()\"\r\n          (keyup)=\"updateDropdownStatus()\"\r\n          [placeholder]=\"\r\n            selectedOptions.length === 0\r\n              ? autoCompleteMultiSelectConfig.placeholder\r\n              : ''\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dropdown toggle -->\r\n    <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown list -->\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n    <ul>\r\n      <!-- Select All -->\r\n      @if (autoCompleteMultiSelectConfig.selectAll) {\r\n      <li\r\n        class=\"checkbox_container select_all_item\"\r\n        (click)=\"checkUncheckAll($event)\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"isSelectedAll\"\r\n          (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n        />\r\n        <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n      </li>\r\n      }\r\n\r\n      <!-- Object Options -->\r\n      @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n      .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n      <li\r\n        class=\"checkbox_container\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            autoCompleteMultiSelectConfig.disabledField &&\r\n            item[autoCompleteMultiSelectConfig.disabledField]\r\n        }\"\r\n        (click)=\"updateSelectedItem(item, 'object')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"item.isSelected\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n        />\r\n\r\n        <span class=\"textTruncate\">{{\r\n          item[autoCompleteMultiSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } } }\r\n\r\n      <!-- String Options -->\r\n      @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n      == \"\") {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedItem(item, 'string')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"selectedOptions.includes(item)\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n        />\r\n        <span class=\"textTruncate\">{{ item }}</span>\r\n      </li>\r\n      } } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-auto-complete-multi-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\">\r\n  <div\r\n    class=\"input_container\"\r\n    catsOutsideClick\r\n    (clickOutSide)=\"outsideClicked()\"\r\n  >\r\n    <div class=\"chips_wrapper\">\r\n      <!-- Chips -->\r\n      @for (item of selectedOptions; track $index) { @if ($index <\r\n      autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n        <span class=\"textTruncate\">\r\n          {{\r\n            isObject(item)\r\n              ? item[autoCompleteMultiSelectConfig.textField]\r\n              : item\r\n          }}\r\n        </span>\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n        />\r\n      </div>\r\n      } }\r\n      <!-- +N counter -->\r\n      @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"view_more\">\r\n        +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n      </div>\r\n      }\r\n      <!-- Input Box (always available) -->\r\n      <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"inputValue\"\r\n          (keyup.enter)=\"onClickEnter()\"\r\n          (keyup)=\"updateDropdownStatus()\"\r\n          [placeholder]=\"\r\n            selectedOptions.length === 0\r\n              ? autoCompleteMultiSelectConfig.placeholder\r\n              : ''\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dropdown toggle -->\r\n    <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown list -->\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n    <ul>\r\n      <!-- Select All -->\r\n      @if (autoCompleteMultiSelectConfig.selectAll) {\r\n      <li\r\n        class=\"checkbox_container select_all_item\"\r\n        (click)=\"checkUncheckAll($event)\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"isSelectedAll\"\r\n          (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n        />\r\n        <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n      </li>\r\n      }\r\n\r\n      <!-- Object Options -->\r\n      @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n      .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n      <li\r\n        class=\"checkbox_container\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            autoCompleteMultiSelectConfig.disabledField &&\r\n            item[autoCompleteMultiSelectConfig.disabledField]\r\n        }\"\r\n        (click)=\"updateSelectedItem(item, 'object')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"item.isSelected\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n        />\r\n\r\n        <span class=\"textTruncate\">{{\r\n          item[autoCompleteMultiSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } } }\r\n\r\n      <!-- String Options -->\r\n      @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n      == \"\") {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedItem(item, 'string')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"selectedOptions.includes(item)\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n        />\r\n        <span class=\"textTruncate\">{{ item }}</span>\r\n      </li>\r\n      } } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { autoCompleteMultiSelectConfig: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], optionsList: [{
-                type: Input
-            }], parentNativeElement: [{
-                type: Input
-            }], onItemSelection: [{
-                type: Output
-            }], onScroll: [{
-                type: Output
-            }] } });
-
-class ToogleButtonComponent {
-    toggleConfig;
-    onToggled = new EventEmitter();
-    onChange = () => { };
-    onTouched = () => { };
-    toggle() {
-        if (!this.toggleConfig.disabled) {
-            this.toggleConfig.checked = !this.toggleConfig.checked;
-            this.onToggled.emit(this.toggleConfig.checked);
-        }
-    }
-    // ControlValueAccessor methods
-    writeValue(value) {
-        this.toggleConfig.checked = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.toggleConfig.disabled = isDisabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ToogleButtonComponent, isStandalone: true, selector: "cats-ui-toogle-button", inputs: { toggleConfig: "toggleConfig" }, outputs: { onToggled: "onToggled" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ToogleButtonComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"toggle_button\">\r\n  <label class=\"switch\">\r\n    <input \r\n      type=\"checkbox\" \r\n      [checked]=\"toggleConfig.checked\" \r\n      [disabled]=\"toggleConfig.disabled\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span class=\"slider round\"></span>\r\n      <span class=\"toggle-status\">\r\n    {{ toggleConfig.checked ? 'ON' : 'OFF' }}\r\n  </span>\r\n  </label>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.toggle_button .switch{position:relative;display:flex;width:calc(3rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.toggle_button .switch input{opacity:0;width:0;height:0}.toggle_button .switch input:focus{box-shadow:unset}.toggle_button .switch input+.slider{box-shadow:0 0 calc(.0833333333rem / var(--scale)) var(--box-shadow)}.toggle_button .switch input:checked+.slider{background-color:var(--blue-600)}.toggle_button .switch input:checked+.slider:before{-webkit-transform:translateX(calc(2.1666666667rem / var(--scale)));-ms-transform:translateX(calc(2.1666666667rem / var(--scale)));transform:translate(calc(2.1666666667rem / var(--scale)));left:calc(-.75rem / var(--scale));bottom:calc(.1666666667rem / var(--scale))}.toggle_button .switch .slider{position:absolute;background-color:var(--neutral-100);cursor:pointer;inset:0;transition:.4s}.toggle_button .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));content:\"\";background-color:var(--white);transition:.4s;position:absolute;left:calc(.25rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--box-shadow)}.toggle_button .switch .slider.round{border-radius:calc(1rem / var(--scale))}.toggle_button .switch .slider.round:before{border-radius:50%}.toggle_button .switch .toggle-status{color:var(--white);z-index:9;padding-left:calc(.1666666667rem / var(--scale));font-size:var(--fs-8);line-height:calc(2rem / var(--scale));font-weight:400}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-toogle-button', imports: [], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ToogleButtonComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"toggle_button\">\r\n  <label class=\"switch\">\r\n    <input \r\n      type=\"checkbox\" \r\n      [checked]=\"toggleConfig.checked\" \r\n      [disabled]=\"toggleConfig.disabled\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span class=\"slider round\"></span>\r\n      <span class=\"toggle-status\">\r\n    {{ toggleConfig.checked ? 'ON' : 'OFF' }}\r\n  </span>\r\n  </label>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.toggle_button .switch{position:relative;display:flex;width:calc(3rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.toggle_button .switch input{opacity:0;width:0;height:0}.toggle_button .switch input:focus{box-shadow:unset}.toggle_button .switch input+.slider{box-shadow:0 0 calc(.0833333333rem / var(--scale)) var(--box-shadow)}.toggle_button .switch input:checked+.slider{background-color:var(--blue-600)}.toggle_button .switch input:checked+.slider:before{-webkit-transform:translateX(calc(2.1666666667rem / var(--scale)));-ms-transform:translateX(calc(2.1666666667rem / var(--scale)));transform:translate(calc(2.1666666667rem / var(--scale)));left:calc(-.75rem / var(--scale));bottom:calc(.1666666667rem / var(--scale))}.toggle_button .switch .slider{position:absolute;background-color:var(--neutral-100);cursor:pointer;inset:0;transition:.4s}.toggle_button .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));content:\"\";background-color:var(--white);transition:.4s;position:absolute;left:calc(.25rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--box-shadow)}.toggle_button .switch .slider.round{border-radius:calc(1rem / var(--scale))}.toggle_button .switch .slider.round:before{border-radius:50%}.toggle_button .switch .toggle-status{color:var(--white);z-index:9;padding-left:calc(.1666666667rem / var(--scale));font-size:var(--fs-8);line-height:calc(2rem / var(--scale));font-weight:400}\n"] }]
-        }], propDecorators: { toggleConfig: [{
-                type: Input
-            }], onToggled: [{
-                type: Output
-            }] } });
-
-class CheckboxButtonComponent {
-    checkBoxConfig;
-    onCheckBoxSelection = new EventEmitter();
-    optionList = [];
-    selectedOptions = [];
-    onChange = () => { };
-    onTouched = () => { };
-    get idField() {
-        return this.checkBoxConfig?.idField || 'id';
-    }
-    get textField() {
-        return this.checkBoxConfig?.textField || 'name';
-    }
-    ngOnChanges(changes) {
-        if (changes['selectedOptions'] && this.selectedOptions?.length) {
-            this.applySelectedOptions();
-        }
-    }
-    /**
-     * @description normalizeSelectedValue the value according t
-     * @param item
-     * @returns
-     */
-    normalizeSelectedValue(item) {
-        if (item == null)
-            return '';
-        if (typeof item === 'string')
-            return item; // case 1: string of id or name
-        if (item.id)
-            return item.id; // case 2: object with id
-        if (item.name)
-            return item.name; // case 3: object with name
-        return ''; // fallback
-    }
-    /**
-     * @description Method is to Apply selectedOptions on input change
-     * @author Shiva Kant
-     */
-    applySelectedOptions() {
-        const normalized = this.selectedOptions.map((s) => this.normalizeSelectedValue(s));
-        this.optionList = this.optionList.map((task) => {
-            const taskId = task.id;
-            const taskName = task.name;
-            const isParentSelected = normalized.includes(taskId) || normalized.includes(taskName);
-            const updatedSubtasks = (task.subtasks ?? []).map((sub) => {
-                const subId = sub.id;
-                const subName = sub.name;
-                return {
-                    ...sub,
-                    checked: normalized.includes(subId) || normalized.includes(subName),
-                };
-            });
-            return {
-                ...task,
-                checked: isParentSelected || updatedSubtasks.every((s) => s.checked),
-                subtasks: updatedSubtasks,
-            };
-        });
-    }
-    /**
-     * @description Method is to Checkbox change handler
-     * @author Shiva Kant
-     * @param event
-     * @param parentIndex
-     * @param subIndex
-     */
-    onCheckboxChange(event, parentIndex, subIndex) {
-        const checked = event.target.checked;
-        this.optionList = this.optionList.map((task, i) => {
-            const safeTask = {
-                ...task,
-                checked: task.checked ?? false,
-                subtasks: task.subtasks ?? [],
-            };
-            if (i === parentIndex) {
-                if (subIndex === undefined) {
-                    // Parent checkbox toggled
-                    safeTask.checked = checked;
-                    safeTask.subtasks = safeTask.subtasks.map((sub) => ({
-                        ...sub,
-                        checked,
-                    }));
-                }
-                else if (safeTask.subtasks[subIndex]) {
-                    // Subtask toggled
-                    safeTask.subtasks[subIndex].checked = checked;
-                    // Parent checked only if all subtasks are checked
-                    safeTask.checked = safeTask.subtasks.every((sub) => sub.checked);
-                }
-            }
-            return safeTask;
-        });
-        const checkedTasks = this.optionList
-            .filter((task) => (task.checked ?? false) ||
-            task.subtasks?.some((s) => s.checked ?? false))
-            .map((task) => ({
-            ...task,
-            subtasks: task.subtasks?.filter((s) => s.checked ?? false) || [],
-        }));
-        const selectedObjects = checkedTasks.map((task) => ({
-            ...task,
-            subtasks: task.subtasks.filter((s) => s.checked),
-        }));
-        this.onCheckBoxSelection.emit(selectedObjects);
-        this.onChange(this.optionList);
-        this.onTouched();
-    }
-    /**
-     * @description Indeterminate state for parent on option checked
-     * @param task
-     * @returns
-     */
-    partiallyComplete(task) {
-        if (!task?.subtasks?.length)
-            return false;
-        const done = task.subtasks.filter((t) => t.checked).length;
-        return done > 0 && done < task.subtasks.length;
-    }
-    // ControlValueAccessor methods
-    writeValue(value) {
-        if (value) {
-            this.optionList = value.map((task) => ({
-                ...task,
-                subtasks: task.subtasks ? [...task.subtasks] : [],
-            }));
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.optionList.forEach((task) => {
-                task.checked = false;
-                task.subtasks?.forEach((sub) => (sub.checked = false));
-            });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxButtonComponent, isStandalone: true, selector: "cats-ui-checkbox-button", inputs: { checkBoxConfig: "checkBoxConfig", optionList: "optionList", selectedOptions: "selectedOptions" }, outputs: { onCheckBoxSelection: "onCheckBoxSelection" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxButtonComponent),
-                multi: true,
-            },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"parent_container\">\r\n  <ul>\r\n    @for (task of optionList; let parentIndex = $index; track $index) {\r\n    <li>\r\n      <!-- Parent Checkbox -->\r\n      <label class=\"checkbox_container\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [name]=\"checkBoxConfig.name\"\r\n          [checked]=\"task.checked\"\r\n          [disabled]=\"\r\n            checkBoxConfig.disabledField\r\n              ? task[checkBoxConfig.disabledField]\r\n              : false\r\n          \"\r\n          [indeterminate]=\"partiallyComplete(task)\"\r\n          (change)=\"onCheckboxChange($event, parentIndex)\"\r\n        />\r\n        <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n      </label>\r\n\r\n      <!-- Subtasks -->\r\n      @if (task.subtasks && task.subtasks.length > 0) {\r\n      <ul class=\"sub\">\r\n        @for (sub of task.subtasks; let idx = $index; track $index) {\r\n        <li>\r\n          <label class=\"checkbox_container\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"sub.checked\"\r\n              (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n            />\r\n            <!-- <span class=\"checkmark\"></span> -->\r\n            <span class=\"label-text\">{{ sub[textField] }}</span>\r\n          </label>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A  <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-checkbox-button', imports: [], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxButtonComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"parent_container\">\r\n  <ul>\r\n    @for (task of optionList; let parentIndex = $index; track $index) {\r\n    <li>\r\n      <!-- Parent Checkbox -->\r\n      <label class=\"checkbox_container\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [name]=\"checkBoxConfig.name\"\r\n          [checked]=\"task.checked\"\r\n          [disabled]=\"\r\n            checkBoxConfig.disabledField\r\n              ? task[checkBoxConfig.disabledField]\r\n              : false\r\n          \"\r\n          [indeterminate]=\"partiallyComplete(task)\"\r\n          (change)=\"onCheckboxChange($event, parentIndex)\"\r\n        />\r\n        <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n      </label>\r\n\r\n      <!-- Subtasks -->\r\n      @if (task.subtasks && task.subtasks.length > 0) {\r\n      <ul class=\"sub\">\r\n        @for (sub of task.subtasks; let idx = $index; track $index) {\r\n        <li>\r\n          <label class=\"checkbox_container\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"sub.checked\"\r\n              (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n            />\r\n            <!-- <span class=\"checkmark\"></span> -->\r\n            <span class=\"label-text\">{{ sub[textField] }}</span>\r\n          </label>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A  <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] }]
-        }], propDecorators: { checkBoxConfig: [{
-                type: Input
-            }], onCheckBoxSelection: [{
-                type: Output
-            }], optionList: [{
-                type: Input
-            }], selectedOptions: [{
-                type: Input
-            }] } });
-
-class RadioButtonComponent {
-    config;
-    optionList = [];
-    selectionChange = new EventEmitter();
-    //  selectedRadio pass id in number or name in string or full object
-    selectedRadio;
-    value = null;
-    isDisabled = false;
-    onChange = (_) => { };
-    onTouched = () => { };
-    ngOnChanges(changes) {
-        if (changes['selectedRadio'] && this.optionList?.length) {
-            if (!this.selectedRadio)
-                return;
-            const selected = this.selectedRadio;
-            const match = this.optionList.find((opt) => {
-                const optValue = this.extractValue(opt);
-                const optLabel = this.extractLabel(opt);
-                if (typeof selected === 'string' || typeof selected === 'number') {
-                    // Match primitive against value or label
-                    return selected === optValue || selected === optLabel;
-                }
-                else if (typeof selected === 'object') {
-                    // Match object against option's value or label
-                    const selValue = this.extractValue(selected);
-                    const selLabel = this.extractLabel(selected);
-                    return selValue === optValue || selLabel === optLabel;
-                }
-                return false;
-            });
-            if (match) {
-                this.value = this.extractValue(match);
-                this.onChange(this.value);
-            }
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-    }
-    /**
-     * @description method to handle change of toggle button
-     * @author Shiva Kant
-     * @param option
-     */
-    handleChange(option) {
-        this.value = this.extractValue(option);
-        this.onChange(this.value);
-        this.onTouched();
-        this.selectionChange.emit(option);
-    }
-    /**
-     * @description method to extractValue
-     * @author Shiva Kant
-     * @param option
-     * @returns
-     */
-    extractValue(option) {
-        if (typeof option === 'string' || typeof option === 'number') {
-            return option;
-        }
-        const key = this.config.valueField ?? 'id'; // ALWAYS a string
-        return option[key];
-    }
-    extractLabel(option) {
-        if (typeof option === 'string')
-            return option;
-        const key = this.config.textField ?? 'label';
-        return option[key];
-    }
-    /**
-     *  * @description method to normalizeValue
-     * @author Shiva Kant
-     * @param value
-     * @returns
-     */
-    normalizeValue(value) {
-        if (value == null)
-            return null;
-        if (typeof value === 'string' || typeof value === 'number') {
-            return value;
-        }
-        // object case → return id or valueField
-        const key = this.config.valueField ?? 'id';
-        return value[key];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadioButtonComponent, isStandalone: true, selector: "cats-ui-radio-button", inputs: { config: "config", optionList: "optionList", selectedRadio: "selectedRadio" }, outputs: { selectionChange: "selectionChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RadioButtonComponent),
-                multi: true,
-            },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n  @if (config.label) {\r\n  <div class=\"group_label\">{{ config.label }}</div>\r\n  }\r\n\r\n  <div class=\"radio_option_container\">\r\n    @for (option of optionList; track $index) {\r\n    <div class=\"radio_option\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"config.name\"\r\n        [id]=\"extractValue(option)\"\r\n        [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n        [value]=\"extractValue(option)\"\r\n        [(ngModel)]=\"value\"\r\n        (change)=\"handleChange(option)\"\r\n      />\r\n      <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-radio-button', imports: [CommonModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RadioButtonComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n  @if (config.label) {\r\n  <div class=\"group_label\">{{ config.label }}</div>\r\n  }\r\n\r\n  <div class=\"radio_option_container\">\r\n    @for (option of optionList; track $index) {\r\n    <div class=\"radio_option\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"config.name\"\r\n        [id]=\"extractValue(option)\"\r\n        [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n        [value]=\"extractValue(option)\"\r\n        [(ngModel)]=\"value\"\r\n        (change)=\"handleChange(option)\"\r\n      />\r\n      <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], optionList: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], selectedRadio: [{
-                type: Input
-            }] } });
-
-class DatePickerComponent {
-    minDate;
-    maxDate;
-    date = '';
-    isOpen = false;
-    selectedDay = 0;
-    currentDate = new Date();
-    daysInMonth = [];
-    calendarView = 'defaultView';
-    showYearSelector = false;
-    yearRange = [];
-    monthRange = {
-        '0': 'JAN',
-        '01': 'FEB',
-        '02': 'MAR',
-        '03': 'APR',
-        '04': 'MAY',
-        '05': 'JUN',
-        '06': 'JUL',
-        '07': 'AUG',
-        '08': 'SEP',
-        '09': 'OCT',
-        '10': 'NOV',
-        '11': 'DEC',
-    };
-    // constructor(@Optional() @Self() private ngControl: NgControl) {
-    //   if (this.ngControl != null) {
-    //     this.ngControl.valueAccessor = this;
-    //   }
-    // }
-    onChange = (date) => { };
-    onTouched = () => { };
-    control;
-    disableControl = false;
-    writeValue(value) {
-        this.date = value || '';
-        if (this.date) {
-            this.currentDate = new Date(this.date);
-            this.selectedDay = this.currentDate.getDate();
-        }
-        this.generateCalendar();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        // Optional: Handle disabled state
-        this.disableControl = isDisabled;
-    }
-    validate(control) {
-        this.control = control;
-        const selected = this.date ? new Date(this.date) : null;
-        // Check required manually
-        const isRequired = control.validator && control.validator(control)?.['required'];
-        if ((isRequired || control.hasError('required')) &&
-            (!this.date || !this.selectedDay)) {
-            return { required: true };
-        }
-        else if (this.minDate && selected && selected < new Date(this.minDate)) {
-            return { minDate: true };
-        }
-        else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
-            return { maxDate: true };
-        }
-        return null;
-    }
-    // validate(control: AbstractControl): ValidationErrors | null {
-    //   this.control = control;
-    //   const selected = this.date ? new Date(this.date) : null;
-    //   const hasRequired = control?.validator?.['required'];
-    //   if (hasRequired && (!this.date || !this.selectedDay)) {
-    //     return { required: true };
-    //   } else if (this.minDate && selected && selected < new Date(this.minDate)) {
-    //     return { minDate: true };
-    //   } else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
-    //     return { maxDate: true };
-    //   }
-    //   return null;
-    // }
-    ngOnInit() {
-        this.generateYearRange();
-    }
-    toggleCalendar() {
-        this.isOpen = !this.isOpen;
-        if (this.date && this.isOpen) {
-            this.currentDate = new Date(this.date);
-            this.selectedDay = this.currentDate.getDate();
-        }
-        this.calendarView = 'defaultView';
-        this.generateCalendar();
-        this.onTouched();
-        if (this.isOpen) {
-            let ele = document.getElementsByClassName('calendar-footer');
-            setTimeout(() => {
-                ele[0]?.scrollIntoView();
-            });
-        }
-    }
-    selectDate(day) {
-        this.selectedDay = day;
-    }
-    setSelectedDate() {
-        this.selectedDay = this.selectedDay || 1;
-        const month = this.currentDate.getMonth() + 1;
-        const year = this.currentDate.getFullYear();
-        this.date = `${month.toString().padStart(2, '0')}/${this.selectedDay
-            .toString()
-            .padStart(2, '0')}/${year}`;
-        this.onChange(this.date);
-        this.onTouched();
-    }
-    closeCalendar() {
-        this.isOpen = false;
-        this.calendarView = 'defaultView';
-    }
-    previousMonth() {
-        this.selectedDay = 0;
-        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
-        this.generateCalendar();
-    }
-    nextMonth() {
-        this.selectedDay = 0;
-        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
-        this.generateCalendar();
-    }
-    // @HostListener('window:keydown.arrowleft', ['$event'])
-    // handleLeftArrow(event: KeyboardEvent): void {
-    //   if (this.isOpen) {
-    //     this.previousMonth();
-    //   }
-    // }
-    // @HostListener('window:keydown.arrowright', ['$event'])
-    // handleRightArrow(event: KeyboardEvent): void {
-    //   if (this.isOpen) {
-    //     this.nextMonth();
-    //   }
-    // }
-    handleLeftArrow(event) {
-        const keyboardEvent = event;
-        if (this.isOpen) {
-            this.previousMonth();
-        }
-    }
-    handleRightArrow(event) {
-        const keyboardEvent = event;
-        if (this.isOpen) {
-            this.nextMonth();
-        }
-    }
-    // generateCalendar(): void {
-    //   const year = this.currentDate.getFullYear();
-    //   const month = this.currentDate.getMonth();
-    //   const days = new Date(year, month + 1, 0).getDate();
-    //   this.daysInMonth = Array.from({ length: days }, (_, i) => i + 1);
-    // }
-    generateCalendar() {
-        const year = this.currentDate.getFullYear();
-        const month = this.currentDate.getMonth();
-        const firstDayOfMonth = new Date(year, month, 1);
-        const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
-        const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
-        const daysInPreviousMonth = new Date(year, month, 0).getDate();
-        const totalCells = 42; // 6 rows of 7 days
-        const calendarDays = [];
-        // Fill previous month days
-        for (let i = firstWeekDay - 1; i >= 0; i--) {
-            const day = daysInPreviousMonth - i;
-            const date = new Date(year, month - 1, day);
-            calendarDays.push({ day, date, isCurrentMonth: false });
-        }
-        // Fill current month days
-        for (let day = 1; day <= daysInCurrentMonth; day++) {
-            const date = new Date(year, month, day);
-            calendarDays.push({ day, date, isCurrentMonth: true });
-        }
-        // Fill next month days
-        const remaining = totalCells - calendarDays.length;
-        for (let day = 1; day <= remaining; day++) {
-            const date = new Date(year, month + 1, day);
-            calendarDays.push({ day, date, isCurrentMonth: false });
-        }
-        this.daysInMonth = calendarDays;
-    }
-    getMonthYear() {
-        return {
-            month: this.currentDate.toLocaleString('default', {
-                month: 'long',
-            }),
-            year: this.currentDate.toLocaleString('default', {
-                year: 'numeric',
-            }),
-        };
-    }
-    previousYearRange() {
-        this.yearRange = this.yearRange.map((year) => year - 20);
-    }
-    nextYearRange() {
-        this.yearRange = this.yearRange.map((year) => year + 20);
-    }
-    toggleYearSelector() {
-        this.showYearSelector = !this.showYearSelector;
-        this.generateYearRange();
-    }
-    selectYear(year) {
-        this.currentDate.setFullYear(year);
-        this.showYearSelector = false;
-        this.calendarView = 'defaultView';
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    selectMonth(month) {
-        this.currentDate.setMonth(month);
-        this.calendarView = 'defaultView';
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    generateYearRange() {
-        const currentYear = this.currentDate.getFullYear();
-        const startYear = currentYear - (currentYear % 20);
-        this.yearRange = Array.from({ length: 20 }, (_, i) => startYear + i);
-    }
-    isDateSelectable(date) {
-        const min = this.minDate ? new Date(this.minDate) : null;
-        const max = this.maxDate ? new Date(this.maxDate) : null;
-        if (min && date < min)
-            return false;
-        if (max && date > max)
-            return false;
-        return true;
-    }
-    isDayDisabled(day) {
-        const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day);
-        return !this.isDateSelectable(date);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: true, selector: "cats-ui-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate" }, host: { listeners: { "window:keydown.arrowleft": "handleLeftArrow($event)", "window:keydown.arrowright": "handleRightArrow($event)" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePickerComponent),
-                multi: true,
-            },
-            DatePipe,
-        ], ngImport: i0, template: "<div\r\n  class=\"date-picker-container\"\r\n  catsOutsideClick\r\n  (clickOutside)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div (click)=\"toggleCalendar()\">\r\n    <input\r\n      type=\"text\"\r\n      [value]=\"date | date : 'MM/dd/yyy'\"\r\n      placeholder=\"MM/DD/YYYY\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n  </div>\r\n  @if(isOpen){\r\n  <div class=\"calendar-popup\">\r\n    <div class=\"calendar-header\">\r\n      <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n      </span>\r\n      <div>\r\n        <span\r\n          class=\"month-year pe-3 pointer\"\r\n          (click)=\"calendarView = 'monthView'\"\r\n          >{{ getMonthYear().month }}</span\r\n        >\r\n        <span class=\"month-year pointer\" (click)=\"calendarView = 'yearView'\">{{\r\n          getMonthYear().year\r\n        }}</span>\r\n      </div>\r\n      <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n      </span>\r\n    </div>\r\n\r\n    @if(calendarView === \"monthView\"){\r\n    <div class=\"month-grid\">\r\n      @for(month of monthRange | keyvalue; track $index){\r\n      <span\r\n        class=\"month\"\r\n        (click)=\"selectMonth(month.key)\"\r\n        [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n        >{{ month.value }}</span\r\n      >\r\n      }\r\n    </div>\r\n    } @else if(calendarView === 'yearView'){\r\n    <div class=\"year-selector\">\r\n      <span class=\"navigation-button\" (click)=\"previousYearRange()\">\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n      </span>\r\n      <div class=\"year-grid\">\r\n        @for(year of yearRange;track $index){\r\n        <span\r\n          class=\"year\"\r\n          (click)=\"selectYear(year)\"\r\n          [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n          >{{ year }}</span\r\n        >\r\n        }\r\n      </div>\r\n      <span class=\"navigation-button\" (click)=\"nextYearRange()\">\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"calendar-grid\">\r\n      <div\r\n        *ngFor=\"let day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\"\r\n        class=\"days_name\"\r\n      >\r\n        {{ day }}\r\n      </div>\r\n\r\n      <div\r\n        *ngFor=\"let dayObj of daysInMonth\"\r\n        class=\"calendar-day\"\r\n        [ngClass]=\"{\r\n          selected:\r\n            dayObj.date.getDate() === selectedDay && dayObj.isCurrentMonth,\r\n          disabled: isDayDisabled(dayObj.date.getDate()),\r\n          notInCurrentMonth: !dayObj.isCurrentMonth\r\n        }\"\r\n        (click)=\"selectDate(dayObj.day)\"\r\n      >\r\n        {{ dayObj.day }}\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"calendar-footer\" class=\"calendar-footer\">\r\n      <button type=\"button\" class=\"outline_blue\" (click)=\"closeCalendar()\">\r\n        Cancel\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fill_blue\"\r\n        (click)=\"closeCalendar(); setSelectedDate()\"\r\n      >\r\n        Choose Date\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-container{position:relative;display:inline-block;width:100%}.calendar_icon{position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(1.3333333333rem / var(--scale));stroke:var(--textSecondary);cursor:pointer;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}input[type=text]{padding:calc(1.3333333333rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar-popup{position:absolute;top:calc(4.4166666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--border);padding:calc(1.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);width:calc(34.6666666667rem / var(--scale))}.calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textPrimary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary)}.calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-day:hover{background-color:var(--border);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar-footer{margin-top:calc(1.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.calendar-footer button{min-width:calc(10rem / var(--scale));width:100%;font-size:var(--fs-14);line-height:140%;font-weight:400;border:1px solid var(--primaryBlue)}.navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar-day.selected{background-color:var(--primaryOrange);color:var(--white)}.month-year{font-size:var(--fs-12);font-weight:500}.year-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.year-grid,.month-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.year,.month{padding:4px 8px;border-radius:16px;cursor:pointer}.year.selected,.month.selected{color:var(--blue-700)}.year:hover,.month:hover{background-color:var(--border);color:var(--blue-700);transition:ease-in-out .3s}.calendar-day.disabled{color:#ccc;pointer-events:none;background:#f9f9f9}.notInCurrentMonth{pointer-events:none;background-color:#fff}@media only screen and (min-width: 0) and (max-width: 1360px){.year-grid,.month-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-date-picker', imports: [CommonModule, OutsideClickDirective], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true,
-                        },
-                        DatePipe,
-                    ], template: "<div\r\n  class=\"date-picker-container\"\r\n  catsOutsideClick\r\n  (clickOutside)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div (click)=\"toggleCalendar()\">\r\n    <input\r\n      type=\"text\"\r\n      [value]=\"date | date : 'MM/dd/yyy'\"\r\n      placeholder=\"MM/DD/YYYY\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n  </div>\r\n  @if(isOpen){\r\n  <div class=\"calendar-popup\">\r\n    <div class=\"calendar-header\">\r\n      <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n      </span>\r\n      <div>\r\n        <span\r\n          class=\"month-year pe-3 pointer\"\r\n          (click)=\"calendarView = 'monthView'\"\r\n          >{{ getMonthYear().month }}</span\r\n        >\r\n        <span class=\"month-year pointer\" (click)=\"calendarView = 'yearView'\">{{\r\n          getMonthYear().year\r\n        }}</span>\r\n      </div>\r\n      <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n      </span>\r\n    </div>\r\n\r\n    @if(calendarView === \"monthView\"){\r\n    <div class=\"month-grid\">\r\n      @for(month of monthRange | keyvalue; track $index){\r\n      <span\r\n        class=\"month\"\r\n        (click)=\"selectMonth(month.key)\"\r\n        [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n        >{{ month.value }}</span\r\n      >\r\n      }\r\n    </div>\r\n    } @else if(calendarView === 'yearView'){\r\n    <div class=\"year-selector\">\r\n      <span class=\"navigation-button\" (click)=\"previousYearRange()\">\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n      </span>\r\n      <div class=\"year-grid\">\r\n        @for(year of yearRange;track $index){\r\n        <span\r\n          class=\"year\"\r\n          (click)=\"selectYear(year)\"\r\n          [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n          >{{ year }}</span\r\n        >\r\n        }\r\n      </div>\r\n      <span class=\"navigation-button\" (click)=\"nextYearRange()\">\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"calendar-grid\">\r\n      <div\r\n        *ngFor=\"let day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\"\r\n        class=\"days_name\"\r\n      >\r\n        {{ day }}\r\n      </div>\r\n\r\n      <div\r\n        *ngFor=\"let dayObj of daysInMonth\"\r\n        class=\"calendar-day\"\r\n        [ngClass]=\"{\r\n          selected:\r\n            dayObj.date.getDate() === selectedDay && dayObj.isCurrentMonth,\r\n          disabled: isDayDisabled(dayObj.date.getDate()),\r\n          notInCurrentMonth: !dayObj.isCurrentMonth\r\n        }\"\r\n        (click)=\"selectDate(dayObj.day)\"\r\n      >\r\n        {{ dayObj.day }}\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"calendar-footer\" class=\"calendar-footer\">\r\n      <button type=\"button\" class=\"outline_blue\" (click)=\"closeCalendar()\">\r\n        Cancel\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fill_blue\"\r\n        (click)=\"closeCalendar(); setSelectedDate()\"\r\n      >\r\n        Choose Date\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-container{position:relative;display:inline-block;width:100%}.calendar_icon{position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(1.3333333333rem / var(--scale));stroke:var(--textSecondary);cursor:pointer;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}input[type=text]{padding:calc(1.3333333333rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar-popup{position:absolute;top:calc(4.4166666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--border);padding:calc(1.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);width:calc(34.6666666667rem / var(--scale))}.calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textPrimary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary)}.calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-day:hover{background-color:var(--border);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar-footer{margin-top:calc(1.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.calendar-footer button{min-width:calc(10rem / var(--scale));width:100%;font-size:var(--fs-14);line-height:140%;font-weight:400;border:1px solid var(--primaryBlue)}.navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar-day.selected{background-color:var(--primaryOrange);color:var(--white)}.month-year{font-size:var(--fs-12);font-weight:500}.year-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.year-grid,.month-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.year,.month{padding:4px 8px;border-radius:16px;cursor:pointer}.year.selected,.month.selected{color:var(--blue-700)}.year:hover,.month:hover{background-color:var(--border);color:var(--blue-700);transition:ease-in-out .3s}.calendar-day.disabled{color:#ccc;pointer-events:none;background:#f9f9f9}.notInCurrentMonth{pointer-events:none;background-color:#fff}@media only screen and (min-width: 0) and (max-width: 1360px){.year-grid,.month-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
-        }], propDecorators: { minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], handleLeftArrow: [{
-                type: HostListener,
-                args: ['window:keydown.arrowleft', ['$event']]
-            }], handleRightArrow: [{
-                type: HostListener,
-                args: ['window:keydown.arrowright', ['$event']]
-            }] } });
-
-class DateTimePickerComponent {
-    locale;
-    cd;
-    datePipe;
-    dateTimeSelected = new EventEmitter();
-    dateConfig;
-    minDate;
-    maxDate;
-    preSelectedValue;
-    selectedDateTime;
-    currentDate = new Date();
-    currentMonth = this.currentDate.getMonth();
-    currentYear = this.currentDate.getFullYear();
-    selectedDate = null;
-    selectedTime = null;
-    calendar = [];
-    timeSlots = [];
-    rangeStart = null;
-    rangeEnd = null;
-    selectedMonth;
-    selectedYear;
-    control;
-    disableControl = false;
-    date = '';
-    calendarView = 'defaultView';
-    yearRange = [];
-    daysInMonth = [];
-    selectedDay = 0;
-    selectedStartDate;
-    selectedEndDate;
-    isOpen = false;
-    showYearSelector = false;
-    monthRange = {
-        '0': 'JAN',
-        '01': 'FEB',
-        '02': 'MAR',
-        '03': 'APR',
-        '04': 'MAY',
-        '05': 'JUN',
-        '06': 'JUL',
-        '07': 'AUG',
-        '08': 'SEP',
-        '09': 'OCT',
-        '10': 'NOV',
-        '11': 'DEC',
-    };
-    constructor(locale, cd, datePipe) {
-        this.locale = locale;
-        this.cd = cd;
-        this.datePipe = datePipe;
-    }
-    ngOnChanges(_changes) {
-        if (!_changes['selectedDateTime']?.currentValue) {
-            this.selectedDateTime = [];
-        }
-        else {
-            this.writeValue(this.control?.value);
-        }
-    }
-    ngOnInit() {
-        this.generateYearRange();
-        // this.generateCalendar();
-        this.generateTimeRanges();
-        if (this.preSelectedValue) {
-            this.initializeCalendar();
-        }
-    }
-    onTouchedCallback = () => { };
-    onChangeCallback = () => { };
-    writeValue(value) {
-        if (value) {
-            this.selectedDateTime = value;
-            this.onChangeCallback(value);
-            this.cd.markForCheck();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (this.control) {
-            isDisabled ? this.control.disable() : this.control.enable();
-        }
-    }
-    /**
-     * @description Validates date time picker component
-     * @author Shiva Kant
-     * @param control
-     * @returns validate
-     */
-    validate(control) {
-        this.control = control;
-        const selected = this.date ? new Date(this.date) : null;
-        // Check required manually
-        const isRequired = control.validator && control.validator(control)?.['required'];
-        if ((isRequired || control.hasError('required')) &&
-            (!this.date || !this.selectedDay)) {
-            return { required: true };
-        }
-        else if (this.minDate && selected && selected < new Date(this.minDate)) {
-            return { minDate: true };
-        }
-        else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
-            return { maxDate: true };
-        }
-        return null;
-    }
-    /**
-     * @description method to toggleCalendar
-     * @author Shiva Kant
-     */
-    toggleCalendar() {
-        this.isOpen = !this.isOpen;
-        if (this.date && this.isOpen) {
-            this.currentDate = new Date(this.date);
-            this.selectedDay = this.currentDate.getDate();
-        }
-        this.calendarView = 'defaultView';
-        this.generateCalendar();
-        if (this.isOpen) {
-            let ele = document.getElementsByClassName('calendar-footer');
-            setTimeout(() => {
-                ele[0]?.scrollIntoView();
-            });
-        }
-    }
-    /**
-     * @description Closes calendar
-     * @author Shiva Kant
-     */
-    closeCalendar() {
-        this.isOpen = false;
-        this.calendarView = 'defaultView';
-    }
-    /**
-     * @description Method to Gets month year
-     * @author Shiva Kant
-     * @returns month year
-     */
-    getMonthYear() {
-        return {
-            month: this.currentDate.toLocaleString('default', {
-                month: 'long',
-            }),
-            year: this.currentDate.toLocaleString('default', {
-                year: 'numeric',
-            }),
-        };
-    }
-    /**
-     * @description Method to Updates current year month
-     * @author Shiva Kant
-     */
-    updateCurrentYearMonth() {
-        this.currentYear = this.currentDate.getFullYear();
-        this.currentMonth = this.currentDate.getMonth();
-    }
-    /**
-     * @description Method to Selects year
-     * @author Shiva Kant
-     * @param year
-     */
-    selectYear(year) {
-        this.currentDate.setFullYear(year);
-        this.updateCurrentYearMonth();
-        this.showYearSelector = false;
-        this.calendarView = 'defaultView';
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    /**
-     * @description Method to Selects month
-     * @author Shiva Kant
-     * @param month
-     */
-    selectMonth(month) {
-        this.currentDate.setMonth(month);
-        this.updateCurrentYearMonth();
-        this.calendarView = 'defaultView';
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    /**
-     * @description Method to Previous year range
-     * @author Shiva Kant
-     */
-    previousYearRange() {
-        this.yearRange = this.yearRange.map((year) => year - 18);
-    }
-    /**
-     * @description Method to Next year range
-     * @author Shiva Kant
-     */
-    nextYearRange() {
-        this.yearRange = this.yearRange.map((year) => year + 18);
-    }
-    /**
-     * @description Method to Toggles year selector
-     * @author Shiva Kant
-     */
-    toggleYearSelector() {
-        this.showYearSelector = !this.showYearSelector;
-        this.generateYearRange();
-    }
-    /**
-     * @description Method to Generates year range
-     * @author Shiva Kant
-     */
-    generateYearRange() {
-        const currentYear = this.currentDate.getFullYear();
-        const startYear = currentYear - (currentYear % 20);
-        this.yearRange = Array.from({ length: 18 }, (_, i) => startYear + i);
-    }
-    /**
-     * @description Method to Determines whether date selectable is
-     * @author Shiva Kant
-     * @param date
-     * @returns true if date selectable
-     */
-    isDateSelectable(date) {
-        const min = this.minDate ? new Date(this.minDate) : null;
-        const max = this.maxDate ? new Date(this.maxDate) : null;
-        if (min && date < min)
-            return false;
-        if (max && date > max)
-            return false;
-        return true;
-    }
-    /**
-     * @description Method to Determines whether day disabled is
-     * @author Shiva Kant
-     * @param day
-     * @returns true if day disabled
-     */
-    isDayDisabled(day) {
-        const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day);
-        return !this.isDateSelectable(date);
-    }
-    /**
-     * @description Method to Generates calendar
-     * @author Shiva Kant
-     */
-    generateCalendar() {
-        const year = this.currentDate.getFullYear();
-        const month = this.currentDate.getMonth();
-        const firstDayOfMonth = new Date(year, month, 1);
-        const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
-        const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
-        const daysInPreviousMonth = new Date(year, month, 0).getDate();
-        const totalCells = 42; // 6 rows of 7 days
-        const calendarDays = [];
-        // Fill previous month days
-        for (let i = firstWeekDay - 1; i >= 0; i--) {
-            const day = daysInPreviousMonth - i;
-            const date = new Date(year, month - 1, day);
-            calendarDays.push({ day, date, isCurrentMonth: false });
-        }
-        // Fill current month days
-        for (let day = 1; day <= daysInCurrentMonth; day++) {
-            const date = new Date(year, month, day);
-            calendarDays.push({ day, date, isCurrentMonth: true });
-        }
-        // Fill next month days
-        const remaining = totalCells - calendarDays.length;
-        for (let day = 1; day <= remaining; day++) {
-            const date = new Date(year, month + 1, day);
-            calendarDays.push({ day, date, isCurrentMonth: false });
-        }
-        this.daysInMonth = calendarDays;
-    }
-    /**
-     * @description Method to Previous month
-     * @author Shiva Kant
-     */
-    previousMonth() {
-        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
-        this.updateCurrentYearMonth();
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    /**
-     * @description Method to Next month
-     * @author Shiva Kant
-     */
-    nextMonth() {
-        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
-        this.updateCurrentYearMonth();
-        this.selectedDay = 0;
-        this.generateCalendar();
-    }
-    /**
-     * @description Method to Initializes calendar when preSelectedValue  date
-     * @author Shiva Kant
-     * @returns calendar
-     */
-    initializeCalendar() {
-        if (!this.preSelectedValue)
-            return;
-        // Case 1: Single date (string or Date)
-        if (typeof this.preSelectedValue === 'string' ||
-            this.preSelectedValue instanceof Date) {
-            const date = new Date(this.preSelectedValue);
-            this.selectedDate = date.getDate();
-            this.selectedMonth = date.getMonth();
-            this.selectedYear = date.getFullYear();
-            this.selectedTime = this.formatTime(date);
-            // Update current view to show the month/year
-            this.currentDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDate);
-            this.generateCalendar();
-        }
-        // Case 2: Range of dates
-        else if (this.preSelectedValue.start && this.preSelectedValue.end) {
-            const startDate = new Date(this.preSelectedValue.start);
-            const endDate = new Date(this.preSelectedValue.end);
-            // Patch component state
-            this.rangeStart = startDate.getDate();
-            this.rangeEnd = endDate.getDate();
-            this.selectedStartDate = startDate;
-            this.selectedEndDate = endDate;
-            this.selectedMonth = startDate.getMonth();
-            this.selectedYear = startDate.getFullYear();
-            // Set the current calendar view to the start month/year
-            this.currentDate = new Date(this.selectedYear, this.selectedMonth, 1);
-            this.generateCalendar();
-            // Optional: If your calendar requires a single selectedTime for range, you could pick start or end
-            this.selectedTime = this.formatTime(startDate);
-            // Emit initial range value
-            this.emitDateTime();
-        }
-    }
-    /**
-     * @description Method to Selects date
-     * @author Shiva Kant
-     * @param date
-     */
-    selectDate(date) {
-        const selectedFullDate = new Date(this.currentYear, this.currentMonth, date);
-        selectedFullDate.setHours(0, 0, 0, 0);
-        this.selectedMonth = this.currentMonth;
-        this.selectedYear = this.currentYear;
-        if (this.dateConfig.selectionMode === 'single') {
-            this.selectedDate = date;
-            this.rangeStart = null;
-            this.rangeEnd = null;
-        }
-        else {
-            if (!this.rangeStart || this.rangeEnd) {
-                this.rangeStart = date;
-                this.rangeEnd = null;
-            }
-            else {
-                this.rangeEnd = date < this.rangeStart ? this.rangeStart : date;
-                this.rangeStart = date < this.rangeStart ? date : this.rangeStart;
-            }
-        }
-        this.emitDateTime();
-    }
-    /**
-     * @description Method to Selects time
-     * @author Shiva Kant
-     * @param time
-     */
-    selectTime(time) {
-        this.selectedTime = time;
-        this.emitDateTime();
-    }
-    /**
-     * @description Method to Determines whether selected date is
-     * @author Shiva Kant
-     * @param date
-     * @returns
-     */
-    isSelectedDate(date, month, year) {
-        if (this.dateConfig.selectionMode === 'single') {
-            // Check if the day, month, and year match
-            return (this.selectedDate === date &&
-                this.selectedMonth === month &&
-                this.selectedYear === year);
-        }
-        else if (this.dateConfig.selectionMode === 'range') {
-            // Range selection checks, ensuring both start and end dates are within the same month and year
-            return !!((this.rangeStart &&
-                this.rangeStart === date &&
-                this.selectedMonth === month &&
-                this.selectedYear === year) ||
-                (this.rangeEnd &&
-                    this.rangeEnd === date &&
-                    this.selectedMonth === month &&
-                    this.selectedYear === year) ||
-                (this.rangeStart &&
-                    this.rangeEnd &&
-                    date > this.rangeStart &&
-                    date < this.rangeEnd &&
-                    this.selectedMonth === month &&
-                    this.selectedYear === year));
-        }
-        return false;
-    }
-    /**
-     * @description Method to Generates time ranges
-     * @author Shiva Kant
-     */
-    generateTimeRanges() {
-        const startTime = new Date();
-        startTime.setHours(0, 0, 0, 0);
-        this.timeSlots = Array.from({ length: 48 }, (_, i) => {
-            const time = new Date(startTime.getTime() + i * 30 * 60 * 1000);
-            return { value: time, label: this.formatTime(time) };
-        });
-    }
-    /**
-     * @description Method to Formats time
-     * @author Shiva Kant
-     * @param date
-     * @returns time
-     */
-    formatTime(date) {
-        return date.toLocaleTimeString('en-US', {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: true,
-        });
-    }
-    /**
-     * @description Method to Formats date time
-     * @author Shiva Kant
-     * @param fullDate
-     * @param selectedTime
-     * @returns date time
-     */
-    formatDateTime(fullDate, selectedTime) {
-        const date = new Date(fullDate);
-        if (!selectedTime) {
-            // Only date formatting when time not required
-            return this.datePipe.transform(date, 'yyyy/MM/dd');
-        }
-        const [time, period] = selectedTime.split(' ');
-        let [hours, minutes] = time.split(':').map(Number);
-        // Convert 12-hour → 24-hour
-        if (period === 'PM' && hours !== 12)
-            hours += 12;
-        if (period === 'AM' && hours === 12)
-            hours = 0;
-        date.setHours(hours, minutes, 0, 0);
-        return this.datePipe.transform(date, 'yyyy/MM/dd hh:mm a');
-    }
-    /**
-     * @description Method to Emits date time
-     * @author Shiva Kant
-     * @returns date time
-     */
-    emitDateTime() {
-        if (this.dateConfig.enableTime && !this.selectedTime) {
-            return; // wait until user selects time
-        }
-        if (this.dateConfig.selectionMode === 'single') {
-            if (!this.selectedDate)
-                return;
-            const fullDate = new Date(this.currentYear, this.currentMonth, this.selectedDate);
-            this.selectedDateTime = this.formatDateTime(fullDate || '', this.dateConfig.enableTime ? this.selectedTime : null);
-            this.writeValue(this.selectedDateTime);
-            this.date = this.selectedDate;
-            this.dateTimeSelected.emit(this.selectedDateTime);
-            return;
-        }
-        if (this.dateConfig.selectionMode === 'range') {
-            if (!this.rangeStart || !this.rangeEnd)
-                return;
-            const startDate = new Date(this.currentYear, this.currentMonth, this.rangeStart);
-            const endDate = new Date(this.currentYear, this.currentMonth, this.rangeEnd);
-            const startDateTime = this.formatDateTime(startDate, this.dateConfig.enableTime ? this.selectedTime : null);
-            const endDateTime = this.formatDateTime(endDate, this.dateConfig.enableTime ? this.selectedTime : null);
-            const rangeResult = { start: startDateTime, end: endDateTime };
-            this.writeValue(rangeResult);
-            this.dateTimeSelected.emit(rangeResult);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: true, selector: "cats-ui-date-time-picker", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: DateTimePickerComponent,
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: DateTimePickerComponent,
-                multi: true,
-            },
-            DatePipe,
-        ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n  class=\"calendar_wrapper\"\r\n  catsOutsideClick\r\n  (clickOutSide)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n    @if (dateConfig.selectionMode=='single') {\r\n\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select Date\"\r\n      [value]=\"selectedDateTime\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    } @else {\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select date Range\"\r\n      [value]=\"\r\n        selectedDateTime.start\r\n          | date\r\n            : 'MM/dd/yyyy' +\r\n                ' - ' +\r\n                (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n      \"\r\n      readonly\r\n    />\r\n    }\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n    <img src=\"images/calendar.svg\" alt=\"\" />\r\n  </div>\r\n  @if (isOpen) {\r\n  <div class=\"calendar-popup\">\r\n    <!-- for the header -->\r\n    <div class=\"calendar-header\">\r\n      <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n        <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n      </span>\r\n      <div class=\"month-year\">\r\n        <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n          {{ getMonthYear().month }}</span\r\n        >\r\n        <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n          getMonthYear().year\r\n        }}</span>\r\n      </div>\r\n\r\n      <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n        <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n      </span>\r\n    </div>\r\n    @if(calendarView === \"monthView\"){\r\n    <div class=\"month-grid\">\r\n      @for(month of monthRange | keyvalue; track $index){\r\n      <span\r\n        class=\"month\"\r\n        (click)=\"selectMonth(month.key)\"\r\n        [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n        >{{ month.value }}</span\r\n      >\r\n      }\r\n    </div>\r\n    } @else if(calendarView === 'yearView'){\r\n    <div class=\"year-selector\">\r\n      <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n        <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n      </span>\r\n      <div class=\"year-grid\">\r\n        @for(year of yearRange;track $index){\r\n        <span\r\n          class=\"year\"\r\n          (click)=\"selectYear(year)\"\r\n          [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n          >{{ year }}</span\r\n        >\r\n        }\r\n      </div>\r\n      <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n        <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"calendar_body\">\r\n      <div class=\"calendar-grid\">\r\n        <!-- Day names -->\r\n        @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n        <div class=\"days_name\">\r\n          {{ day }}\r\n        </div>\r\n        }\r\n\r\n        <!-- Calendar dates -->\r\n        @for (dayObj of daysInMonth; track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [ngClass]=\"{\r\n            active:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'single' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ),\r\n\r\n            active_start:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              dayObj.day === rangeStart,\r\n\r\n            active_end:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              dayObj.day === rangeEnd,\r\n\r\n            range_between_active:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              rangeStart != null && rangeEnd != null &&\r\n              dayObj.day > rangeStart &&\r\n              dayObj.day < rangeEnd,\r\n\r\n            other_month: !dayObj.isCurrentMonth,\r\n            disabled: isDayDisabled(dayObj.day),\r\n            notInCurrentMonth: !dayObj.isCurrentMonth\r\n          }\"\r\n          (click)=\"\r\n            dayObj.isCurrentMonth &&\r\n              !isDayDisabled(dayObj.day) &&\r\n              selectDate(dayObj.day)\r\n          \"\r\n        >\r\n          {{ dayObj.day }}\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- TIME SLOTS (only if showTime = true) -->\r\n      @if (dateConfig.enableTime) {\r\n      <div class=\"times\">\r\n        @for (timeSlot of timeSlots; track $index) {\r\n        <span\r\n          class=\"span_time\"\r\n          [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          (click)=\"selectTime(timeSlot.label)\"\r\n        >\r\n          {{ timeSlot.label }}\r\n        </span>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-date-time-picker', imports: [CommonModule, OutsideClickDirective], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: DateTimePickerComponent,
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: DateTimePickerComponent,
-                            multi: true,
-                        },
-                        DatePipe,
-                    ], template: "<!-- Calendar -->\r\n\r\n<div\r\n  class=\"calendar_wrapper\"\r\n  catsOutsideClick\r\n  (clickOutSide)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n    @if (dateConfig.selectionMode=='single') {\r\n\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select Date\"\r\n      [value]=\"selectedDateTime\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    } @else {\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select date Range\"\r\n      [value]=\"\r\n        selectedDateTime.start\r\n          | date\r\n            : 'MM/dd/yyyy' +\r\n                ' - ' +\r\n                (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n      \"\r\n      readonly\r\n    />\r\n    }\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n    <img src=\"images/calendar.svg\" alt=\"\" />\r\n  </div>\r\n  @if (isOpen) {\r\n  <div class=\"calendar-popup\">\r\n    <!-- for the header -->\r\n    <div class=\"calendar-header\">\r\n      <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n        <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n        <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n      </span>\r\n      <div class=\"month-year\">\r\n        <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n          {{ getMonthYear().month }}</span\r\n        >\r\n        <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n          getMonthYear().year\r\n        }}</span>\r\n      </div>\r\n\r\n      <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n        <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n        <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n      </span>\r\n    </div>\r\n    @if(calendarView === \"monthView\"){\r\n    <div class=\"month-grid\">\r\n      @for(month of monthRange | keyvalue; track $index){\r\n      <span\r\n        class=\"month\"\r\n        (click)=\"selectMonth(month.key)\"\r\n        [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n        >{{ month.value }}</span\r\n      >\r\n      }\r\n    </div>\r\n    } @else if(calendarView === 'yearView'){\r\n    <div class=\"year-selector\">\r\n      <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n        <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n      </span>\r\n      <div class=\"year-grid\">\r\n        @for(year of yearRange;track $index){\r\n        <span\r\n          class=\"year\"\r\n          (click)=\"selectYear(year)\"\r\n          [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n          >{{ year }}</span\r\n        >\r\n        }\r\n      </div>\r\n      <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n        <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"calendar_body\">\r\n      <div class=\"calendar-grid\">\r\n        <!-- Day names -->\r\n        @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n        <div class=\"days_name\">\r\n          {{ day }}\r\n        </div>\r\n        }\r\n\r\n        <!-- Calendar dates -->\r\n        @for (dayObj of daysInMonth; track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [ngClass]=\"{\r\n            active:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'single' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ),\r\n\r\n            active_start:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              dayObj.day === rangeStart,\r\n\r\n            active_end:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              dayObj.day === rangeEnd,\r\n\r\n            range_between_active:\r\n              dayObj.isCurrentMonth &&\r\n              dateConfig.selectionMode === 'range' &&\r\n              isSelectedDate(\r\n                dayObj.day,\r\n                dayObj.date.getMonth(),\r\n                dayObj.date.getFullYear()\r\n              ) &&\r\n              rangeStart != null && rangeEnd != null &&\r\n              dayObj.day > rangeStart &&\r\n              dayObj.day < rangeEnd,\r\n\r\n            other_month: !dayObj.isCurrentMonth,\r\n            disabled: isDayDisabled(dayObj.day),\r\n            notInCurrentMonth: !dayObj.isCurrentMonth\r\n          }\"\r\n          (click)=\"\r\n            dayObj.isCurrentMonth &&\r\n              !isDayDisabled(dayObj.day) &&\r\n              selectDate(dayObj.day)\r\n          \"\r\n        >\r\n          {{ dayObj.day }}\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- TIME SLOTS (only if showTime = true) -->\r\n      @if (dateConfig.enableTime) {\r\n      <div class=\"times\">\r\n        @for (timeSlot of timeSlots; track $index) {\r\n        <span\r\n          class=\"span_time\"\r\n          [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          (click)=\"selectTime(timeSlot.label)\"\r\n        >\r\n          {{ timeSlot.label }}\r\n        </span>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }], propDecorators: { dateTimeSelected: [{
-                type: Output
-            }], dateConfig: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], preSelectedValue: [{
-                type: Input
-            }] } });
-
-class CatsUiTooltipDirective {
-    el;
-    renderer;
-    tooltipText = '';
-    tooltipEl;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.removeTooltip();
-    }
-    showTooltip() {
-        this.createTooltip();
-        this.positionTooltip();
-    }
-    hideTooltip() {
-        this.removeTooltip();
-    }
-    adjustOnWindowChange() {
-        if (this.tooltipEl)
-            this.positionTooltip();
-    }
-    /**
-     * @description Creates tooltip
-     * @author Shiva Kant
-     * @returns
-     */
-    createTooltip() {
-        if (this.tooltipEl)
-            return;
-        this.tooltipEl = this.renderer.createElement('div');
-        this.tooltipEl.innerText = this.tooltipText;
-        this.renderer.setStyle(this.tooltipEl, 'position', 'fixed');
-        this.renderer.setStyle(this.tooltipEl, 'padding', '6px 10px');
-        this.renderer.setStyle(this.tooltipEl, 'background', '#333');
-        this.renderer.setStyle(this.tooltipEl, 'color', '#fff');
-        this.renderer.setStyle(this.tooltipEl, 'borderRadius', '4px');
-        this.renderer.setStyle(this.tooltipEl, 'zIndex', '9999');
-        this.renderer.setStyle(this.tooltipEl, 'whiteSpace', 'nowrap');
-        document.body.appendChild(this.tooltipEl);
-    }
-    /**
-     * @description Removes tooltip
-     * @author Shiva Kant
-     */
-    removeTooltip() {
-        if (this.tooltipEl) {
-            this.tooltipEl.remove();
-            this.tooltipEl = null;
-        }
-    }
-    /**
-     * @description Positions tooltip
-     * @author Shiva Kant
-     */
-    positionTooltip() {
-        const hostRect = this.el.nativeElement.getBoundingClientRect();
-        const tooltipRect = this.tooltipEl.getBoundingClientRect();
-        const spacing = 8; // distance from host element
-        const fitsAbove = hostRect.top >= tooltipRect.height + spacing;
-        const fitsBelow = window.innerHeight - hostRect.bottom >= tooltipRect.height + spacing;
-        const fitsLeft = hostRect.left >= tooltipRect.width + spacing;
-        const fitsRight = window.innerWidth - hostRect.right >= tooltipRect.width + spacing;
-        let top = 0;
-        let left = 0;
-        // Priority: bottom → top → right → left
-        if (fitsBelow) {
-            top = hostRect.bottom + spacing;
-            left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-        }
-        else if (fitsAbove) {
-            top = hostRect.top - tooltipRect.height - spacing;
-            left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-        }
-        else if (fitsRight) {
-            top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-            left = hostRect.right + spacing;
-        }
-        else if (fitsLeft) {
-            top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-            left = hostRect.left - tooltipRect.width - spacing;
-        }
-        else {
-            // fallback → bottom with clamped position
-            top = hostRect.bottom + spacing;
-            left = Math.min(Math.max(10, hostRect.left), window.innerWidth - tooltipRect.width - 10);
-        }
-        this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
-        this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: CatsUiTooltipDirective, isStandalone: true, selector: "[catsUiTooltip]", inputs: { tooltipText: ["catsUiTooltip", "tooltipText"] }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()", "window:resize": "adjustOnWindowChange()", "window:scroll": "adjustOnWindowChange()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[catsUiTooltip]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
-                type: Input,
-                args: ['catsUiTooltip']
-            }], showTooltip: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], hideTooltip: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], adjustOnWindowChange: [{
-                type: HostListener,
-                args: ['window:resize']
-            }, {
-                type: HostListener,
-                args: ['window:scroll']
-            }] } });
-
-class AccordionComponent {
-    openedIndex = null;
-    /**
-     * @description Toggles accordion component
-     * @author Shiva Kant
-     * @param index
-     */
-    toggle(index) {
-        this.openedIndex = this.openedIndex === index ? null : index;
-    }
-    /**
-     * @description Determines whether open is
-     * @author Shiva Kant
-     * @param index
-     * @returns true if open
-     */
-    isOpen(index) {
-        return this.openedIndex === index;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AccordionComponent, isStandalone: true, selector: "cats-ui-accordion", ngImport: i0, template: "<div class=\"accordion\">\r\n  <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [".accordion{width:100%;max-width:600px;margin:0 auto}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-accordion', imports: [], template: "<div class=\"accordion\">\r\n  <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [".accordion{width:100%;max-width:600px;margin:0 auto}\n"] }]
-        }] });
-
-class AccordionItemComponent {
-    accordion;
-    title = '';
-    index = 0;
-    // Change this to allow null instead of undefined
-    contentTemplate = null;
-    constructor(accordion) {
-        this.accordion = accordion;
-    }
-    /**
-     * @description Determines whether open is
-     * @author Shiva Kant
-     * @returns true if open
-     */
-    isOpen() {
-        return this.accordion.isOpen(this.index);
-    }
-    /**
-     * @description Toggles accordion item component
-     * @author Shiva Kant
-     */
-    toggle() {
-        this.accordion.toggle(this.index);
-    }
-    /**
-     * @description perform any initialization after content is injected
-     * @author Shiva Kant
-     */
-    ngAfterContentInit() {
-        if (!this.contentTemplate) {
-            console.error('No content template provided for accordion item:', this.title);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AccordionItemComponent, isStandalone: true, selector: "cats-ui-accordion-item", inputs: { title: "title", index: "index" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"accordion-item\">\r\n  <div class=\"accordion-header\" (click)=\"toggle()\">\r\n    <h3>{{ title }}</h3>\r\n    <img [src]=\"isOpen()?'images/chevron-up.svg':'images/chevron-down.svg'\" alt=\"\">\r\n \r\n  </div>\r\n  @if (isOpen()) {\r\n\r\n      <div class=\"accordion-body\" >\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n  }\r\n</div>\r\n", styles: [".accordion-item{border:1px solid #ccc;margin-bottom:10px}.accordion-header{display:flex;background-color:#f1f1f1;padding:10px;cursor:pointer}.accordion-body{padding:10px;background-color:#fafafa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cats-ui-accordion-item', imports: [CommonModule], template: "<div class=\"accordion-item\">\r\n  <div class=\"accordion-header\" (click)=\"toggle()\">\r\n    <h3>{{ title }}</h3>\r\n    <img [src]=\"isOpen()?'images/chevron-up.svg':'images/chevron-down.svg'\" alt=\"\">\r\n \r\n  </div>\r\n  @if (isOpen()) {\r\n\r\n      <div class=\"accordion-body\" >\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n  }\r\n</div>\r\n", styles: [".accordion-item{border:1px solid #ccc;margin-bottom:10px}.accordion-header{display:flex;background-color:#f1f1f1;padding:10px;cursor:pointer}.accordion-body{padding:10px;background-color:#fafafa}\n"] }]
-        }], ctorParameters: () => [{ type: AccordionComponent, decorators: [{
-                    type: Inject,
-                    args: [AccordionComponent]
-                }] }], propDecorators: { title: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }] } });
-
-/*
- * Public API Surface of cats-ui
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, DatePickerComponent, DateTimePickerComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, ToggleConfig, ToogleButtonComponent };
-//# sourceMappingURL=cats-ui.mjs.map