cats-ui-lib 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/{cats-ui.mjs → cats-ui-lib.mjs} +155 -77
  2. package/fesm2022/cats-ui-lib.mjs.map +1 -0
  3. package/index.d.ts +13 -2
  4. package/package.json +3 -3
  5. package/fesm2022/cats-ui.mjs.map +0 -1
package/fesm2022/{cats-ui.mjs → cats-ui-lib.mjs} RENAMED
@@ -7,10 +7,10 @@ import { Validators, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angu
7
7
 
8
8
  class CatsUiService {
9
9
  constructor() { }
10
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
11
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, providedIn: 'root' });
10
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
11
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, providedIn: 'root' });
12
12
  }
13
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, decorators: [{
13
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, decorators: [{
14
14
  type: Injectable,
15
15
  args: [{
16
16
  providedIn: 'root'
@@ -99,8 +99,8 @@ class InputComponent {
99
99
  togglePassword() {
100
100
  this.showPassword = !this.showPassword;
101
101
  }
102
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
103
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, providers: [
102
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, host: { attributes: { "tabindex": "0" } }, providers: [
104
104
  {
105
105
  provide: NG_VALUE_ACCESSOR,
106
106
  useExisting: forwardRef(() => InputComponent),
@@ -111,9 +111,9 @@ class InputComponent {
111
111
  useExisting: forwardRef(() => InputComponent),
112
112
  multi: true,
113
113
  },
114
- ], ngImport: i0, template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
114
+ ], ngImport: i0, template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
115
115
  }
116
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
117
117
  type: Component,
118
118
  args: [{ selector: 'cats-ui-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
119
119
  {
@@ -126,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
126
126
  useExisting: forwardRef(() => InputComponent),
127
127
  multi: true,
128
128
  },
129
- ], template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"] }]
129
+ ], host: { tabindex: '0' }, template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"] }]
130
130
  }], propDecorators: { inputConfig: [{
131
131
  type: Input
132
132
  }], onKeyDown: [{
@@ -414,17 +414,17 @@ class SingleSelectComponent {
414
414
  }
415
415
  });
416
416
  }
417
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
418
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SingleSelectComponent, isStandalone: true, selector: "cats-ui-single-select", inputs: { optionList: "optionList", singleSelectConfig: "singleSelectConfig", selectedOption: "selectedOption", parentNativeElement: "parentNativeElement" }, outputs: { onSelection: "onSelection", onScroll: "onScroll" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
417
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
418
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SingleSelectComponent, isStandalone: true, selector: "cats-ui-single-select", inputs: { optionList: "optionList", singleSelectConfig: "singleSelectConfig", selectedOption: "selectedOption", parentNativeElement: "parentNativeElement" }, outputs: { onSelection: "onSelection", onScroll: "onScroll" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
419
419
  {
420
420
  provide: NG_VALUE_ACCESSOR,
421
421
  useExisting: SingleSelectComponent,
422
422
  multi: true,
423
423
  },
424
424
  SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
425
- ], queries: [{ propertyName: "selectedData", first: true, predicate: ["selectedData"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
425
+ ], queries: [{ propertyName: "selectedData", first: true, predicate: ["selectedData"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);padding:0}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
426
426
  }
427
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
427
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SingleSelectComponent, decorators: [{
428
428
  type: Component,
429
429
  args: [{ selector: 'cats-ui-single-select', imports: [CommonModule, FormsModule], providers: [
430
430
  {
@@ -433,7 +433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
433
433
  multi: true,
434
434
  },
435
435
  SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
436
- ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"] }]
436
+ ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);padding:0}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"] }]
437
437
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
438
438
  type: Input
439
439
  }], singleSelectConfig: [{
@@ -680,18 +680,18 @@ class MultiSelectComponent {
680
680
  ?.toLowerCase()
681
681
  .includes(this.searchText.toLowerCase()));
682
682
  }
683
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
684
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MultiSelectComponent, isStandalone: true, selector: "cats-ui-multi-select", inputs: { optionList: "optionList", multiSelectConfig: "multiSelectConfig", selectedOptions: "selectedOptions" }, outputs: { onSelection: "onSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
683
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
684
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MultiSelectComponent, isStandalone: true, selector: "cats-ui-multi-select", inputs: { optionList: "optionList", multiSelectConfig: "multiSelectConfig", selectedOptions: "selectedOptions" }, outputs: { onSelection: "onSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
685
685
  MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
686
686
  MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
687
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
687
+ ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);padding:0}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
688
688
  }
689
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, decorators: [{
689
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
690
690
  type: Component,
691
691
  args: [{ selector: 'cats-ui-multi-select', imports: [NgClass, FormsModule], providers: [
692
692
  MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
693
693
  MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
694
- ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
694
+ ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);padding:0}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
695
695
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
696
696
  type: Input
697
697
  }], multiSelectConfig: [{
@@ -752,16 +752,16 @@ class SearchBoxComponent {
752
752
  setDisabledState(isDisabled) {
753
753
  this.isDisabled = isDisabled;
754
754
  }
755
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
756
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchBoxComponent, isStandalone: true, selector: "cats-ui-search-box", inputs: { searchConfig: "searchConfig" }, outputs: { onClose: "onClose", searchParamValue: "searchParamValue" }, providers: [
755
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
756
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SearchBoxComponent, isStandalone: true, selector: "cats-ui-search-box", inputs: { searchConfig: "searchConfig" }, outputs: { onClose: "onClose", searchParamValue: "searchParamValue" }, providers: [
757
757
  {
758
758
  provide: NG_VALUE_ACCESSOR,
759
759
  useExisting: forwardRef(() => SearchBoxComponent),
760
760
  multi: true,
761
761
  },
762
- ], ngImport: i0, template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
762
+ ], ngImport: i0, template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--default);padding:0}.search_input input::placeholder{color:var(--neutral-400);font-size:var(--fs-16);line-height:140%;font-weight:400}.search_input .cross_icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
763
763
  }
764
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchBoxComponent, decorators: [{
764
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, decorators: [{
765
765
  type: Component,
766
766
  args: [{ selector: 'cats-ui-search-box', imports: [FormsModule], providers: [
767
767
  {
@@ -769,7 +769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
769
769
  useExisting: forwardRef(() => SearchBoxComponent),
770
770
  multi: true,
771
771
  },
772
- ], template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"] }]
772
+ ], template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--default);padding:0}.search_input input::placeholder{color:var(--neutral-400);font-size:var(--fs-16);line-height:140%;font-weight:400}.search_input .cross_icon{cursor:pointer}\n"] }]
773
773
  }], propDecorators: { searchConfig: [{
774
774
  type: Input
775
775
  }], onClose: [{
@@ -801,10 +801,10 @@ class OutsideClickDirective {
801
801
  this.clickOutSide.emit(event);
802
802
  }
803
803
  }
804
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
805
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OutsideClickDirective, isStandalone: true, selector: "[catsOutsideClick]", outputs: { clickOutSide: "clickOutSide" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
804
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
805
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: OutsideClickDirective, isStandalone: true, selector: "[catsOutsideClick]", outputs: { clickOutSide: "clickOutSide" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
806
806
  }
807
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
807
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, decorators: [{
808
808
  type: Directive,
809
809
  args: [{
810
810
  selector: '[catsOutsideClick]',
@@ -1004,17 +1004,17 @@ class AutoCompleteSingleSelectComponent {
1004
1004
  this.onScroll.emit();
1005
1005
  }
1006
1006
  }
1007
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1008
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-input-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", placeholder: "placeholder", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, providers: [
1007
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1008
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-input-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", placeholder: "placeholder", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, host: { attributes: { "tabindex": "0" } }, providers: [
1009
1009
  {
1010
1010
  provide: NG_VALUE_ACCESSOR,
1011
1011
  useExisting: AutoCompleteSingleSelectComponent,
1012
1012
  multi: true,
1013
1013
  },
1014
1014
  DROPDOWN_CONTROL_VALUE_VALIDATOR,
1015
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
1015
+ ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale))}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer;height:inherit}.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;padding:0}.main_container .input_container .input_box input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
1016
1016
  }
1017
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
1017
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
1018
1018
  type: Component,
1019
1019
  args: [{ selector: 'cats-ui-input-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], providers: [
1020
1020
  {
@@ -1023,7 +1023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
1023
1023
  multi: true,
1024
1024
  },
1025
1025
  DROPDOWN_CONTROL_VALUE_VALIDATOR,
1026
- ], template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"] }]
1026
+ ], host: { tabindex: '0' }, template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale))}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer;height:inherit}.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;padding:0}.main_container .input_container .input_box input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"] }]
1027
1027
  }], ctorParameters: () => [], propDecorators: { autoSingleSelectConfig: [{
1028
1028
  type: Input
1029
1029
  }], placeholder: [{
@@ -1051,11 +1051,20 @@ class AutoCompleteMultiSelectComponent {
1051
1051
  inputValue = '';
1052
1052
  selectedOptions = [];
1053
1053
  isSelectedAll = false;
1054
+ inValid = false;
1055
+ control;
1056
+ isDisabled = false;
1054
1057
  constructor() { }
1055
1058
  ngOnInit() { }
1056
- ngOnChanges() {
1057
- this.applyDefaultConfig();
1059
+ ngOnChanges(_changes) {
1060
+ if (!_changes['optionList']?.currentValue) {
1061
+ }
1062
+ else {
1063
+ this.writeValue(this.control?.value);
1064
+ }
1058
1065
  }
1066
+ onChange = () => { };
1067
+ onTouched = () => { };
1059
1068
  applyDefaultConfig() {
1060
1069
  const defaults = new AutoCompleteMultiSelectConfig();
1061
1070
  this.autoCompleteMultiSelectConfig = {
@@ -1085,6 +1094,45 @@ class AutoCompleteMultiSelectComponent {
1085
1094
  }, 20);
1086
1095
  }
1087
1096
  }
1097
+ writeValue(value) {
1098
+ if (Array.isArray(value)) {
1099
+ this.selectedOptions = value;
1100
+ // sync optionsList selection
1101
+ this.optionsList.forEach((opt) => {
1102
+ opt.isSelected = value.some((v) => this.isObject(v)
1103
+ ? v[this.autoCompleteMultiSelectConfig.textField] ===
1104
+ opt[this.autoCompleteMultiSelectConfig.textField]
1105
+ : v === opt);
1106
+ });
1107
+ this.onChange(this.selectedOptions);
1108
+ this.onTouched();
1109
+ this.updateSelectAllState();
1110
+ }
1111
+ }
1112
+ registerOnChange(fn) {
1113
+ this.onChange = fn;
1114
+ }
1115
+ registerOnTouched(fn) {
1116
+ this.onTouched = fn;
1117
+ }
1118
+ setDisabledState(isDisabled) {
1119
+ this.isDisabled = isDisabled;
1120
+ }
1121
+ validate(control) {
1122
+ this.control = control;
1123
+ if (!this.autoCompleteMultiSelectConfig.required)
1124
+ return null;
1125
+ const val = control.value;
1126
+ const isEmpty = val === null ||
1127
+ val === undefined ||
1128
+ val === '' ||
1129
+ (typeof val === 'object' && Object.keys(val).length === 0);
1130
+ return isEmpty ? { required: true } : null;
1131
+ }
1132
+ onInput(event) {
1133
+ const target = event.target;
1134
+ this.inputValue = target.value;
1135
+ }
1088
1136
  /**
1089
1137
  * @description method to update selected item
1090
1138
  * @author Shiva Kant
@@ -1132,6 +1180,8 @@ class AutoCompleteMultiSelectComponent {
1132
1180
  }
1133
1181
  // keep select all state consistent
1134
1182
  this.updateSelectAllState();
1183
+ this.onChange(this.selectedOptions);
1184
+ this.onTouched();
1135
1185
  this.onItemSelection.emit(this.selectedOptions);
1136
1186
  }
1137
1187
  /**
@@ -1155,6 +1205,8 @@ class AutoCompleteMultiSelectComponent {
1155
1205
  : !this.optionsList.includes(opt));
1156
1206
  const selectedOptionItems = this.optionsList.filter((opt) => opt.isSelected);
1157
1207
  this.selectedOptions = [...customChips, ...selectedOptionItems];
1208
+ this.onChange(this.selectedOptions);
1209
+ this.onTouched();
1158
1210
  this.onItemSelection.emit(this.selectedOptions);
1159
1211
  }
1160
1212
  /**
@@ -1187,6 +1239,8 @@ class AutoCompleteMultiSelectComponent {
1187
1239
  }
1188
1240
  // update select all state & emit
1189
1241
  this.updateSelectAllState();
1242
+ this.onChange(this.selectedOptions); // 🔥 THIS updates formControl
1243
+ this.onTouched();
1190
1244
  this.onItemSelection.emit(this.selectedOptions);
1191
1245
  }
1192
1246
  /**
@@ -1264,6 +1318,8 @@ class AutoCompleteMultiSelectComponent {
1264
1318
  this.inputValue = '';
1265
1319
  // update select all state and emit
1266
1320
  this.updateSelectAllState();
1321
+ this.onChange(this.selectedOptions);
1322
+ this.onTouched();
1267
1323
  this.onItemSelection.emit(this.selectedOptions);
1268
1324
  }
1269
1325
  outsideClicked() {
@@ -1288,12 +1344,34 @@ class AutoCompleteMultiSelectComponent {
1288
1344
  this.isSelectedAll =
1289
1345
  selectable.length > 0 && selectable.every((opt) => !!opt.isSelected);
1290
1346
  }
1291
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1292
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-input-multi-select", inputs: { autoCompleteMultiSelectConfig: "autoCompleteMultiSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\">\r\n <div\r\n class=\"input_container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips_wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) { @if ($index <\r\n autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"textTruncate\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n } }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
1347
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1348
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-input-multi-select", inputs: { autoCompleteMultiSelectConfig: "autoCompleteMultiSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, host: { attributes: { "tabindex": "0" } }, providers: [
1349
+ {
1350
+ provide: NG_VALUE_ACCESSOR,
1351
+ useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
1352
+ multi: true,
1353
+ },
1354
+ {
1355
+ provide: NG_VALIDATORS,
1356
+ useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
1357
+ multi: true,
1358
+ },
1359
+ ], 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 [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale))}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;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;height:inherit}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none;padding:0;height:auto}.main_container .input_container .input_box input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
1293
1360
  }
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
1361
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
1295
1362
  type: Component,
1296
- args: [{ selector: 'cats-ui-input-multi-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\">\r\n <div\r\n class=\"input_container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips_wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) { @if ($index <\r\n autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"textTruncate\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n } }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
1363
+ args: [{ selector: 'cats-ui-input-multi-select', imports: [CommonModule, FormsModule, OutsideClickDirective], providers: [
1364
+ {
1365
+ provide: NG_VALUE_ACCESSOR,
1366
+ useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
1367
+ multi: true,
1368
+ },
1369
+ {
1370
+ provide: NG_VALIDATORS,
1371
+ useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
1372
+ multi: true,
1373
+ },
1374
+ ], host: { tabindex: '0' }, 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 [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale))}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;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;height:inherit}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none;padding:0;height:auto}.main_container .input_container .input_box input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
1297
1375
  }], ctorParameters: () => [], propDecorators: { autoCompleteMultiSelectConfig: [{
1298
1376
  type: Input
1299
1377
  }], selectedItem: [{
@@ -1332,8 +1410,8 @@ class ToogleButtonComponent {
1332
1410
  setDisabledState(isDisabled) {
1333
1411
  this.toggleConfig.disabled = isDisabled;
1334
1412
  }
1335
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1336
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ToogleButtonComponent, isStandalone: true, selector: "cats-ui-toogle-button", inputs: { toggleConfig: "toggleConfig" }, outputs: { onToggled: "onToggled" }, providers: [
1413
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1414
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ToogleButtonComponent, isStandalone: true, selector: "cats-ui-toogle-button", inputs: { toggleConfig: "toggleConfig" }, outputs: { onToggled: "onToggled" }, providers: [
1337
1415
  {
1338
1416
  provide: NG_VALUE_ACCESSOR,
1339
1417
  useExisting: forwardRef(() => ToogleButtonComponent),
@@ -1341,7 +1419,7 @@ class ToogleButtonComponent {
1341
1419
  },
1342
1420
  ], ngImport: i0, template: "<div class=\"toggle_button\">\r\n <label class=\"switch\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"toggleConfig.checked\" \r\n [disabled]=\"toggleConfig.disabled\"\r\n (change)=\"toggle()\"\r\n />\r\n <span class=\"slider round\"></span>\r\n <span class=\"toggle-status\">\r\n {{ toggleConfig.checked ? 'ON' : 'OFF' }}\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.toggle_button .switch{position:relative;display:flex;width:calc(3rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.toggle_button .switch input{opacity:0;width:0;height:0}.toggle_button .switch input:focus{box-shadow:unset}.toggle_button .switch input+.slider{box-shadow:0 0 calc(.0833333333rem / var(--scale)) var(--box-shadow)}.toggle_button .switch input:checked+.slider{background-color:var(--blue-600)}.toggle_button .switch input:checked+.slider:before{-webkit-transform:translateX(calc(2.1666666667rem / var(--scale)));-ms-transform:translateX(calc(2.1666666667rem / var(--scale)));transform:translate(calc(2.1666666667rem / var(--scale)));left:calc(-.75rem / var(--scale));bottom:calc(.1666666667rem / var(--scale))}.toggle_button .switch .slider{position:absolute;background-color:var(--neutral-100);cursor:pointer;inset:0;transition:.4s}.toggle_button .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));content:\"\";background-color:var(--white);transition:.4s;position:absolute;left:calc(.25rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--box-shadow)}.toggle_button .switch .slider.round{border-radius:calc(1rem / var(--scale))}.toggle_button .switch .slider.round:before{border-radius:50%}.toggle_button .switch .toggle-status{color:var(--white);z-index:9;padding-left:calc(.1666666667rem / var(--scale));font-size:var(--fs-8);line-height:calc(2rem / var(--scale));font-weight:400}\n"] });
1343
1421
  }
1344
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToogleButtonComponent, decorators: [{
1422
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, decorators: [{
1345
1423
  type: Component,
1346
1424
  args: [{ selector: 'cats-ui-toogle-button', imports: [], providers: [
1347
1425
  {
@@ -1497,16 +1575,16 @@ class CheckboxButtonComponent {
1497
1575
  });
1498
1576
  }
1499
1577
  }
1500
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1501
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CheckboxButtonComponent, isStandalone: true, selector: "cats-ui-checkbox-button", inputs: { checkBoxConfig: "checkBoxConfig", optionList: "optionList", selectedOptions: "selectedOptions" }, outputs: { onCheckBoxSelection: "onCheckBoxSelection" }, providers: [
1578
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1579
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxButtonComponent, isStandalone: true, selector: "cats-ui-checkbox-button", inputs: { checkBoxConfig: "checkBoxConfig", optionList: "optionList", selectedOptions: "selectedOptions" }, outputs: { onCheckBoxSelection: "onCheckBoxSelection" }, providers: [
1502
1580
  {
1503
1581
  provide: NG_VALUE_ACCESSOR,
1504
1582
  useExisting: forwardRef(() => CheckboxButtonComponent),
1505
1583
  multi: true,
1506
1584
  },
1507
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] });
1585
+ ], usesOnChanges: true, ngImport: i0, template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.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(/images/indeterminate.svg)}\n"] });
1508
1586
  }
1509
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxButtonComponent, decorators: [{
1587
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, decorators: [{
1510
1588
  type: Component,
1511
1589
  args: [{ selector: 'cats-ui-checkbox-button', imports: [], providers: [
1512
1590
  {
@@ -1514,7 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
1514
1592
  useExisting: forwardRef(() => CheckboxButtonComponent),
1515
1593
  multi: true,
1516
1594
  },
1517
- ], template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] }]
1595
+ ], template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.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(/images/indeterminate.svg)}\n"] }]
1518
1596
  }], propDecorators: { checkBoxConfig: [{
1519
1597
  type: Input
1520
1598
  }], onCheckBoxSelection: [{
@@ -1619,16 +1697,16 @@ class RadioButtonComponent {
1619
1697
  const key = this.config.valueField ?? 'id';
1620
1698
  return value[key];
1621
1699
  }
1622
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1623
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioButtonComponent, isStandalone: true, selector: "cats-ui-radio-button", inputs: { config: "config", optionList: "optionList", selectedRadio: "selectedRadio" }, outputs: { selectionChange: "selectionChange" }, providers: [
1700
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1701
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadioButtonComponent, isStandalone: true, selector: "cats-ui-radio-button", inputs: { config: "config", optionList: "optionList", selectedRadio: "selectedRadio" }, outputs: { selectionChange: "selectionChange" }, providers: [
1624
1702
  {
1625
1703
  provide: NG_VALUE_ACCESSOR,
1626
1704
  useExisting: forwardRef(() => RadioButtonComponent),
1627
1705
  multi: true,
1628
1706
  },
1629
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1707
+ ], usesOnChanges: true, ngImport: i0, template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale));width:auto;height:calc(2rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;min-width:auto}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1630
1708
  }
1631
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonComponent, decorators: [{
1709
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
1632
1710
  type: Component,
1633
1711
  args: [{ selector: 'cats-ui-radio-button', imports: [CommonModule, FormsModule], providers: [
1634
1712
  {
@@ -1636,7 +1714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
1636
1714
  useExisting: forwardRef(() => RadioButtonComponent),
1637
1715
  multi: true,
1638
1716
  },
1639
- ], template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"] }]
1717
+ ], template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale));width:auto;height:calc(2rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;min-width:auto}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"] }]
1640
1718
  }], propDecorators: { config: [{
1641
1719
  type: Input
1642
1720
  }], optionList: [{
@@ -2127,8 +2205,8 @@ class DateTimePickerComponent {
2127
2205
  this.dateTimeSelected.emit(rangeResult);
2128
2206
  }
2129
2207
  }
2130
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
2131
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DateTimePickerComponent, isStandalone: true, selector: "cats-ui-date-time-picker", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected" }, providers: [
2208
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
2209
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: true, selector: "cats-ui-date-time-picker", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected" }, host: { attributes: { "tabindex": "0" } }, providers: [
2132
2210
  {
2133
2211
  provide: NG_VALUE_ACCESSOR,
2134
2212
  useExisting: DateTimePickerComponent,
@@ -2140,9 +2218,9 @@ class DateTimePickerComponent {
2140
2218
  multi: true,
2141
2219
  },
2142
2220
  DatePipe,
2143
- ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
2221
+ ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));background-color:var(--white)}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
2144
2222
  }
2145
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimePickerComponent, decorators: [{
2223
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
2146
2224
  type: Component,
2147
2225
  args: [{ selector: 'cats-ui-date-time-picker', imports: [CommonModule, OutsideClickDirective], providers: [
2148
2226
  {
@@ -2156,7 +2234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
2156
2234
  multi: true,
2157
2235
  },
2158
2236
  DatePipe,
2159
- ], template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"] }]
2237
+ ], host: { tabindex: '0' }, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));background-color:var(--white)}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"] }]
2160
2238
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2161
2239
  type: Inject,
2162
2240
  args: [LOCALE_ID]
@@ -2275,10 +2353,10 @@ class CatsUiTooltipDirective {
2275
2353
  this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
2276
2354
  this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
2277
2355
  }
2278
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
2279
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CatsUiTooltipDirective, isStandalone: true, selector: "[catsUiTooltip]", inputs: { tooltipText: ["catsUiTooltip", "tooltipText"], tooltipClass: "tooltipClass" }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()", "window:resize": "adjustOnWindowChange()", "window:scroll": "adjustOnWindowChange()" } }, ngImport: i0 });
2356
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
2357
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: CatsUiTooltipDirective, isStandalone: true, selector: "[catsUiTooltip]", inputs: { tooltipText: ["catsUiTooltip", "tooltipText"], tooltipClass: "tooltipClass" }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()", "window:resize": "adjustOnWindowChange()", "window:scroll": "adjustOnWindowChange()" } }, ngImport: i0 });
2280
2358
  }
2281
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
2359
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
2282
2360
  type: Directive,
2283
2361
  args: [{
2284
2362
  selector: '[catsUiTooltip]',
@@ -2321,10 +2399,10 @@ class AccordionComponent {
2321
2399
  isOpen(index) {
2322
2400
  return this.openedIndex === index;
2323
2401
  }
2324
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2325
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AccordionComponent, isStandalone: true, selector: "cats-ui-accordion", ngImport: i0, template: "<div class=\"accordion\">\r\n <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion{width:100%;margin:0 auto}\n"] });
2402
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2403
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AccordionComponent, isStandalone: true, selector: "cats-ui-accordion", ngImport: i0, template: "<div class=\"accordion\">\r\n <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion{width:100%;margin:0 auto}\n"] });
2326
2404
  }
2327
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionComponent, decorators: [{
2405
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, decorators: [{
2328
2406
  type: Component,
2329
2407
  args: [{ selector: 'cats-ui-accordion', imports: [], template: "<div class=\"accordion\">\r\n <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion{width:100%;margin:0 auto}\n"] }]
2330
2408
  }] });
@@ -2362,10 +2440,10 @@ class AccordionItemComponent {
2362
2440
  console.error('No content template provided for accordion item:', this.title);
2363
2441
  }
2364
2442
  }
2365
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
2366
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AccordionItemComponent, isStandalone: true, selector: "cats-ui-accordion-item", inputs: { title: "title", index: "index" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <h3>{{ title }}</h3>\r\n <img\r\n [src]=\"isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'\"\r\n alt=\"\"\r\n />\r\n </div>\r\n\r\n <div class=\"accordion-body\" [class.open]=\"isOpen()\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion-item{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.accordion-item:has(.open) .accordion-header{border-radius:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 0}.accordion-item .accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;background-color:var(--neutral-50);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.accordion-item .accordion-header h3{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.accordion-item .accordion-header img{max-width:calc(2rem / var(--scale))}.accordion-item .accordion-body{max-height:0;padding:0 calc(.6666666667rem / var(--scale));overflow:hidden;background:var(--white);transition:max-height .4s ease,padding .3s}.accordion-item .accordion-body.open{max-height:calc(41.6666666667rem / var(--scale));padding:calc(1.25rem / var(--scale)) calc(.8333333333rem / var(--scale));border-radius:0 0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2443
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
2444
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AccordionItemComponent, isStandalone: true, selector: "cats-ui-accordion-item", inputs: { title: "title", index: "index" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <h3>{{ title }}</h3>\r\n <img\r\n [src]=\"isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'\"\r\n alt=\"\"\r\n />\r\n </div>\r\n\r\n <div class=\"accordion-body\" [class.open]=\"isOpen()\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion-item{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.accordion-item:has(.open) .accordion-header{border-radius:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 0}.accordion-item .accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;background-color:var(--neutral-50);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.accordion-item .accordion-header h3{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.accordion-item .accordion-header img{max-width:calc(2rem / var(--scale))}.accordion-item .accordion-body{max-height:0;padding:0 calc(.6666666667rem / var(--scale));overflow:hidden;background:var(--white);transition:max-height .4s ease,padding .3s}.accordion-item .accordion-body.open{max-height:calc(41.6666666667rem / var(--scale));padding:calc(1.25rem / var(--scale)) calc(.8333333333rem / var(--scale));border-radius:0 0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2367
2445
  }
2368
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
2446
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
2369
2447
  type: Component,
2370
2448
  args: [{ selector: 'cats-ui-accordion-item', imports: [CommonModule], template: "<div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <h3>{{ title }}</h3>\r\n <img\r\n [src]=\"isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'\"\r\n alt=\"\"\r\n />\r\n </div>\r\n\r\n <div class=\"accordion-body\" [class.open]=\"isOpen()\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.accordion-item{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.accordion-item:has(.open) .accordion-header{border-radius:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 0}.accordion-item .accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;background-color:var(--neutral-50);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.accordion-item .accordion-header h3{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.accordion-item .accordion-header img{max-width:calc(2rem / var(--scale))}.accordion-item .accordion-body{max-height:0;padding:0 calc(.6666666667rem / var(--scale));overflow:hidden;background:var(--white);transition:max-height .4s ease,padding .3s}.accordion-item .accordion-body.open{max-height:calc(41.6666666667rem / var(--scale));padding:calc(1.25rem / var(--scale)) calc(.8333333333rem / var(--scale));border-radius:0 0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale))}\n"] }]
2371
2449
  }], ctorParameters: () => [{ type: AccordionComponent, decorators: [{
@@ -2385,10 +2463,10 @@ class TabContentDirective {
2385
2463
  constructor(template) {
2386
2464
  this.template = template;
2387
2465
  }
2388
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
2389
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TabContentDirective, isStandalone: true, selector: "[tabContent]", ngImport: i0 });
2466
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
2467
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TabContentDirective, isStandalone: true, selector: "[tabContent]", ngImport: i0 });
2390
2468
  }
2391
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, decorators: [{
2469
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabContentDirective, decorators: [{
2392
2470
  type: Directive,
2393
2471
  args: [{
2394
2472
  selector: '[tabContent]',
@@ -2401,10 +2479,10 @@ class TabHeadingDirective {
2401
2479
  constructor(template) {
2402
2480
  this.template = template;
2403
2481
  }
2404
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabHeadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
2405
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TabHeadingDirective, isStandalone: true, selector: "[tabHeading]", ngImport: i0 });
2482
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabHeadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
2483
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TabHeadingDirective, isStandalone: true, selector: "[tabHeading]", ngImport: i0 });
2406
2484
  }
2407
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabHeadingDirective, decorators: [{
2485
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabHeadingDirective, decorators: [{
2408
2486
  type: Directive,
2409
2487
  args: [{
2410
2488
  selector: '[tabHeading]',
@@ -2415,10 +2493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
2415
2493
  class TabItemComponent {
2416
2494
  heading;
2417
2495
  content;
2418
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2419
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TabItemComponent, isStandalone: true, selector: "cats-ui-tab-item", queries: [{ propertyName: "heading", first: true, predicate: TabHeadingDirective, descendants: true }, { propertyName: "content", first: true, predicate: TabContentDirective, descendants: true }], ngImport: i0, template: "<p>tab-item works!</p>\r\n", styles: [""] });
2496
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2497
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TabItemComponent, isStandalone: true, selector: "cats-ui-tab-item", queries: [{ propertyName: "heading", first: true, predicate: TabHeadingDirective, descendants: true }, { propertyName: "content", first: true, predicate: TabContentDirective, descendants: true }], ngImport: i0, template: "<p>tab-item works!</p>\r\n", styles: [""] });
2420
2498
  }
2421
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabItemComponent, decorators: [{
2499
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabItemComponent, decorators: [{
2422
2500
  type: Component,
2423
2501
  args: [{ selector: 'cats-ui-tab-item', imports: [], template: "<p>tab-item works!</p>\r\n" }]
2424
2502
  }], propDecorators: { heading: [{
@@ -2445,10 +2523,10 @@ class TabComponent {
2445
2523
  this.selectTab.emit(index);
2446
2524
  }
2447
2525
  }
2448
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2449
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabComponent, isStandalone: true, selector: "cats-ui-tab", inputs: { activeTab: "activeTab", disabledTabs: "disabledTabs" }, outputs: { selectTab: "selectTab" }, queries: [{ propertyName: "items", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"tab-header\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n <li\r\n class=\"tab-item\"\r\n [class.active]=\"activeTab === $index\"\r\n [class.disabled]=\"disabledTabs.includes($index)\"\r\n (click)=\"setActive($index)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"item.heading.template\"></ng-container>\r\n </li>\r\n </ng-container>\r\n\r\n }\r\n</ul>\r\n\r\n<div class=\"tab-content\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n @if (activeTab === $index) {\r\n <ng-container *ngTemplateOutlet=\"item.content.template\"></ng-container>\r\n }\r\n </ng-container>\r\n }\r\n</div>\r\n", styles: [".tab-header{display:flex;border-bottom:1px solid #ccc;gap:8px}.tab-item{padding:8px 12px;cursor:pointer;border-radius:6px 6px 0 0}.tab-item.active{background:#1976d2;color:#fff}.tab-item.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2526
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2527
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TabComponent, isStandalone: true, selector: "cats-ui-tab", inputs: { activeTab: "activeTab", disabledTabs: "disabledTabs" }, outputs: { selectTab: "selectTab" }, queries: [{ propertyName: "items", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"tab-header\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n <li\r\n class=\"tab-item\"\r\n [class.active]=\"activeTab === $index\"\r\n [class.disabled]=\"disabledTabs.includes($index)\"\r\n (click)=\"setActive($index)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"item.heading.template\"></ng-container>\r\n </li>\r\n </ng-container>\r\n\r\n }\r\n</ul>\r\n\r\n<div class=\"tab-content\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n @if (activeTab === $index) {\r\n <ng-container *ngTemplateOutlet=\"item.content.template\"></ng-container>\r\n }\r\n </ng-container>\r\n }\r\n</div>\r\n", styles: [".tab-header{display:flex;border-bottom:1px solid #ccc;gap:8px}.tab-item{padding:8px 12px;cursor:pointer;border-radius:6px 6px 0 0}.tab-item.active{background:#1976d2;color:#fff}.tab-item.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2450
2528
  }
2451
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabComponent, decorators: [{
2529
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabComponent, decorators: [{
2452
2530
  type: Component,
2453
2531
  args: [{ selector: 'cats-ui-tab', imports: [CommonModule], template: "<ul class=\"tab-header\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n <li\r\n class=\"tab-item\"\r\n [class.active]=\"activeTab === $index\"\r\n [class.disabled]=\"disabledTabs.includes($index)\"\r\n (click)=\"setActive($index)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"item.heading.template\"></ng-container>\r\n </li>\r\n </ng-container>\r\n\r\n }\r\n</ul>\r\n\r\n<div class=\"tab-content\">\r\n @for (item of items; track $index) {\r\n <ng-container>\r\n @if (activeTab === $index) {\r\n <ng-container *ngTemplateOutlet=\"item.content.template\"></ng-container>\r\n }\r\n </ng-container>\r\n }\r\n</div>\r\n", styles: [".tab-header{display:flex;border-bottom:1px solid #ccc;gap:8px}.tab-item{padding:8px 12px;cursor:pointer;border-radius:6px 6px 0 0}.tab-item.active{background:#1976d2;color:#fff}.tab-item.disabled{opacity:.5;cursor:not-allowed}\n"] }]
2454
2532
  }], propDecorators: { activeTab: [{
@@ -2471,4 +2549,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
2471
2549
  */
2472
2550
 
2473
2551
  export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALUE_VALIDATOR, DateTimePickerComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, TabComponent, TabContentDirective, TabHeadingDirective, TabItemComponent, ToggleConfig, ToogleButtonComponent };
2474
- //# sourceMappingURL=cats-ui.mjs.map
2552
+ //# sourceMappingURL=cats-ui-lib.mjs.map