cats-ui-lib 2.0.1 → 2.0.2

package/fesm2022/cats-ui.mjs

@@ -0,0 +1,2474 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive, LOCALE_ID, Inject, TemplateRef, ContentChildren } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgClass, DatePipe } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { Validators, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+
+class CatsUiService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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;
+        if (this.inputConfig?.type === 'email') {
+            return Validators.email(control);
+        }
+        return null;
+    }
+    /**
+     * @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.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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$2 = () => { };
+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$2;
+    onChangeCallback = noop$2;
+    // 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.15", 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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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$1 = () => { };
+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$1;
+    onChangeCallback = noop$1;
+    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.15", 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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", 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.15", 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']]
+            }] } });
+
+const noop = () => { };
+const DROPDOWN_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
+    multi: true,
+};
+const DROPDOWN_CONTROL_VALUE_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
+    multi: true,
+};
+class AutoCompleteSingleSelectComponent {
+    autoSingleSelectConfig = new AutoCompleteSingleSelectConfig();
+    placeholder = 'Enter or Select Option';
+    selectedItem;
+    optionsList = [];
+    parentNativeElement;
+    onItemSelection = new EventEmitter();
+    onScroll = new EventEmitter();
+    showDropdown = false;
+    inputValue = '';
+    selectedOption;
+    constructor() { }
+    inValid = false;
+    control;
+    disableControl = false;
+    ngOnInit() { }
+    onTouchedCallback = noop;
+    onChangeCallback = noop;
+    ngOnChanges(_changes) {
+        if (!_changes['optionList']?.currentValue) {
+        }
+        else {
+            this.writeValue(this.control?.value);
+        }
+    }
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+    }
+    /**
+     * @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.inValid = false;
+        this.onChangeCallback(item);
+        this.onTouchedCallback();
+        this.onItemSelection.emit(this.selectedOption);
+    }
+    writeValue(obj) {
+        this.syncSelectionWithValue(obj);
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disableControl = isDisabled;
+    }
+    validate(control) {
+        this.control = control;
+        if (!this.autoSingleSelectConfig.required)
+            return null;
+        const val = control.value;
+        const isEmpty = val === null ||
+            val === undefined ||
+            val === '' ||
+            (typeof val === 'object' && Object.keys(val).length === 0);
+        return isEmpty ? { required: true } : null;
+    }
+    // ---------- Helpers ----------
+    syncSelectionWithValue(value) {
+        this.selectedOption = null;
+        this.inputValue = '';
+        if (!value || !this.optionsList?.length)
+            return;
+        if (typeof value !== 'object') {
+            this.selectedOption =
+                this.optionsList.find((o) => o === value ||
+                    o?.[this.autoSingleSelectConfig.idField] === value ||
+                    o?.[this.autoSingleSelectConfig.textField] === value) ?? value;
+        }
+        else {
+            this.selectedOption =
+                this.optionsList.find((o) => o[this.autoSingleSelectConfig.idField] ===
+                    value[this.autoSingleSelectConfig.idField]) ?? value;
+        }
+        this.inputValue = this.isObject(this.selectedOption)
+            ? this.selectedOption[this.autoSingleSelectConfig.textField]
+            : this.selectedOption;
+    }
+    /**
+     * @description this method is use to update input value
+     */
+    updateInputValue() {
+        let data = null;
+        if (!this.inputValue || this.inputValue.trim() === '') {
+            this.selectedOption = null;
+            this.onChangeCallback(null);
+        }
+        else {
+            if (this.isObject(this.optionsList?.[0])) {
+                data = {
+                    [this.autoSingleSelectConfig.idField]: null,
+                    [this.autoSingleSelectConfig.textField]: this.inputValue,
+                };
+            }
+            else {
+                data = this.inputValue;
+            }
+            this.selectedOption = data;
+            this.onChangeCallback(data);
+        }
+        this.onTouchedCallback();
+        this.onItemSelection.emit(data);
+        this.control?.updateValueAndValidity();
+    }
+    /**
+     * @description method to update dropdown list state on input type
+     * @author Shiva Kant
+     */
+    updateDropdownStatus() {
+        if (!this.inputValue || this.inputValue.trim() === '') {
+            this.selectedOption = null;
+            this.onChangeCallback(null);
+            // force validation
+            this.control?.updateValueAndValidity();
+            this.showDropdown = false;
+            return;
+        }
+        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 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.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-input-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", placeholder: "placeholder", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: AutoCompleteSingleSelectComponent,
+                multi: true,
+            },
+            DROPDOWN_CONTROL_VALUE_VALIDATOR,
+        ], usesOnChanges: true, 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        (input)=\"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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-input-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: AutoCompleteSingleSelectComponent,
+                            multi: true,
+                        },
+                        DROPDOWN_CONTROL_VALUE_VALIDATOR,
+                    ], 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        (input)=\"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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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
+            }], placeholder: [{
+                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.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-input-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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-input-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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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 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.15", 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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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.15", 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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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 = '';
+    tooltipClass = '';
+    tooltipEl;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.showTooltip();
+    }
+    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', '#ffffff');
+        // this.renderer.setStyle(this.tooltipEl, 'color', '#434a51');
+        // this.renderer.setStyle(this.tooltipEl, 'borderRadius', '4px');
+        // this.renderer.setStyle(this.tooltipEl, 'zIndex', '9999');
+        // this.renderer.setStyle(this.tooltipEl, 'whiteSpace', 'nowrap');
+        // Add a custom class if provided
+        if (this.tooltipClass) {
+            this.renderer.addClass(this.tooltipEl, this.tooltipClass);
+        }
+        else {
+            // Optionally, you can add a default class here
+            this.renderer.addClass(this.tooltipEl, 'default-tooltip-class');
+        }
+        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.15", 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.15", type: CatsUiTooltipDirective, isStandalone: true, selector: "[catsUiTooltip]", inputs: { tooltipText: ["catsUiTooltip", "tooltipText"], tooltipClass: "tooltipClass" }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()", "window:resize": "adjustOnWindowChange()", "window:scroll": "adjustOnWindowChange()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[catsUiTooltip]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
+                type: Input,
+                args: ['catsUiTooltip']
+            }], tooltipClass: [{
+                type: Input
+            }], 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.15", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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: [":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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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}.accordion{width:100%;margin:0 auto}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: [":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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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}.accordion{width:100%;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.15", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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\r\n      [src]=\"isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'\"\r\n      alt=\"\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"accordion-body\" [class.open]=\"isOpen()\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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}.accordion-item{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.accordion-item:has(.open) .accordion-header{border-radius:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 0}.accordion-item .accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;background-color:var(--neutral-50);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.accordion-item .accordion-header h3{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.accordion-item .accordion-header img{max-width:calc(2rem / var(--scale))}.accordion-item .accordion-body{max-height:0;padding:0 calc(.6666666667rem / var(--scale));overflow:hidden;background:var(--white);transition:max-height .4s ease,padding .3s}.accordion-item .accordion-body.open{max-height:calc(41.6666666667rem / var(--scale));padding:calc(1.25rem / var(--scale)) calc(.8333333333rem / var(--scale));border-radius:0 0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale))}\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.15", 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\r\n      [src]=\"isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'\"\r\n      alt=\"\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"accordion-body\" [class.open]=\"isOpen()\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}: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}.accordion-item{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.accordion-item:has(.open) .accordion-header{border-radius:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 0}.accordion-item .accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;background-color:var(--neutral-50);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.accordion-item .accordion-header h3{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.accordion-item .accordion-header img{max-width:calc(2rem / var(--scale))}.accordion-item .accordion-body{max-height:0;padding:0 calc(.6666666667rem / var(--scale));overflow:hidden;background:var(--white);transition:max-height .4s ease,padding .3s}.accordion-item .accordion-body.open{max-height:calc(41.6666666667rem / var(--scale));padding:calc(1.25rem / var(--scale)) calc(.8333333333rem / var(--scale));border-radius:0 0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale))}\n"] }]
+        }], ctorParameters: () => [{ type: AccordionComponent, decorators: [{
+                    type: Inject,
+                    args: [AccordionComponent]
+                }] }], propDecorators: { title: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class TabContentDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TabContentDirective, isStandalone: true, selector: "[tabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tabContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TabHeadingDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabHeadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TabHeadingDirective, isStandalone: true, selector: "[tabHeading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabHeadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tabHeading]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TabItemComponent {
+    heading;
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TabItemComponent, isStandalone: true, selector: "cats-ui-tab-item", queries: [{ propertyName: "heading", first: true, predicate: TabHeadingDirective, descendants: true }, { propertyName: "content", first: true, predicate: TabContentDirective, descendants: true }], ngImport: i0, template: "<p>tab-item works!</p>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-tab-item', imports: [], template: "<p>tab-item works!</p>\r\n" }]
+        }], propDecorators: { heading: [{
+                type: ContentChild,
+                args: [TabHeadingDirective]
+            }], content: [{
+                type: ContentChild,
+                args: [TabContentDirective]
+            }] } });
+
+class TabComponent {
+    activeTab = 0;
+    disabledTabs = [];
+    selectTab = new EventEmitter();
+    items;
+    /**
+     * @description Sets active
+     * @author Shiva Kant
+     * @param index
+     */
+    setActive(index) {
+        if (!this.disabledTabs.includes(index)) {
+            this.activeTab = index;
+            this.selectTab.emit(index);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabComponent, isStandalone: true, selector: "cats-ui-tab", inputs: { activeTab: "activeTab", disabledTabs: "disabledTabs" }, outputs: { selectTab: "selectTab" }, queries: [{ propertyName: "items", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"tab-header\">\r\n  @for (item of items; track $index) {\r\n  <ng-container>\r\n    <li\r\n      class=\"tab-item\"\r\n      [class.active]=\"activeTab === $index\"\r\n      [class.disabled]=\"disabledTabs.includes($index)\"\r\n      (click)=\"setActive($index)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"item.heading.template\"></ng-container>\r\n    </li>\r\n  </ng-container>\r\n\r\n  }\r\n</ul>\r\n\r\n<div class=\"tab-content\">\r\n  @for (item of items; track $index) {\r\n  <ng-container>\r\n    @if (activeTab === $index) {\r\n    <ng-container *ngTemplateOutlet=\"item.content.template\"></ng-container>\r\n    }\r\n  </ng-container>\r\n  }\r\n</div>\r\n", styles: [".tab-header{display:flex;border-bottom:1px solid #ccc;gap:8px}.tab-item{padding:8px 12px;cursor:pointer;border-radius:6px 6px 0 0}.tab-item.active{background:#1976d2;color:#fff}.tab-item.disabled{opacity:.5;cursor:not-allowed}\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.15", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-tab', imports: [CommonModule], template: "<ul class=\"tab-header\">\r\n  @for (item of items; track $index) {\r\n  <ng-container>\r\n    <li\r\n      class=\"tab-item\"\r\n      [class.active]=\"activeTab === $index\"\r\n      [class.disabled]=\"disabledTabs.includes($index)\"\r\n      (click)=\"setActive($index)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"item.heading.template\"></ng-container>\r\n    </li>\r\n  </ng-container>\r\n\r\n  }\r\n</ul>\r\n\r\n<div class=\"tab-content\">\r\n  @for (item of items; track $index) {\r\n  <ng-container>\r\n    @if (activeTab === $index) {\r\n    <ng-container *ngTemplateOutlet=\"item.content.template\"></ng-container>\r\n    }\r\n  </ng-container>\r\n  }\r\n</div>\r\n", styles: [".tab-header{display:flex;border-bottom:1px solid #ccc;gap:8px}.tab-item{padding:8px 12px;cursor:pointer;border-radius:6px 6px 0 0}.tab-item.active{background:#1976d2;color:#fff}.tab-item.disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { activeTab: [{
+                type: Input
+            }], disabledTabs: [{
+                type: Input
+            }], selectTab: [{
+                type: Output
+            }], items: [{
+                type: ContentChildren,
+                args: [TabItemComponent]
+            }] } });
+
+/*
+ * Public API Surface of cats-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALUE_VALIDATOR, 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, TabComponent, TabContentDirective, TabHeadingDirective, TabItemComponent, ToggleConfig, ToogleButtonComponent };
+//# sourceMappingURL=cats-ui.mjs.map