cats-ui-lib 1.0.0

package/fesm2022/cats-ui.mjs

@@ -0,0 +1,1394 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+
+class CatsUiService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsUiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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;
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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=\"custom-input\">\r\n  @if (inputConfig.label) {\r\n    <label>{{ inputConfig.label }}</label>\r\n  }\r\n\r\n  <input\r\n    class=\"input-box\"\r\n    [type]=\"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\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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}.custom-input{display:flex;flex-direction:column;margin-bottom:calc(1.3333333333rem / var(--scale))}.custom-input label{margin-bottom:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600}.custom-input input{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}.custom-input input:focus{outline:none;border-color:var(--blue-700)}.custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.custom-input .error-message{color:var(--red-700);font-size:calc(1.1666666667rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale))}\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: "19.2.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=\"custom-input\">\r\n  @if (inputConfig.label) {\r\n    <label>{{ inputConfig.label }}</label>\r\n  }\r\n\r\n  <input\r\n    class=\"input-box\"\r\n    [type]=\"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\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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}.custom-input{display:flex;flex-direction:column;margin-bottom:calc(1.3333333333rem / var(--scale))}.custom-input label{margin-bottom:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600}.custom-input input{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}.custom-input input:focus{outline:none;border-color:var(--blue-700)}.custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.custom-input .error-message{color:var(--red-700);font-size:calc(1.1666666667rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale))}\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 = '';
+    borderRequired = true;
+    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 {
+    name = '';
+    id = '';
+    checked = false;
+}
+class CheckBoxConfig {
+    id = '';
+    name = '';
+    checked = false;
+    subtasks;
+}
+
+const noop$1 = () => { };
+const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SingleSelectComponent),
+    multi: true,
+};
+const SINGLE_SELECT_CONTROL_VALUE_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SingleSelectComponent),
+    multi: true,
+};
+class SingleSelectComponent {
+    cd;
+    el;
+    optionList = [];
+    singleSelectConfig = new SingleSelectConfig();
+    selectedOption;
+    onSelection = new EventEmitter();
+    showDropdown = false;
+    searchText = '';
+    inValid = false;
+    control;
+    disableControl = false;
+    onScroll = new EventEmitter();
+    parentNativeElement;
+    selectedData;
+    constructor(cd, el) {
+        this.cd = cd;
+        this.el = el;
+    }
+    // These lifecycle hooks will be in use for further implementation
+    ngOnInit() { }
+    ngOnChanges(_changes) {
+        if (!_changes['optionList']?.currentValue) {
+            this.optionList = [];
+        }
+        else {
+            if (this.optionList.length > 10)
+                this.singleSelectConfig.enableSearch = true;
+            this.writeValue(this.control?.value);
+        }
+    }
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+        if (this.parentNativeElement) {
+            this.parentNativeElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+            let parentDiv = document.getElementById(this.parentNativeElement);
+            setTimeout(() => {
+                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
+                let dropdonwList = document.getElementById('container_scroll');
+                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
+                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
+                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
+                }
+            }, 20);
+        }
+    }
+    /**
+     * @description Method to check if provide arg is an object or not
+     * @author Shiva Kant
+     * @param Obj:any
+     * @returns boolean
+     */
+    isObjEmpty(obj) {
+        if (typeof obj == 'string' || typeof obj == 'number')
+            return true;
+        return !(obj && Object.keys(obj).length > 0);
+    }
+    /**
+     * @description Method is to update selected option and then
+     * update formcontrol by call onChangeCallback.
+     * @author Shiva Kant
+     * @param item
+     * @returns void
+     */
+    updateSelectedOption(item) {
+        this.selectedOption = item;
+        this.toggleDropdown();
+        this.inValid = false;
+        this.onChangeCallback(item);
+        this.onTouchedCallback();
+        this.onSelection.emit(item);
+    }
+    validate(control) {
+        this.control = control;
+    }
+    // Below Methods are used to register form API methods in these variable to use them later
+    onTouchedCallback = noop$1;
+    onChangeCallback = noop$1;
+    // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
+    /**
+     * @description method to update value of selectedOption
+     * @author Shiva Kant
+     * @param obj this is provided by formcontrol
+     * @returns void
+     */
+    writeValue(obj) {
+        this.selectedOption = '';
+        if (this.optionList.length && obj) {
+            if (typeof obj === 'string' || typeof obj === 'number') {
+                if (typeof this.optionList?.[0] === 'string' ||
+                    typeof this.optionList?.[0] === 'number') {
+                    if (this.optionList.includes(obj)) {
+                        this.selectedOption = obj;
+                    }
+                }
+                else if (obj != '') {
+                    for (const option of this.optionList) {
+                        if (option[this.singleSelectConfig.idField] == obj ||
+                            option[this.singleSelectConfig.textField] == obj) {
+                            this.selectedOption = option;
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                if (obj?.hasOwnProperty(this.singleSelectConfig.idField) &&
+                    !this.isObjEmpty(this.optionList[0])) {
+                    for (const option of this.optionList) {
+                        if (option[this.singleSelectConfig.idField] ==
+                            obj[this.singleSelectConfig.idField]) {
+                            this.selectedOption = option;
+                            break;
+                        }
+                    }
+                }
+            }
+            setTimeout(() => {
+                this.onChangeCallback(this.selectedOption);
+            }, 0);
+            this.cd.markForCheck();
+        }
+    }
+    /**
+     * @description method to register on change callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @description method to register on touch callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    //willbe used in further implementation
+    setDisabledState(isDisabled) {
+        this.disableControl = isDisabled;
+    }
+    /**
+     * @description method to update ontouchcallback on blur
+     * @author Shiva Kant
+     */
+    onTouched() {
+        this.onTouchedCallback();
+    }
+    /**
+     * @description method to toggle dropdown on outside click
+     * @author Shiva Kant
+     */
+    closeDropdown(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            if (this.showDropdown && this.singleSelectConfig.required) {
+                this.inValid =
+                    this.selectedOption == '' ||
+                        JSON.stringify(this.selectedOption) == '{}';
+            }
+            if (this.showDropdown)
+                this.onTouchedCallback();
+            this.showDropdown = false;
+        }
+    }
+    /**
+     * @description method to load more list
+     * @author Shiva Kant
+     * @param event
+     */
+    onDivScroll(event) {
+        if (event.target.offsetHeight + event.target.scrollTop >=
+            event.target.scrollHeight - 1 &&
+            this.optionList.length) {
+            this.onScroll.emit();
+        }
+    }
+    get filteredOptionsValue() {
+        if (!this.searchText || this.searchText.trim() === '') {
+            return this.optionList;
+        }
+        return this.optionList.filter((option) => {
+            if (typeof option != 'object') {
+                return option?.toLowerCase().includes(this.searchText.toLowerCase());
+            }
+            else {
+                return option[this.singleSelectConfig.textField]
+                    ?.toLowerCase()
+                    .includes(this.searchText.toLowerCase());
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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=\"input_text 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=\"input_text textTruncate\">\r\n          {{ selectedOption }}\r\n        </span>\r\n      </ng-template>\r\n      }@else{\r\n      <span class=\"default_text placeholderColor textTruncate\">{{\r\n        singleSelectConfig.placeholder\r\n      }}</span>\r\n\r\n      }\r\n    </div>\r\n    <span>\r\n      <!-- <i-feather name=\"chevron-up\"></i-feather> -->\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 src=\"images/x.svg\" class=\"cross_icon\" alt=\"\" />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n      filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{ option }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } } @else { @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{\r\n          option[singleSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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:solid calc(.0833333333rem / var(--scale)) 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(--neutral-900);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.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .input_text{max-width:100%}.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:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-300);color:var(--neutral-600);border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.3333333333rem / 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{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-radius:calc(.6666666667rem / var(--scale));top:calc(5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.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 .disabled_option{opacity:.3;pointer-events:none}.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(--neutral-900)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li:first-child{border-radius:calc(.4166666667rem / var(--scale)) calc(.4166666667rem / var(--scale)) 0 0}.main-wrapper .dropdown-list ul li:last-child{border-radius:0 0 calc(.4166666667rem / var(--scale)) calc(.4166666667rem / 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 .search_icon{opacity:.4;flex-direction:row;justify-content:calc(2rem / var(--scale));align-items:calc(2rem / var(--scale));flex-wrap:nowrap;gap:0;display:flex}.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(--neutral-600)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{opacity:.7;cursor:pointer}.disable-control{pointer-events:none;opacity:.7;background-color:var(--blue-50)}.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}.placeholderColor{color:var(--neutral-400)}\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: "19.2.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=\"input_text 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=\"input_text textTruncate\">\r\n          {{ selectedOption }}\r\n        </span>\r\n      </ng-template>\r\n      }@else{\r\n      <span class=\"default_text placeholderColor textTruncate\">{{\r\n        singleSelectConfig.placeholder\r\n      }}</span>\r\n\r\n      }\r\n    </div>\r\n    <span>\r\n      <!-- <i-feather name=\"chevron-up\"></i-feather> -->\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 src=\"images/x.svg\" class=\"cross_icon\" alt=\"\" />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n      filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{ option }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } } @else { @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            singleSelectConfig.disabledField &&\r\n            option[singleSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <span class=\"textTruncate\">{{\r\n          option[singleSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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:solid calc(.0833333333rem / var(--scale)) 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(--neutral-900);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.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .input_text{max-width:100%}.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:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-300);color:var(--neutral-600);border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.3333333333rem / 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{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-radius:calc(.6666666667rem / var(--scale));top:calc(5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.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 .disabled_option{opacity:.3;pointer-events:none}.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(--neutral-900)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li:first-child{border-radius:calc(.4166666667rem / var(--scale)) calc(.4166666667rem / var(--scale)) 0 0}.main-wrapper .dropdown-list ul li:last-child{border-radius:0 0 calc(.4166666667rem / var(--scale)) calc(.4166666667rem / 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 .search_icon{opacity:.4;flex-direction:row;justify-content:calc(2rem / var(--scale));align-items:calc(2rem / var(--scale));flex-wrap:nowrap;gap:0;display:flex}.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(--neutral-600)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{opacity:.7;cursor:pointer}.disable-control{pointer-events:none;opacity:.7;background-color:var(--blue-50)}.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}.placeholderColor{color:var(--neutral-400)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
+                type: Input
+            }], singleSelectConfig: [{
+                type: Input
+            }], selectedOption: [{
+                type: Input
+            }], onSelection: [{
+                type: Output
+            }], onScroll: [{
+                type: Output
+            }], parentNativeElement: [{
+                type: Input
+            }], selectedData: [{
+                type: ContentChild,
+                args: ['selectedData']
+            }], onTouched: [{
+                type: HostListener,
+                args: ['blur']
+            }], closeDropdown: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+const noop = () => { };
+const MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MultiSelectComponent),
+    multi: true,
+};
+const MULTI_SELECT_CONTROL_VALUE_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => MultiSelectComponent),
+    multi: true,
+};
+class MultiSelectComponent {
+    cd;
+    el;
+    optionList = [];
+    multiSelectConfig = new MultiSelectConfig();
+    selectedOptions = [];
+    onSelection = new EventEmitter();
+    control;
+    showDropdown = false;
+    isListArrayOfObject = false;
+    isSelectedAll = false;
+    inValid = false;
+    searchText = '';
+    disabledControl = false;
+    constructor(cd, el) {
+        this.cd = cd;
+        this.el = el;
+    }
+    // These lifecycle hooks will be in use for further implementation
+    ngOnInit() { }
+    ngOnChanges(_changes) {
+        if (_changes['optionList'].currentValue &&
+            _changes['optionList'].currentValue.length > 0) {
+            if (typeof this.optionList[0] === 'string' ||
+                typeof this.optionList[0] === 'number') {
+                this.optionList = this.optionList.map((option) => {
+                    const item = {
+                        [this.multiSelectConfig.idField]: option,
+                        [this.multiSelectConfig.textField]: option,
+                        isSelected: false,
+                    };
+                    if (this.multiSelectConfig.disabledField) {
+                        item[this.multiSelectConfig.disabledField] = false;
+                    }
+                    return item;
+                });
+            }
+            else {
+                this.isListArrayOfObject = true;
+                this.optionList = this.optionList.map((option) => {
+                    return {
+                        ...option,
+                        isSelected: false,
+                    };
+                });
+            }
+            if (this.optionList.length > 10)
+                this.multiSelectConfig.enableSearch = true;
+            this.writeValue(this.control?.value);
+        }
+    }
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+    }
+    /**
+     * @description Method to check if provide arg is an object or not
+     * @author Shiva Kant
+     * @param Obj:any
+     * @returns boolean
+     */
+    isObjEmpty(obj) {
+        return !(obj && Object.keys(obj).length > 0);
+    }
+    /**
+     * @description Method is to update selected option and then
+     * update formcontrol by call onChangeCallback.
+     * @author Shiva Kant
+     * @param item
+     * @returns void
+     */
+    updateSelectedOption(item) {
+        item.isSelected = !item.isSelected;
+        if (!item.isSelected) {
+            let ind = this.selectedOptions.findIndex((option) => item[this.multiSelectConfig.idField] == option[this.multiSelectConfig.idField]);
+            if (ind >= 0)
+                this.selectedOptions.splice(ind, 1);
+        }
+        else {
+            this.selectedOptions.push(item);
+        }
+        this.isSelectedAll = this.optionList.every((option) => option.isSelected == true);
+        this.inValid = false;
+        this.onChangeCallback(this.selectedOptions);
+        this.onTouchedCallback();
+        this.onSelection.emit(this.selectedOptions);
+        this.cd.markForCheck();
+    }
+    // Below Methods are used to register form API methods in these variable to use them later
+    onTouchedCallback = noop;
+    onChangeCallback = noop;
+    validate(control) {
+        this.control = control;
+    }
+    // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
+    /**
+     * @description method to update value of selectedOption
+     * @author Shiva Kant
+     * @param controlValue this is provided by formcontrol
+     * @returns void
+     */
+    writeValue(controlValue) {
+        if (this.optionList.length) {
+            this.selectedOptions = [];
+            if (controlValue && controlValue.length > 0) {
+                if (typeof controlValue[0] === 'string' ||
+                    typeof controlValue[0] === 'number') {
+                    controlValue = controlValue.map((option) => {
+                        return {
+                            [this.multiSelectConfig.idField]: option,
+                            [this.multiSelectConfig.textField]: option,
+                        };
+                    });
+                }
+                for (const option of controlValue) {
+                    let ind = this.optionList.findIndex((item) => item[this.multiSelectConfig.idField] == option[this.multiSelectConfig.idField] ||
+                        item[this.multiSelectConfig.textField] == option[this.multiSelectConfig.textField]);
+                    if (ind >= 0) {
+                        this.optionList[ind] = {
+                            ...this.optionList[ind],
+                            isSelected: true,
+                        };
+                        this.selectedOptions.push(this.optionList[ind]);
+                    }
+                }
+            }
+            this.isSelectedAll = this.optionList.every((option) => option.isSelected == true);
+            this.onChangeCallback(this.selectedOptions);
+            this.cd.markForCheck();
+        }
+    }
+    /**
+     * @description method to register on change callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @description method to register on touch callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    //willbe used in further implementation
+    setDisabledState(isDisabled) {
+        this.disabledControl = isDisabled;
+    }
+    /**
+     * @description method to update ontouchcallback on blur
+     * @author Shiva Kant
+     */
+    onTouched() {
+        this.onTouchedCallback();
+    }
+    /**
+     * @description method to toggle dropdown on outside click
+     * @author Shiva Kant
+     */
+    closeDropdown(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            if (this.showDropdown && this.multiSelectConfig.required) {
+                this.inValid = this.selectedOptions.length < 0;
+            }
+            this.showDropdown = false;
+        }
+    }
+    checkUncheckAll() {
+        if (this.isSelectedAll) {
+            this.optionList = this.optionList.map((option) => {
+                return { ...option, isSelected: false };
+            });
+            this.isSelectedAll = false;
+            this.selectedOptions = [];
+        }
+        else {
+            this.optionList = this.optionList.map((option) => {
+                return { ...option, isSelected: true };
+            });
+            this.isSelectedAll = true;
+            this.selectedOptions = [...this.optionList];
+        }
+        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: "19.2.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: "19.2.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    @if(multiSelectConfig.prefixLabel){\r\n    <span class=\"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=\"default_text 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\r\n    <span class=\"feather_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\" 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 src=\"images/x.svg\" class=\"cross_icon\" alt=\"\" />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n      <li (click)=\"checkUncheckAll()\">\r\n        <span class=\"checkbox_container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n          @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n        </span>\r\n      </li>\r\n      } @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            multiSelectConfig.disabledField &&\r\n            option[multiSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n        <span class=\"textTruncate\"\r\n          >{{ option[multiSelectConfig.textField] }}\r\n        </span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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 .checkbox_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.main-wrapper .checkbox_label_wrapper .query_text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(8.8333333333rem / var(--scale))}.main-wrapper .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{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:solid calc(.0833333333rem / var(--scale)) 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 .input_text,.main-wrapper .display-div .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-wrapper .display-div .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;order:2}.main-wrapper .display-div .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 .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .input_text .cross-icon{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .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(3rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));background-color:gray;color:#000;border-top-left-radius:calc(.4166666667rem / var(--scale));border-bottom-left-radius:calc(.4166666667rem / var(--scale));margin-top:calc(-.5833333333rem / var(--scale));margin-left:calc(-.8333333333rem / var(--scale));margin-right:calc(.8333333333rem / var(--scale))}.main-wrapper .display-div .label p{margin-bottom:0;max-width:calc(10.8333333333rem / var(--scale))}.main-wrapper .display-div .feather_icon{margin-left:auto;order:2}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .feather_icon{margin-left:calc(.8333333333rem / var(--scale));order:2}.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(5rem / 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 .search_icon{opacity:.4;flex-direction:row;justify-content:calc(2rem / var(--scale));align-items:calc(2rem / var(--scale));flex-wrap:nowrap;gap:0;display:flex}.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(--neutral-600)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{opacity:.7;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 .disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .add_chunk{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul .add_chunk img{max-width:calc(2rem / var(--scale))}.main-wrapper .dropdown-list ul .add_chunk .add_chunk_text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{cursor:default}.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(--neutral-900)}.main-wrapper .dropdown-list ul li:not(:first-child):hover{background-color:var(--neutral-50)}.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)}.placeholderColor{color:var(--neutral-400)}.disable-control{pointer-events:none;opacity:.7;background-color:var(--blue-50)}\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: "19.2.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    @if(multiSelectConfig.prefixLabel){\r\n    <span class=\"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=\"default_text 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\r\n    <span class=\"feather_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\" 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 src=\"images/x.svg\" class=\"cross_icon\" alt=\"\" />\r\n      </div>\r\n    </div>\r\n    }\r\n    <ul>\r\n      @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n      <li (click)=\"checkUncheckAll()\">\r\n        <span class=\"checkbox_container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n          @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n        </span>\r\n      </li>\r\n      } @for (option of filteredOptionsValue; track $index) {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedOption(option)\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            multiSelectConfig.disabledField &&\r\n            option[multiSelectConfig.disabledField]\r\n        }\"\r\n      >\r\n        <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n        <span class=\"textTruncate\"\r\n          >{{ option[multiSelectConfig.textField] }}\r\n        </span>\r\n      </li>\r\n      } @empty {\r\n      <li class=\"no_data\">No Data Found.</li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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 .checkbox_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.main-wrapper .checkbox_label_wrapper .query_text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(8.8333333333rem / var(--scale))}.main-wrapper .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{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:solid calc(.0833333333rem / var(--scale)) 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 .input_text,.main-wrapper .display-div .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-wrapper .display-div .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;order:2}.main-wrapper .display-div .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 .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .input_text .cross-icon{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .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(3rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));background-color:gray;color:#000;border-top-left-radius:calc(.4166666667rem / var(--scale));border-bottom-left-radius:calc(.4166666667rem / var(--scale));margin-top:calc(-.5833333333rem / var(--scale));margin-left:calc(-.8333333333rem / var(--scale));margin-right:calc(.8333333333rem / var(--scale))}.main-wrapper .display-div .label p{margin-bottom:0;max-width:calc(10.8333333333rem / var(--scale))}.main-wrapper .display-div .feather_icon{margin-left:auto;order:2}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .feather_icon{margin-left:calc(.8333333333rem / var(--scale));order:2}.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(5rem / 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 .search_icon{opacity:.4;flex-direction:row;justify-content:calc(2rem / var(--scale));align-items:calc(2rem / var(--scale));flex-wrap:nowrap;gap:0;display:flex}.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(--neutral-600)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{opacity:.7;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 .disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .add_chunk{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul .add_chunk img{max-width:calc(2rem / var(--scale))}.main-wrapper .dropdown-list ul .add_chunk .add_chunk_text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{cursor:default}.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(--neutral-900)}.main-wrapper .dropdown-list ul li:not(:first-child):hover{background-color:var(--neutral-50)}.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)}.placeholderColor{color:var(--neutral-400)}.disable-control{pointer-events:none;opacity:.7;background-color:var(--blue-50)}\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: "19.2.15", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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=\"seach_input\">\r\n  <div class=\"icon_warpper\">\r\n    <img src=\"images/search.svg\" alt=\"\" srcset=\"\">\r\n    <!-- <i-feather name=\"search\" class=\"search_icon\"></i-feather> -->\r\n  </div>\r\n\r\n  <input\r\n    type=\"text\"\r\n    [value]=\"searchParam\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n    <!-- [placeholder]=\"searchConfig?.placeholder\" -->\r\n\r\n  @if (searchParam.length > 0) {\r\n  <div class=\"cross_icon_wrapper cross_icon\">\r\n      <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\">\r\n    <!-- // <i-feather name=\"x\" (click)=\"closeSearchBar()\" /> -->\r\n  </div>\r\n\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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}.searchBar{position:relative;width:calc(48.3333333333rem / var(--scale));height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);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:0;margin-right:calc(.25rem / var(--scale))}.searchBar i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.searchBar input{height:100%;width:100%;border:0;padding-left:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary)}.searchBar input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500}.searchBar .search_img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.searchBar .custom_feather_cross{stroke:var(--white);fill:var(--textSecondary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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=\"seach_input\">\r\n  <div class=\"icon_warpper\">\r\n    <img src=\"images/search.svg\" alt=\"\" srcset=\"\">\r\n    <!-- <i-feather name=\"search\" class=\"search_icon\"></i-feather> -->\r\n  </div>\r\n\r\n  <input\r\n    type=\"text\"\r\n    [value]=\"searchParam\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n    <!-- [placeholder]=\"searchConfig?.placeholder\" -->\r\n\r\n  @if (searchParam.length > 0) {\r\n  <div class=\"cross_icon_wrapper cross_icon\">\r\n      <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\">\r\n    <!-- // <i-feather name=\"x\" (click)=\"closeSearchBar()\" /> -->\r\n  </div>\r\n\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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}.searchBar{position:relative;width:calc(48.3333333333rem / var(--scale));height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);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:0;margin-right:calc(.25rem / var(--scale))}.searchBar i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.searchBar input{height:100%;width:100%;border:0;padding-left:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary)}.searchBar input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500}.searchBar .search_img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.searchBar .custom_feather_cross{stroke:var(--white);fill:var(--textSecondary);cursor:pointer}\n"] }]
+        }], propDecorators: { searchConfig: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], searchParamValue: [{
+                type: Output
+            }] } });
+
+class OutsideClickDirective {
+    elementRef;
+    clickOutSide = new EventEmitter();
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    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: "19.2.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.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: "19.2.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']]
+            }] } });
+
+;
+class AutoCompleteSingleSelectComponent {
+    autoSingleSelectConfig = new AutoCompleteSingleSelectConfig();
+    selectedItem;
+    optionsList = [];
+    parentNativeElement;
+    onItemSelection = new EventEmitter();
+    onScroll = new EventEmitter();
+    showDropdown = false;
+    inputValue = '';
+    selectedOption;
+    constructor() { }
+    ngOnInit() { }
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+        if (this.parentNativeElement) {
+            this.parentNativeElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+            let parentDiv = document.getElementById(this.parentNativeElement);
+            setTimeout(() => {
+                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
+                let dropdonwList = document.getElementById('container_scroll');
+                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
+                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
+                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
+                }
+            }, 20);
+        }
+    }
+    /**
+     * @description method to update selected item
+     * @author Shiva Kant
+     * @param item this is selected item from list
+     * @param type type of list
+     * @returns none
+     */
+    updateSelectedItem(item, type) {
+        if (type == 'object') {
+            this.inputValue = item[this.autoSingleSelectConfig.textField];
+        }
+        else {
+            this.inputValue = item;
+        }
+        this.selectedOption = item;
+        this.showDropdown = false;
+        this.onItemSelection.emit(this.selectedOption);
+    }
+    /**
+     * @description this method is use to update input value
+     */
+    updateInputValue() {
+        let data = this.selectedOption;
+        if (!data ||
+            (typeof data == 'object'
+                ? data[this.autoSingleSelectConfig.textField] != this.inputValue
+                : data != this.inputValue)) {
+            data = this.inputValue;
+            if (this.isObject(this.optionsList?.[0])) {
+                data = {
+                    [this.autoSingleSelectConfig.idField]: null,
+                    [this.autoSingleSelectConfig.textField]: this.inputValue,
+                };
+            }
+        }
+        this.onItemSelection.emit(data);
+    }
+    /**
+     * @description method to update dropdown list state on input type
+     * @author Shiva Kant
+     */
+    updateDropdownStatus() {
+        this.showDropdown = !!this.inputValue;
+    }
+    /**
+     * @description method to check if the list is Array of string or object
+     * @author Shiva Kant
+     * @param data this is the any one one item of list
+     * @returns boolean
+     */
+    isObject(data) {
+        const type = typeof data;
+        return data && type != 'string';
+    }
+    /**
+     * @description This method is use to close dropdown on click outside
+     */
+    outsideClicked() {
+        if (this.showDropdown) {
+            if (this.autoSingleSelectConfig.customInput) {
+                this.updateInputValue();
+            }
+        }
+        this.showDropdown = false;
+    }
+    onClickEnter(control) {
+        if (this.autoSingleSelectConfig.customInput) {
+            this.updateInputValue();
+        }
+    }
+    /**
+     * @description method to load more list
+     * @author Shiva Kant
+     * @param event
+     */
+    onDivScroll(event) {
+        if (event.target.offsetHeight + event.target.scrollTop >=
+            event.target.scrollHeight - 1 &&
+            this.optionsList.length) {
+            this.onScroll.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, ngImport: i0, template: "-\r\n<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n  <div class=\"input_container\">\r\n    <div class=\"input_box\">\r\n      <input\r\n        class=\"textTruncate\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        (keyup.enter)=\"onClickEnter(inputValue)\"\r\n        (keyup)=\"updateDropdownStatus()\"\r\n        [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n      />\r\n    </div>\r\n    <div class=\"drop_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                ? 'opacity-50 pe-none'\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                ? 'opacity-50 pe-none'\r\n                : ''\r\n            \"\r\n            (click)=\"updateSelectedItem(item, 'string')\"\r\n          >\r\n            {{ item }}\r\n          </li>\r\n\r\n          } </ng-container\r\n        >}\r\n      </ul></ng-container\r\n    >}\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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(--neutral-900);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 .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(5rem / 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(--neutral-900)}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}.disableInput .input-container{pointer-events:none;background-color:#e4e4e4;border:1px solid #afafaf;border-radius:3px}.disableInput .input-container input{pointer-events:none;background-color:#e4e4e4}\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: "19.2.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-auto-complete-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "-\r\n<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n  <div class=\"input_container\">\r\n    <div class=\"input_box\">\r\n      <input\r\n        class=\"textTruncate\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        (keyup.enter)=\"onClickEnter(inputValue)\"\r\n        (keyup)=\"updateDropdownStatus()\"\r\n        [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n      />\r\n    </div>\r\n    <div class=\"drop_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                ? 'opacity-50 pe-none'\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                ? 'opacity-50 pe-none'\r\n                : ''\r\n            \"\r\n            (click)=\"updateSelectedItem(item, 'string')\"\r\n          >\r\n            {{ item }}\r\n          </li>\r\n\r\n          } </ng-container\r\n        >}\r\n      </ul></ng-container\r\n    >}\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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(--neutral-900);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 .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(5rem / 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(--neutral-900)}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}.disableInput .input-container{pointer-events:none;background-color:#e4e4e4;border:1px solid #afafaf;border-radius:3px}.disableInput .input-container input{pointer-events:none;background-color:#e4e4e4}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autoSingleSelectConfig: [{
+                type: Input
+            }], selectedItem: [{
+                type: Input
+            }], optionsList: [{
+                type: Input
+            }], parentNativeElement: [{
+                type: Input
+            }], onItemSelection: [{
+                type: Output
+            }], onScroll: [{
+                type: Output
+            }] } });
+
+class AutoCompleteMultiSelectComponent {
+    autoCompleteMultiSelectConfig;
+    selectedItem;
+    optionsList = [];
+    parentNativeElement;
+    onItemSelection = new EventEmitter();
+    onScroll = new EventEmitter();
+    showDropdown = false;
+    inputValue = '';
+    selectedOptions = [];
+    isSelectedAll = false;
+    constructor() { }
+    ngOnInit() { }
+    ngOnChanges() {
+        this.applyDefaultConfig();
+    }
+    applyDefaultConfig() {
+        const defaults = new AutoCompleteMultiSelectConfig();
+        this.autoCompleteMultiSelectConfig = {
+            ...defaults,
+            ...this.autoCompleteMultiSelectConfig,
+        };
+    }
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+        if (this.parentNativeElement) {
+            this.parentNativeElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+            let parentDiv = document.getElementById(this.parentNativeElement);
+            setTimeout(() => {
+                let parentBoundary = parentDiv?.getBoundingClientRect() || {};
+                let dropdonwList = document.getElementById('container_scroll');
+                let elBoundary = dropdonwList?.getBoundingClientRect() || {};
+                if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
+                    dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
+                }
+            }, 20);
+        }
+    }
+    /**
+     * @description method to update selected item
+     * @author Shiva Kant
+     * @param item this is selected item from list
+     * @param type type of list
+     * @returns none
+     */
+    updateSelectedItem(item, type) {
+        if (type === 'object') {
+            // Toggle the option's isSelected
+            item.isSelected = !item.isSelected;
+            if (item.isSelected) {
+                // add to selectedOptions if not already present
+                const exists = this.selectedOptions.some((opt) => this.isObject(opt) &&
+                    opt[this.autoCompleteMultiSelectConfig.textField] ===
+                        item[this.autoCompleteMultiSelectConfig.textField]);
+                if (!exists)
+                    this.selectedOptions.push(item);
+            }
+            else {
+                // remove from selectedOptions
+                this.selectedOptions = this.selectedOptions.filter((opt) => !(this.isObject(opt) &&
+                    opt[this.autoCompleteMultiSelectConfig.textField] ===
+                        item[this.autoCompleteMultiSelectConfig.textField]));
+            }
+        }
+        else {
+            // string type
+            const existsIndex = this.selectedOptions.findIndex((opt) => opt === item);
+            if (existsIndex > -1) {
+                // remove
+                this.selectedOptions.splice(existsIndex, 1);
+            }
+            else {
+                // add
+                this.selectedOptions.push(item);
+            }
+            // If optionsList contains this string, also toggle its isSelected there
+            const idxInOptions = this.optionsList.findIndex((o) => typeof o === 'string' && o === item);
+            if (idxInOptions > -1) {
+                // toggle corresponding option's isSelected
+                const opt = this.optionsList[idxInOptions];
+                opt.isSelected = !opt.isSelected;
+            }
+        }
+        // keep select all state consistent
+        this.updateSelectAllState();
+        this.onItemSelection.emit(this.selectedOptions);
+    }
+    /**
+     * @description method to checkUncheckAll
+     * @author Shiva Kant
+     */
+    checkUncheckAll(event) {
+        if (event)
+            event.stopPropagation();
+        this.isSelectedAll = !this.isSelectedAll;
+        this.optionsList.forEach((item) => {
+            if (!this.autoCompleteMultiSelectConfig.disabledField ||
+                !item[this.autoCompleteMultiSelectConfig.disabledField]) {
+                item.isSelected = this.isSelectedAll;
+            }
+        });
+        // Keep custom values intact
+        const customChips = this.selectedOptions.filter((opt) => this.isObject(opt)
+            ? !this.optionsList.some((o) => o[this.autoCompleteMultiSelectConfig.textField] ===
+                opt[this.autoCompleteMultiSelectConfig.textField])
+            : !this.optionsList.includes(opt));
+        const selectedOptionItems = this.optionsList.filter((opt) => opt.isSelected);
+        this.selectedOptions = [...customChips, ...selectedOptionItems];
+        this.onItemSelection.emit(this.selectedOptions);
+    }
+    /**
+     * @description method to removeChip
+     * @author Shiva Kant
+     */
+    removeChip(item) {
+        // Remove from selectedOptions
+        this.selectedOptions = this.selectedOptions.filter((opt) => this.isObject(opt)
+            ? opt[this.autoCompleteMultiSelectConfig.textField] !==
+                (this.isObject(item)
+                    ? item[this.autoCompleteMultiSelectConfig.textField]
+                    : item)
+            : opt !== item);
+        // If item corresponds to an optionsList entry, unselect it there too
+        if (this.isObject(item)) {
+            const idx = this.optionsList.findIndex((o) => this.isObject(o) &&
+                o[this.autoCompleteMultiSelectConfig.textField] ===
+                    item[this.autoCompleteMultiSelectConfig.textField]);
+            if (idx > -1) {
+                (this.optionsList[idx]).isSelected = false;
+            }
+        }
+        else {
+            // string case
+            const idx = this.optionsList.findIndex((o) => o === item);
+            if (idx > -1) {
+                (this.optionsList[idx]).isSelected = false;
+            }
+        }
+        // update select all state & emit
+        this.updateSelectAllState();
+        this.onItemSelection.emit(this.selectedOptions);
+    }
+    /**
+     * @description method to update dropdown list state on input type
+     * @author Shiva Kant
+     */
+    updateDropdownStatus() {
+        this.showDropdown = true;
+    }
+    /**
+     * @description method to check if the list is Array of string or object
+     * @author Shiva Kant
+     * @param data this is the any one one item of list
+     * @returns boolean
+     */
+    isObject(data) {
+        const type = typeof data;
+        return data && type != 'string';
+    }
+    /**
+     * @description This method is use to close dropdown on onClickEnter
+     * @author Shiva Kant
+     */
+    onClickEnter(control) {
+        if (!this.inputValue.trim())
+            return;
+        // pattern check
+        if (this.autoCompleteMultiSelectConfig.pattern) {
+            const regex = new RegExp(this.autoCompleteMultiSelectConfig.pattern);
+            if (!regex.test(this.inputValue)) {
+                this.inputValue = '';
+                return;
+            }
+        }
+        const val = this.inputValue.trim();
+        const valLower = val.toLowerCase();
+        // Avoid duplicate
+        const exists = this.selectedOptions.some((opt) => this.isObject(opt)
+            ? opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
+                valLower
+            : opt.toLowerCase() === valLower);
+        if (exists) {
+            this.inputValue = '';
+            return;
+        }
+        // Try find matched item in optionsList
+        const matchedItem = this.isObject(this.optionsList?.[0])
+            ? this.optionsList.find((opt) => opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
+                valLower)
+            : this.optionsList.find((opt) => opt.toLowerCase() === valLower);
+        if (matchedItem) {
+            // If matched, ensure option is marked selected and present in selectedOptions
+            matchedItem.isSelected = true;
+            const already = this.selectedOptions.some((opt) => this.isObject(opt)
+                ? opt[this.autoCompleteMultiSelectConfig.textField] ===
+                    matchedItem[this.autoCompleteMultiSelectConfig.textField]
+                : opt === matchedItem);
+            if (!already)
+                this.selectedOptions.push(matchedItem);
+        }
+        else if (this.autoCompleteMultiSelectConfig.customInput) {
+            // create custom item and mark it selected
+            let newItem = val;
+            if (this.isObject(this.optionsList?.[0])) {
+                newItem = {
+                    [this.autoCompleteMultiSelectConfig.idField]: null,
+                    [this.autoCompleteMultiSelectConfig.textField]: val,
+                    isSelected: true, // mark selected for consistency
+                    __isCustom: true, // optional flag to identify custom items
+                };
+            }
+            this.selectedOptions.push(newItem);
+        }
+        // reset input but keep dropdown open (as you wanted)
+        this.inputValue = '';
+        // update select all state and emit
+        this.updateSelectAllState();
+        this.onItemSelection.emit(this.selectedOptions);
+    }
+    outsideClicked() {
+        this.showDropdown = false;
+    }
+    /**
+     * @description method to load more list
+     * @author Shiva Kant
+     * @param event
+     */
+    onDivScroll(event) {
+        if (event.target.offsetHeight + event.target.scrollTop >=
+            event.target.scrollHeight - 1 &&
+            this.optionsList.length) {
+            this.onScroll.emit();
+        }
+    }
+    updateSelectAllState() {
+        // only consider non-disabled items for select-all state
+        const selectable = this.optionsList.filter((opt) => !(this.autoCompleteMultiSelectConfig.disabledField &&
+            opt[this.autoCompleteMultiSelectConfig.disabledField]));
+        this.isSelectedAll =
+            selectable.length > 0 && selectable.every((opt) => !!opt.isSelected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-multi-select", inputs: { autoCompleteMultiSelectConfig: "autoCompleteMultiSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\">\r\n  <div\r\n    class=\"input_container\"\r\n    catsOutsideClick\r\n    (clickOutSide)=\"outsideClicked()\"\r\n  >\r\n    <div class=\"chips_wrapper\">\r\n      <!-- Chips -->\r\n      @for (item of selectedOptions; track $index) { @if ($index <\r\n      autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n        <span class=\"textTruncate\">\r\n          {{\r\n            isObject(item)\r\n              ? item[autoCompleteMultiSelectConfig.textField]\r\n              : item\r\n          }}\r\n        </span>\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n        />\r\n      </div>\r\n      } }\r\n      <!-- +N counter -->\r\n      @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"view_more\">\r\n        +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n      </div>\r\n      }\r\n      <!-- Input Box (always available) -->\r\n      <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"inputValue\"\r\n          (keyup.enter)=\"onClickEnter()\"\r\n          (keyup)=\"updateDropdownStatus()\"\r\n          [placeholder]=\"\r\n            selectedOptions.length === 0\r\n              ? autoCompleteMultiSelectConfig.placeholder\r\n              : ''\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dropdown toggle -->\r\n    <div class=\"drop_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\">\r\n    <ul>\r\n      <!-- Select All -->\r\n      @if (autoCompleteMultiSelectConfig.selectAll) {\r\n      <li\r\n        class=\"checkbox_container select_all_item\"\r\n        (click)=\"checkUncheckAll($event)\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"isSelectedAll\"\r\n          (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n        />\r\n        <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n      </li>\r\n      }\r\n\r\n      <!-- Object Options -->\r\n      @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n      .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n      <li\r\n        class=\"checkbox_container\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            autoCompleteMultiSelectConfig.disabledField &&\r\n            item[autoCompleteMultiSelectConfig.disabledField]\r\n        }\"\r\n        (click)=\"updateSelectedItem(item, 'object')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"item.isSelected\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n        />\r\n\r\n        <span class=\"textTruncate\">{{\r\n          item[autoCompleteMultiSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } } }\r\n\r\n      <!-- String Options -->\r\n      @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n      == \"\") {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedItem(item, 'string')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"selectedOptions.includes(item)\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n        />\r\n        <span class=\"textTruncate\">{{ item }}</span>\r\n      </li>\r\n      } } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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(--neutral-900);flex:1;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 .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(5rem / 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(--neutral-900)}.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:not(:first-child):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: "19.2.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-auto-complete-multi-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\">\r\n  <div\r\n    class=\"input_container\"\r\n    catsOutsideClick\r\n    (clickOutSide)=\"outsideClicked()\"\r\n  >\r\n    <div class=\"chips_wrapper\">\r\n      <!-- Chips -->\r\n      @for (item of selectedOptions; track $index) { @if ($index <\r\n      autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n        <span class=\"textTruncate\">\r\n          {{\r\n            isObject(item)\r\n              ? item[autoCompleteMultiSelectConfig.textField]\r\n              : item\r\n          }}\r\n        </span>\r\n        <img\r\n          src=\"images/x.svg\"\r\n          class=\"cross_icon\"\r\n          (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n        />\r\n      </div>\r\n      } }\r\n      <!-- +N counter -->\r\n      @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n      <div class=\"view_more\">\r\n        +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n      </div>\r\n      }\r\n      <!-- Input Box (always available) -->\r\n      <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"inputValue\"\r\n          (keyup.enter)=\"onClickEnter()\"\r\n          (keyup)=\"updateDropdownStatus()\"\r\n          [placeholder]=\"\r\n            selectedOptions.length === 0\r\n              ? autoCompleteMultiSelectConfig.placeholder\r\n              : ''\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dropdown toggle -->\r\n    <div class=\"drop_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\">\r\n    <ul>\r\n      <!-- Select All -->\r\n      @if (autoCompleteMultiSelectConfig.selectAll) {\r\n      <li\r\n        class=\"checkbox_container select_all_item\"\r\n        (click)=\"checkUncheckAll($event)\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"isSelectedAll\"\r\n          (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n        />\r\n        <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n      </li>\r\n      }\r\n\r\n      <!-- Object Options -->\r\n      @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n      .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n      <li\r\n        class=\"checkbox_container\"\r\n        [ngClass]=\"{\r\n          disabled_option:\r\n            autoCompleteMultiSelectConfig.disabledField &&\r\n            item[autoCompleteMultiSelectConfig.disabledField]\r\n        }\"\r\n        (click)=\"updateSelectedItem(item, 'object')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"item.isSelected\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n        />\r\n\r\n        <span class=\"textTruncate\">{{\r\n          item[autoCompleteMultiSelectConfig.textField]\r\n        }}</span>\r\n      </li>\r\n      } } }\r\n\r\n      <!-- String Options -->\r\n      @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n      { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n      == \"\") {\r\n      <li\r\n        class=\"checkbox_container\"\r\n        (click)=\"updateSelectedItem(item, 'string')\"\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"selectedOptions.includes(item)\"\r\n          (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n        />\r\n        <span class=\"textTruncate\">{{ item }}</span>\r\n      </li>\r\n      } } }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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(--neutral-900);flex:1;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 .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(5rem / 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(--neutral-900)}.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:not(:first-child):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: "19.2.15", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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)}:root{--fs-6: 6px;--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-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-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-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%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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)}:root{--fs-6: 6px;--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-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-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-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%}\n"] }]
+        }], propDecorators: { toggleConfig: [{
+                type: Input
+            }], onToggled: [{
+                type: Output
+            }] } });
+
+class CheckboxButtonComponent {
+    checkBoxConfig = [];
+    onCheckBoxSelection = new EventEmitter();
+    selectedOptions = [];
+    onChange = () => { };
+    onTouched = () => { };
+    ngOnChanges() {
+        if (this.selectedOptions?.length) {
+            this.applySelectedOptions();
+        }
+    }
+    /**
+     * @description Method is to Apply selectedOptions on input change
+     * @author Shiva Kant
+     */
+    applySelectedOptions() {
+        this.checkBoxConfig = this.checkBoxConfig.map((task) => {
+            const parentChecked = this.selectedOptions.includes(task.id) ||
+                this.selectedOptions.includes(task.name);
+            const updatedSubtasks = (task.subtasks ?? []).map((sub) => {
+                const subChecked = this.selectedOptions.includes(sub.id) ||
+                    this.selectedOptions.includes(sub.name);
+                return { ...sub, checked: subChecked ?? false };
+            });
+            const hasCheckedSub = updatedSubtasks.some((s) => s.checked);
+            return {
+                ...task,
+                checked: parentChecked || hasCheckedSub,
+                subtasks: updatedSubtasks,
+            };
+        });
+    }
+    /**
+     * @description Method is to Checkbox change handler
+     * @author Shiva Kant
+     */
+    onCheckboxChange(event, parentIndex, subIndex) {
+        const checked = event.target.checked;
+        this.checkBoxConfig = this.checkBoxConfig.map((task, i) => {
+            // Ensure `checked` and `subtasks` always exist safely
+            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: checked,
+                    }));
+                }
+                else if (safeTask.subtasks[subIndex]) {
+                    // Subtask toggled safely
+                    safeTask.subtasks[subIndex].checked = checked;
+                    // Parent becomes checked only if all subtasks are checked
+                    safeTask.checked = safeTask.subtasks.every((sub) => sub.checked);
+                }
+            }
+            return safeTask;
+        });
+        // Emit only checked items
+        const checkedTasks = this.checkBoxConfig
+            .filter((task) => (task.checked ?? false) ||
+            task.subtasks?.some((s) => s.checked ?? false))
+            .map((task) => ({
+            ...task,
+            checked: (task.checked ?? false) ||
+                task.subtasks?.some((s) => s.checked ?? false),
+            subtasks: task.subtasks?.filter((s) => s.checked ?? false) || [],
+        }));
+        this.onCheckBoxSelection.emit(checkedTasks);
+        this.onChange(this.checkBoxConfig);
+        this.onTouched();
+    }
+    // --- Indeterminate state for parent ---
+    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.checkBoxConfig = value.map((task) => ({
+                ...task,
+                subtasks: task.subtasks ? [...task.subtasks] : [],
+            }));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.checkBoxConfig.forEach((task) => {
+                task.checked = false;
+                task.subtasks?.forEach((sub) => (sub.checked = false));
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CheckboxButtonComponent, isStandalone: true, selector: "cats-ui-checkbox-button", inputs: { checkBoxConfig: "checkBoxConfig", 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 checkBoxConfig; 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          [checked]=\"task.checked\"\r\n          [indeterminate]=\"partiallyComplete(task)\"\r\n          (change)=\"onCheckboxChange($event, $index)\"\r\n        />\r\n        <span class=\"textTruncate\">{{ task.name }}</span>\r\n      </label>\r\n      <!-- Subtasks -->\r\n      @if (task.subtasks && task.subtasks.length > 0) {\r\n      <ul>\r\n        @for ( sub of task.subtasks; let idx = $index ;track $index; ) {\r\n        <li class=\"checkbox_container sub\">\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=\"textTruncate\">{{ sub.name }}</span>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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]{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: "19.2.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 checkBoxConfig; 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          [checked]=\"task.checked\"\r\n          [indeterminate]=\"partiallyComplete(task)\"\r\n          (change)=\"onCheckboxChange($event, $index)\"\r\n        />\r\n        <span class=\"textTruncate\">{{ task.name }}</span>\r\n      </label>\r\n      <!-- Subtasks -->\r\n      @if (task.subtasks && task.subtasks.length > 0) {\r\n      <ul>\r\n        @for ( sub of task.subtasks; let idx = $index ;track $index; ) {\r\n        <li class=\"checkbox_container sub\">\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=\"textTruncate\">{{ sub.name }}</span>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-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-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-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-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]{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
+            }], selectedOptions: [{
+                type: Input
+            }] } });
+
+class RadioButtonComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RadioButtonComponent, isStandalone: true, selector: "cats-ui-radio-button", ngImport: i0, template: "<p>radio-button works!</p>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-ui-radio-button', imports: [], template: "<p>radio-button works!</p>\r\n" }]
+        }] });
+
+/*
+ * Public API Surface of cats-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, ToggleConfig, ToogleButtonComponent };
+//# sourceMappingURL=cats-ui.mjs.map