cats-ui-lib 2.0.0 → 2.0.2

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 +291 -375
  2. package/fesm2022/cats-ui.mjs.map +1 -1
  3. package/index.d.ts +57 -52
  4. package/package.json +3 -3
  5. package/styles/_utilities.scss +27 -0
package/fesm2022/cats-ui.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive, LOCALE_ID, Inject, TemplateRef } from '@angular/core';
2
+ import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive, LOCALE_ID, Inject, TemplateRef, ContentChildren } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, NgClass, DatePipe } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
6
- import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
6
+ import { Validators, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
7
7
 
8
8
  class CatsUiService {
9
9
  constructor() { }
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' });
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' });
12
12
  }
13
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiService, decorators: [{
13
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiService, decorators: [{
14
14
  type: Injectable,
15
15
  args: [{
16
16
  providedIn: 'root'
@@ -87,6 +87,10 @@ class InputComponent {
87
87
  */
88
88
  validate(control) {
89
89
  this.control = control;
90
+ if (this.inputConfig?.type === 'email') {
91
+ return Validators.email(control);
92
+ }
93
+ return null;
90
94
  }
91
95
  /**
92
96
  * @description method to use show password
@@ -95,8 +99,8 @@ class InputComponent {
95
99
  togglePassword() {
96
100
  this.showPassword = !this.showPassword;
97
101
  }
98
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
99
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, providers: [
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: [
100
104
  {
101
105
  provide: NG_VALUE_ACCESSOR,
102
106
  useExisting: forwardRef(() => InputComponent),
@@ -107,9 +111,9 @@ class InputComponent {
107
111
  useExisting: forwardRef(() => InputComponent),
108
112
  multi: true,
109
113
  },
110
- ], ngImport: i0, template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
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"] }] });
111
115
  }
112
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
113
117
  type: Component,
114
118
  args: [{ selector: 'cats-ui-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
115
119
  {
@@ -122,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
122
126
  useExisting: forwardRef(() => InputComponent),
123
127
  multi: true,
124
128
  },
125
- ], template: "<div class=\"input_container\">\r\n @if (inputConfig.label) {\r\n <label>{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"custom-input\">\r\n <input\r\n class=\"input-box\"\r\n [type]=\"showPassword ? 'text' : inputConfig.type\"\r\n [placeholder]=\"inputConfig.placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (keyup)=\"handleKeyUp($event)\"\r\n />\r\n <!-- Eye Icon Only When Type Is Password -->\r\n @if (inputConfig.type === 'password') {\r\n <span class=\"eye_icon\" (click)=\"togglePassword()\">\r\n <img\r\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\r\n alt=\"toggle password visibility\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.input_container{margin-bottom:calc(1rem / var(--scale))}.input_container label{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:600;margin-bottom:calc(.6666666667rem / var(--scale))}.input_container .custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.input_container .custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input{width:100%;height:calc(4.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.input_container .custom-input input[type=password]{padding-right:calc(3.75rem / var(--scale))}.input_container .custom-input input:focus{outline:none;border-color:var(--blue-700)}.input_container .custom-input input:disabled{background-color:var(--neutral-100);cursor:not-allowed}.input_container .custom-input .eye_icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.input_container .custom-input .eye_icon img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}\n"] }]
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"] }]
126
130
  }], propDecorators: { inputConfig: [{
127
131
  type: Input
128
132
  }], onKeyDown: [{
@@ -197,7 +201,7 @@ class CheckBoxConfig {
197
201
  subtasks;
198
202
  }
199
203
 
200
- const noop$1 = () => { };
204
+ const noop$2 = () => { };
201
205
  const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR = {
202
206
  provide: NG_VALUE_ACCESSOR,
203
207
  useExisting: forwardRef(() => SingleSelectComponent),
@@ -291,8 +295,8 @@ class SingleSelectComponent {
291
295
  this.control = control;
292
296
  }
293
297
  // Below Methods are used to register form API methods in these variable to use them later
294
- onTouchedCallback = noop$1;
295
- onChangeCallback = noop$1;
298
+ onTouchedCallback = noop$2;
299
+ onChangeCallback = noop$2;
296
300
  // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
297
301
  /**
298
302
  * @description method to update value of selectedOption
@@ -410,17 +414,17 @@ class SingleSelectComponent {
410
414
  }
411
415
  });
412
416
  }
413
- 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 });
414
- 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: [
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: [
415
419
  {
416
420
  provide: NG_VALUE_ACCESSOR,
417
421
  useExisting: SingleSelectComponent,
418
422
  multi: true,
419
423
  },
420
424
  SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
421
- ], queries: [{ propertyName: "selectedData", first: true, predicate: ["selectedData"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
422
426
  }
423
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SingleSelectComponent, decorators: [{
427
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
424
428
  type: Component,
425
429
  args: [{ selector: 'cats-ui-single-select', imports: [CommonModule, FormsModule], providers: [
426
430
  {
@@ -429,7 +433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
429
433
  multi: true,
430
434
  },
431
435
  SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
432
- ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\" id=\"main-wrapper-single-select\">\r\n <div\r\n class=\"single-select-dropdown\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger':\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-control': disableControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(singleSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ singleSelectConfig.prefixLabel }}</p>\r\n </span>\r\n } @if (!isObjEmpty(selectedOption) &&\r\n selectedOption[singleSelectConfig.textField]) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption[singleSelectConfig.textField] }}\r\n </span>\r\n </ng-template>\r\n }@else if(selectedOption && isObjEmpty(selectedOption)){\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedData ? selectedData : defaultTemplate1\"\r\n [ngTemplateOutletContext]=\"{ data: selectedOption }\"\r\n ></ng-container>\r\n\r\n <ng-template #defaultTemplate1 let-data=\"data\">\r\n <span class=\"textTruncate\">\r\n {{ selectedOption }}\r\n </span>\r\n </ng-template>\r\n }@else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n singleSelectConfig.placeholder\r\n }}</span>\r\n\r\n }\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n srcset=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list\"\r\n id=\"container_scroll\"\r\n (scroll)=\"onDivScroll($event)\"\r\n >\r\n @if (singleSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" class=\"search_icon\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if(isObjEmpty(this.optionList[0] || \"\")){ @for (option of\r\n filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{ option }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } } @else { @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n singleSelectConfig.disabledField &&\r\n option[singleSelectConfig.disabledField]\r\n }\"\r\n >\r\n <span class=\"textTruncate\">{{\r\n option[singleSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%}.main-wrapper:has(#container_scroll) .single-select-dropdown{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .single-select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .single-select-dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 2rem / var(--scale));height:\"\"}.main-wrapper .single-select-dropdown .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .single-select-dropdown.disable_input{pointer-events:none;background-color:var(--neutral-50)}.main-wrapper .single-select-dropdown .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .single-select-dropdown .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .single-select-dropdown.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .dropdown-list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .right-tick-icon{display:none}.main-wrapper ul li.selected{background-color:var(--neutral-50)}.main-wrapper ul li.selected .right-tick-icon{display:block}\n"] }]
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"] }]
433
437
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
434
438
  type: Input
435
439
  }], singleSelectConfig: [{
@@ -453,7 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
453
457
  args: ['document:click', ['$event']]
454
458
  }] } });
455
459
 
456
- const noop = () => { };
460
+ const noop$1 = () => { };
457
461
  const MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
458
462
  provide: NG_VALUE_ACCESSOR,
459
463
  useExisting: forwardRef(() => MultiSelectComponent),
@@ -557,8 +561,8 @@ class MultiSelectComponent {
557
561
  this.cd.markForCheck();
558
562
  }
559
563
  // Below Methods are used to register form API methods in these variable to use them later
560
- onTouchedCallback = noop;
561
- onChangeCallback = noop;
564
+ onTouchedCallback = noop$1;
565
+ onChangeCallback = noop$1;
562
566
  validate(control) {
563
567
  this.control = control;
564
568
  }
@@ -676,18 +680,18 @@ class MultiSelectComponent {
676
680
  ?.toLowerCase()
677
681
  .includes(this.searchText.toLowerCase()));
678
682
  }
679
- 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 });
680
- 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: [
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: [
681
685
  MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
682
686
  MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
683
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
684
688
  }
685
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
689
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, decorators: [{
686
690
  type: Component,
687
691
  args: [{ selector: 'cats-ui-multi-select', imports: [NgClass, FormsModule], providers: [
688
692
  MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
689
693
  MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
690
- ], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n 'border-danger': this.inValid,\r\n 'disable-control': disabledControl\r\n }\"\r\n >\r\n <div class=\"left_details\">\r\n @if(multiSelectConfig.prefixLabel){\r\n <span class=\"predefine_label\">\r\n <p class=\"textTruncate\">{{ multiSelectConfig.prefixLabel }}</p>\r\n </span>\r\n }\r\n <div class=\"multi_label_wrapper\">\r\n @if (selectedOptions.length>0) { @for (item of selectedOptions; track\r\n $index) { @if(multiSelectConfig.chipLimit>=$index+1){\r\n <div class=\"input_text\">\r\n <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span>\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n } } } @else{\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n } @if(multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow_icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search_bar\">\r\n <div class=\"input_box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter_search_box\"\r\n name=\"\"\r\n id=\"\"\r\n placeholder=\"Search here\"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length>0) {\r\n <li (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }\r\n </span>\r\n </li>\r\n } @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField]\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no_data\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main-wrapper{position:relative;width:100%;height:calc(4.5rem / var(--scale));min-height:calc(4.5rem / var(--scale))}.main-wrapper:has(#container_scroll) .display-div{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:auto;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main-wrapper .display-div .left_details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.main-wrapper .display-div .left_details .multi_label_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.1666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more,.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text span{max-width:calc(10rem / var(--scale));font-weight:400}.main-wrapper .display-div .left_details .multi_label_wrapper .input_text .cross_icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .display-div .left_details .multi_label_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main-wrapper .display-div .left_details .multi_label_wrapper .placeholderColor{color:var(--neutral-400)}.main-wrapper .display-div .left_details .predefine_label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--neutral-300);color:var(--default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-bottom-left-radius:calc(.6666666667rem / var(--scale));margin:0 calc(1.3333333333rem / var(--scale)) 0 calc(-1.4166666667rem / var(--scale))}.main-wrapper .display-div .left_details .predefine_label p{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.main-wrapper .display-div .arrow_icon img{max-width:calc(2rem / var(--scale))}.main-wrapper .display-div.danger_outline{border:calc(.0833333333rem / var(--scale)) solid var(--red)}.main-wrapper .display-div:has(.view_more) .arrow_icon{margin-left:calc(.8333333333rem / var(--scale))}.main-wrapper .dropdown-list{position:absolute;width:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.main-wrapper .dropdown-list .search_bar .input_box{width:100%;height:calc(4rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));overflow:hidden}.main-wrapper .dropdown-list .search_bar .input_box img{opacity:.5;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.main-wrapper .dropdown-list .search_bar .input_box .filter_search_box{flex-grow:1;border:none;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default)}.main-wrapper .dropdown-list .search_bar .input_box .cross_icon{cursor:pointer}.main-wrapper .dropdown-list ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main-wrapper .dropdown-list ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main-wrapper .dropdown-list ul li.no_data:hover{background-color:unset;cursor:default}.main-wrapper .dropdown-list ul li:hover{background-color:var(--neutral-50)}.main-wrapper .dropdown-list ul li.disabled_option{opacity:.3;pointer-events:none}.main-wrapper .dropdown-list ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main-wrapper .dropdown-list ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
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"] }]
691
695
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
692
696
  type: Input
693
697
  }], multiSelectConfig: [{
@@ -748,16 +752,16 @@ class SearchBoxComponent {
748
752
  setDisabledState(isDisabled) {
749
753
  this.isDisabled = isDisabled;
750
754
  }
751
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
752
- 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: [
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: [
753
757
  {
754
758
  provide: NG_VALUE_ACCESSOR,
755
759
  useExisting: forwardRef(() => SearchBoxComponent),
756
760
  multi: true,
757
761
  },
758
- ], ngImport: i0, template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
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 }] });
759
763
  }
760
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SearchBoxComponent, decorators: [{
764
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchBoxComponent, decorators: [{
761
765
  type: Component,
762
766
  args: [{ selector: 'cats-ui-search-box', imports: [FormsModule], providers: [
763
767
  {
@@ -765,7 +769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
765
769
  useExisting: forwardRef(() => SearchBoxComponent),
766
770
  multi: true,
767
771
  },
768
- ], template: "<div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" srcset=\"\" />\r\n <input\r\n [placeholder]=\"searchConfig.placeholder\"\r\n type=\"text\"\r\n [value]=\"searchParam\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n @if (searchParam.length > 0) {\r\n <div class=\"cross_icon\">\r\n <img src=\"images/x.svg\" alt=\"\" srcset=\"\" (click)=\"closeSearchBar()\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.search_input{position:relative;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.search_input:has(input:focus){border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--default)}.search_input input::placeholder{color:var(--neutral-400)}.search_input .cross_icon{cursor:pointer}\n"] }]
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"] }]
769
773
  }], propDecorators: { searchConfig: [{
770
774
  type: Input
771
775
  }], onClose: [{
@@ -797,10 +801,10 @@ class OutsideClickDirective {
797
801
  this.clickOutSide.emit(event);
798
802
  }
799
803
  }
800
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
801
- 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 });
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 });
802
806
  }
803
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OutsideClickDirective, decorators: [{
807
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
804
808
  type: Directive,
805
809
  args: [{
806
810
  selector: '[catsOutsideClick]',
@@ -813,9 +817,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
813
817
  args: ['document:click', ['$event']]
814
818
  }] } });
815
819
 
816
- ;
820
+ const noop = () => { };
821
+ const DROPDOWN_CONTROL_VALUE_ACCESSOR = {
822
+ provide: NG_VALUE_ACCESSOR,
823
+ useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
824
+ multi: true,
825
+ };
826
+ const DROPDOWN_CONTROL_VALUE_VALIDATOR = {
827
+ provide: NG_VALIDATORS,
828
+ useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
829
+ multi: true,
830
+ };
817
831
  class AutoCompleteSingleSelectComponent {
818
832
  autoSingleSelectConfig = new AutoCompleteSingleSelectConfig();
833
+ placeholder = 'Enter or Select Option';
819
834
  selectedItem;
820
835
  optionsList = [];
821
836
  parentNativeElement;
@@ -825,28 +840,25 @@ class AutoCompleteSingleSelectComponent {
825
840
  inputValue = '';
826
841
  selectedOption;
827
842
  constructor() { }
843
+ inValid = false;
844
+ control;
845
+ disableControl = false;
828
846
  ngOnInit() { }
847
+ onTouchedCallback = noop;
848
+ onChangeCallback = noop;
849
+ ngOnChanges(_changes) {
850
+ if (!_changes['optionList']?.currentValue) {
851
+ }
852
+ else {
853
+ this.writeValue(this.control?.value);
854
+ }
855
+ }
829
856
  /**
830
857
  * @description Method to toggle dropdown list
831
858
  * @author Shiva Kant
832
859
  */
833
860
  toggleDropdown() {
834
861
  this.showDropdown = !this.showDropdown;
835
- if (this.parentNativeElement) {
836
- this.parentNativeElement.scrollIntoView({
837
- behavior: 'smooth',
838
- block: 'center',
839
- });
840
- let parentDiv = document.getElementById(this.parentNativeElement);
841
- setTimeout(() => {
842
- let parentBoundary = parentDiv?.getBoundingClientRect() || {};
843
- let dropdonwList = document.getElementById('container_scroll');
844
- let elBoundary = dropdonwList?.getBoundingClientRect() || {};
845
- if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
846
- dropdonwList.style['transform'] = `translate(0px,-${elBoundary?.['height'] + 54}px`;
847
- }
848
- }, 20);
849
- }
850
862
  }
851
863
  /**
852
864
  * @description method to update selected item
@@ -864,33 +876,95 @@ class AutoCompleteSingleSelectComponent {
864
876
  }
865
877
  this.selectedOption = item;
866
878
  this.showDropdown = false;
879
+ this.inValid = false;
880
+ this.onChangeCallback(item);
881
+ this.onTouchedCallback();
867
882
  this.onItemSelection.emit(this.selectedOption);
868
883
  }
884
+ writeValue(obj) {
885
+ this.syncSelectionWithValue(obj);
886
+ }
887
+ registerOnChange(fn) {
888
+ this.onChangeCallback = fn;
889
+ }
890
+ registerOnTouched(fn) {
891
+ this.onTouchedCallback = fn;
892
+ }
893
+ setDisabledState(isDisabled) {
894
+ this.disableControl = isDisabled;
895
+ }
896
+ validate(control) {
897
+ this.control = control;
898
+ if (!this.autoSingleSelectConfig.required)
899
+ return null;
900
+ const val = control.value;
901
+ const isEmpty = val === null ||
902
+ val === undefined ||
903
+ val === '' ||
904
+ (typeof val === 'object' && Object.keys(val).length === 0);
905
+ return isEmpty ? { required: true } : null;
906
+ }
907
+ // ---------- Helpers ----------
908
+ syncSelectionWithValue(value) {
909
+ this.selectedOption = null;
910
+ this.inputValue = '';
911
+ if (!value || !this.optionsList?.length)
912
+ return;
913
+ if (typeof value !== 'object') {
914
+ this.selectedOption =
915
+ this.optionsList.find((o) => o === value ||
916
+ o?.[this.autoSingleSelectConfig.idField] === value ||
917
+ o?.[this.autoSingleSelectConfig.textField] === value) ?? value;
918
+ }
919
+ else {
920
+ this.selectedOption =
921
+ this.optionsList.find((o) => o[this.autoSingleSelectConfig.idField] ===
922
+ value[this.autoSingleSelectConfig.idField]) ?? value;
923
+ }
924
+ this.inputValue = this.isObject(this.selectedOption)
925
+ ? this.selectedOption[this.autoSingleSelectConfig.textField]
926
+ : this.selectedOption;
927
+ }
869
928
  /**
870
929
  * @description this method is use to update input value
871
930
  */
872
931
  updateInputValue() {
873
- let data = this.selectedOption;
874
- if (!data ||
875
- (typeof data == 'object'
876
- ? data[this.autoSingleSelectConfig.textField] != this.inputValue
877
- : data != this.inputValue)) {
878
- data = this.inputValue;
932
+ let data = null;
933
+ if (!this.inputValue || this.inputValue.trim() === '') {
934
+ this.selectedOption = null;
935
+ this.onChangeCallback(null);
936
+ }
937
+ else {
879
938
  if (this.isObject(this.optionsList?.[0])) {
880
939
  data = {
881
940
  [this.autoSingleSelectConfig.idField]: null,
882
941
  [this.autoSingleSelectConfig.textField]: this.inputValue,
883
942
  };
884
943
  }
944
+ else {
945
+ data = this.inputValue;
946
+ }
947
+ this.selectedOption = data;
948
+ this.onChangeCallback(data);
885
949
  }
950
+ this.onTouchedCallback();
886
951
  this.onItemSelection.emit(data);
952
+ this.control?.updateValueAndValidity();
887
953
  }
888
954
  /**
889
955
  * @description method to update dropdown list state on input type
890
956
  * @author Shiva Kant
891
957
  */
892
958
  updateDropdownStatus() {
893
- this.showDropdown = !!this.inputValue;
959
+ if (!this.inputValue || this.inputValue.trim() === '') {
960
+ this.selectedOption = null;
961
+ this.onChangeCallback(null);
962
+ // force validation
963
+ this.control?.updateValueAndValidity();
964
+ this.showDropdown = false;
965
+ return;
966
+ }
967
+ this.showDropdown = true;
894
968
  }
895
969
  /**
896
970
  * @description method to check if the list is Array of string or object
@@ -930,14 +1004,30 @@ class AutoCompleteSingleSelectComponent {
930
1004
  this.onScroll.emit();
931
1005
  }
932
1006
  }
933
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
934
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteSingleSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-single-select", inputs: { autoSingleSelectConfig: "autoSingleSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, ngImport: i0, template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
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: [
1009
+ {
1010
+ provide: NG_VALUE_ACCESSOR,
1011
+ useExisting: AutoCompleteSingleSelectComponent,
1012
+ multi: true,
1013
+ },
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"] }] });
935
1016
  }
936
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
1017
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
937
1018
  type: Component,
938
- args: [{ selector: 'cats-ui-auto-complete-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\" catsOutsideClick (clickOutSide)=\"outsideClicked()\">\r\n <div class=\"input_container\">\r\n <div class=\"input_box\">\r\n <input\r\n class=\"textTruncate\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_single_auto_select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if\r\n (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())\r\n || inputValue == '') {\r\n <li\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n >\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == '') {\r\n <li\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled_option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n\r\n } </ng-container\r\n >}\r\n </ul></ng-container\r\n >}\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--default);cursor:pointer}.main_container .input_container .input_box{width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-900);width:100%;height:100%;border:none;outline:none}.main_container .input_container .input_box .drop_icon{cursor:pointer;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale))}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_single_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_single_auto_select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.main_container .dropdown_list_single_auto_select ul li{height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;padding:calc(1.3333333333rem / var(--scale));cursor:pointer;color:var(--default)}.main_container .dropdown_list_single_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_single_auto_select ul li:hover{background-color:var(--neutral-50)}\n"] }]
1019
+ args: [{ selector: 'cats-ui-input-single-select', imports: [CommonModule, FormsModule, OutsideClickDirective], providers: [
1020
+ {
1021
+ provide: NG_VALUE_ACCESSOR,
1022
+ useExisting: AutoCompleteSingleSelectComponent,
1023
+ multi: true,
1024
+ },
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"] }]
939
1027
  }], ctorParameters: () => [], propDecorators: { autoSingleSelectConfig: [{
940
1028
  type: Input
1029
+ }], placeholder: [{
1030
+ type: Input
941
1031
  }], selectedItem: [{
942
1032
  type: Input
943
1033
  }], optionsList: [{
@@ -1085,14 +1175,14 @@ class AutoCompleteMultiSelectComponent {
1085
1175
  o[this.autoCompleteMultiSelectConfig.textField] ===
1086
1176
  item[this.autoCompleteMultiSelectConfig.textField]);
1087
1177
  if (idx > -1) {
1088
- (this.optionsList[idx]).isSelected = false;
1178
+ this.optionsList[idx].isSelected = false;
1089
1179
  }
1090
1180
  }
1091
1181
  else {
1092
1182
  // string case
1093
1183
  const idx = this.optionsList.findIndex((o) => o === item);
1094
1184
  if (idx > -1) {
1095
- (this.optionsList[idx]).isSelected = false;
1185
+ this.optionsList[idx].isSelected = false;
1096
1186
  }
1097
1187
  }
1098
1188
  // update select all state & emit
@@ -1198,12 +1288,12 @@ class AutoCompleteMultiSelectComponent {
1198
1288
  this.isSelectedAll =
1199
1289
  selectable.length > 0 && selectable.every((opt) => !!opt.isSelected);
1200
1290
  }
1201
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1202
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AutoCompleteMultiSelectComponent, isStandalone: true, selector: "cats-ui-auto-complete-multi-select", inputs: { autoCompleteMultiSelectConfig: "autoCompleteMultiSelectConfig", selectedItem: "selectedItem", optionsList: "optionsList", parentNativeElement: "parentNativeElement" }, outputs: { onItemSelection: "onItemSelection", onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main_container\">\r\n <div\r\n class=\"input_container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips_wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) { @if ($index <\r\n autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"textTruncate\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n } }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
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"] }] });
1203
1293
  }
1204
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
1294
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
1205
1295
  type: Component,
1206
- args: [{ selector: 'cats-ui-auto-complete-multi-select', imports: [CommonModule, FormsModule, OutsideClickDirective], template: "<div class=\"main_container\">\r\n <div\r\n class=\"input_container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips_wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) { @if ($index <\r\n autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"textTruncate\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross_icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n } }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view_more\">\r\n +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div class=\"input_box\" (click)=\"$event.stopPropagation()\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n [placeholder]=\"\r\n selectedOptions.length === 0\r\n ? autoCompleteMultiSelectConfig.placeholder\r\n : ''\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow_icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div class=\"dropdown_list_multi_auto_select\" id=\"container_scroll\" (click)=\" onDivScroll($event)\">\r\n <ul>\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox_container select_all_item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\") {\r\n\r\n <li\r\n class=\"checkbox_container\"\r\n [ngClass]=\"{\r\n disabled_option:\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField]\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'object')\"\r\n />\r\n\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n } } }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)\r\n { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue\r\n == \"\") {\r\n <li\r\n class=\"checkbox_container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"$event.stopPropagation(); updateSelectedItem(item, 'string')\"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n } } }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.main_container{position:relative;width:100%}.main_container .input_container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(4.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));background-color:var(--white);color:var(--neutral-900);cursor:pointer}.main_container .input_container .chips_wrapper .chip,.main_container .input_container .chips_wrapper .view_more{height:calc(3.3333333333rem / var(--scale));background-color:var(--blue-50);color:var(--blue-700);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400;text-wrap:nowrap}.main_container .input_container .chips_wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(1rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:100%}.main_container .input_container .chips_wrapper .view_more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;max-width:calc(4.1666666667rem / var(--scale));text-align:center}.main_container .input_container .chips_wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.main_container .input_container .chips_wrapper .chip span{max-width:calc(12.5rem / var(--scale));font-weight:400}.main_container .input_container .chips_wrapper .chip .cross_icon{max-width:calc(1.6666666667rem / var(--scale))}.main_container .input_container .input_box{width:auto;height:100%;display:flex;flex:1}.main_container .input_container .input_box input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--default);flex:1;border:none;outline:none}.main_container .input_container .arrow_icon img{max-width:calc(2rem / var(--scale))}.main_container .dropdown_list_multi_auto_select{position:absolute;width:100%;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.6666666667rem / var(--scale))}.main_container .dropdown_list_multi_auto_select ul{list-style-type:none;padding:0;margin-bottom:0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.main_container .dropdown_list_multi_auto_select ul li{padding:calc(1.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;cursor:pointer;color:var(--default)}.main_container .dropdown_list_multi_auto_select ul li.disabled_option{opacity:.4;pointer-events:none}.main_container .dropdown_list_multi_auto_select ul li:hover{background-color:var(--neutral-50)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.main_container .dropdown_list_multi_auto_select ul .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/icon-checked.svg)}\n"] }]
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"] }]
1207
1297
  }], ctorParameters: () => [], propDecorators: { autoCompleteMultiSelectConfig: [{
1208
1298
  type: Input
1209
1299
  }], selectedItem: [{
@@ -1242,16 +1332,16 @@ class ToogleButtonComponent {
1242
1332
  setDisabledState(isDisabled) {
1243
1333
  this.toggleConfig.disabled = isDisabled;
1244
1334
  }
1245
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1246
- 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: [
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: [
1247
1337
  {
1248
1338
  provide: NG_VALUE_ACCESSOR,
1249
1339
  useExisting: forwardRef(() => ToogleButtonComponent),
1250
1340
  multi: true,
1251
1341
  },
1252
- ], ngImport: i0, template: "<div class=\"toggle_button\">\r\n <label class=\"switch\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"toggleConfig.checked\" \r\n [disabled]=\"toggleConfig.disabled\"\r\n (change)=\"toggle()\"\r\n />\r\n <span class=\"slider round\"></span>\r\n <span class=\"toggle-status\">\r\n {{ toggleConfig.checked ? 'ON' : 'OFF' }}\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.toggle_button .switch{position:relative;display:flex;width:calc(3rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.toggle_button .switch input{opacity:0;width:0;height:0}.toggle_button .switch input:focus{box-shadow:unset}.toggle_button .switch input+.slider{box-shadow:0 0 calc(.0833333333rem / var(--scale)) var(--box-shadow)}.toggle_button .switch input:checked+.slider{background-color:var(--blue-600)}.toggle_button .switch input:checked+.slider:before{-webkit-transform:translateX(calc(2.1666666667rem / var(--scale)));-ms-transform:translateX(calc(2.1666666667rem / var(--scale)));transform:translate(calc(2.1666666667rem / var(--scale)));left:calc(-.75rem / var(--scale));bottom:calc(.1666666667rem / var(--scale))}.toggle_button .switch .slider{position:absolute;background-color:var(--neutral-100);cursor:pointer;inset:0;transition:.4s}.toggle_button .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));content:\"\";background-color:var(--white);transition:.4s;position:absolute;left:calc(.25rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--box-shadow)}.toggle_button .switch .slider.round{border-radius:calc(1rem / var(--scale))}.toggle_button .switch .slider.round:before{border-radius:50%}.toggle_button .switch .toggle-status{color:var(--white);z-index:9;padding-left:calc(.1666666667rem / var(--scale));font-size:var(--fs-8);line-height:calc(2rem / var(--scale));font-weight:400}\n"] });
1342
+ ], 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"] });
1253
1343
  }
1254
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToogleButtonComponent, decorators: [{
1344
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToogleButtonComponent, decorators: [{
1255
1345
  type: Component,
1256
1346
  args: [{ selector: 'cats-ui-toogle-button', imports: [], providers: [
1257
1347
  {
@@ -1259,7 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1259
1349
  useExisting: forwardRef(() => ToogleButtonComponent),
1260
1350
  multi: true,
1261
1351
  },
1262
- ], template: "<div class=\"toggle_button\">\r\n <label class=\"switch\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"toggleConfig.checked\" \r\n [disabled]=\"toggleConfig.disabled\"\r\n (change)=\"toggle()\"\r\n />\r\n <span class=\"slider round\"></span>\r\n <span class=\"toggle-status\">\r\n {{ toggleConfig.checked ? 'ON' : 'OFF' }}\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.toggle_button .switch{position:relative;display:flex;width:calc(3rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.toggle_button .switch input{opacity:0;width:0;height:0}.toggle_button .switch input:focus{box-shadow:unset}.toggle_button .switch input+.slider{box-shadow:0 0 calc(.0833333333rem / var(--scale)) var(--box-shadow)}.toggle_button .switch input:checked+.slider{background-color:var(--blue-600)}.toggle_button .switch input:checked+.slider:before{-webkit-transform:translateX(calc(2.1666666667rem / var(--scale)));-ms-transform:translateX(calc(2.1666666667rem / var(--scale)));transform:translate(calc(2.1666666667rem / var(--scale)));left:calc(-.75rem / var(--scale));bottom:calc(.1666666667rem / var(--scale))}.toggle_button .switch .slider{position:absolute;background-color:var(--neutral-100);cursor:pointer;inset:0;transition:.4s}.toggle_button .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));content:\"\";background-color:var(--white);transition:.4s;position:absolute;left:calc(.25rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--box-shadow)}.toggle_button .switch .slider.round{border-radius:calc(1rem / var(--scale))}.toggle_button .switch .slider.round:before{border-radius:50%}.toggle_button .switch .toggle-status{color:var(--white);z-index:9;padding-left:calc(.1666666667rem / var(--scale));font-size:var(--fs-8);line-height:calc(2rem / var(--scale));font-weight:400}\n"] }]
1352
+ ], 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"] }]
1263
1353
  }], propDecorators: { toggleConfig: [{
1264
1354
  type: Input
1265
1355
  }], onToggled: [{
@@ -1407,16 +1497,16 @@ class CheckboxButtonComponent {
1407
1497
  });
1408
1498
  }
1409
1499
  }
1410
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1411
- 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: [
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: [
1412
1502
  {
1413
1503
  provide: NG_VALUE_ACCESSOR,
1414
1504
  useExisting: forwardRef(() => CheckboxButtonComponent),
1415
1505
  multi: true,
1416
1506
  },
1417
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] });
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"] });
1418
1508
  }
1419
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxButtonComponent, decorators: [{
1509
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxButtonComponent, decorators: [{
1420
1510
  type: Component,
1421
1511
  args: [{ selector: 'cats-ui-checkbox-button', imports: [], providers: [
1422
1512
  {
@@ -1424,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1424
1514
  useExisting: forwardRef(() => CheckboxButtonComponent),
1425
1515
  multi: true,
1426
1516
  },
1427
- ], template: "<div class=\"parent_container\">\r\n <ul>\r\n @for (task of optionList; let parentIndex = $index; track $index) {\r\n <li>\r\n <!-- Parent Checkbox -->\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"checkBoxConfig.name\"\r\n [checked]=\"task.checked\"\r\n [disabled]=\"\r\n checkBoxConfig.disabledField\r\n ? task[checkBoxConfig.disabledField]\r\n : false\r\n \"\r\n [indeterminate]=\"partiallyComplete(task)\"\r\n (change)=\"onCheckboxChange($event, parentIndex)\"\r\n />\r\n <span class=\"textTruncate\">{{ task[textField] }}</span>\r\n </label>\r\n\r\n <!-- Subtasks -->\r\n @if (task.subtasks && task.subtasks.length > 0) {\r\n <ul class=\"sub\">\r\n @for (sub of task.subtasks; let idx = $index; track $index) {\r\n <li>\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"sub.checked\"\r\n (change)=\"onCheckboxChange($event, parentIndex, idx)\"\r\n />\r\n <!-- <span class=\"checkmark\"></span> -->\r\n <span class=\"label-text\">{{ sub[textField] }}</span>\r\n </label>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.parent_container .sub{margin-left:calc(2.9166666667rem / var(--scale))}.parent_container .checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale))}.parent_container .checkbox_container input[type=checkbox][disabled],.parent_container .checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.parent_container .checkbox_container input[type=checkbox][disabled]+span,.parent_container .checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.parent_container .checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));min-width:calc(2rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.parent_container .checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.1666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background-size:contain;background-repeat:no-repeat;background-position:center}.parent_container .checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\")}.parent_container .checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--blue-600)}.parent_container .checkbox_container input[type=checkbox]:indeterminate:after{display:block;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\">%0D%0A <path d=\"M5 12h14\" stroke=\"%23ffffff\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />%0D%0A</svg>%0D%0A')}\n"] }]
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"] }]
1428
1518
  }], propDecorators: { checkBoxConfig: [{
1429
1519
  type: Input
1430
1520
  }], onCheckBoxSelection: [{
@@ -1529,16 +1619,16 @@ class RadioButtonComponent {
1529
1619
  const key = this.config.valueField ?? 'id';
1530
1620
  return value[key];
1531
1621
  }
1532
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1533
- 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: [
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: [
1534
1624
  {
1535
1625
  provide: NG_VALUE_ACCESSOR,
1536
1626
  useExisting: forwardRef(() => RadioButtonComponent),
1537
1627
  multi: true,
1538
1628
  },
1539
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
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"] }] });
1540
1630
  }
1541
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
1631
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonComponent, decorators: [{
1542
1632
  type: Component,
1543
1633
  args: [{ selector: 'cats-ui-radio-button', imports: [CommonModule, FormsModule], providers: [
1544
1634
  {
@@ -1546,7 +1636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1546
1636
  useExisting: forwardRef(() => RadioButtonComponent),
1547
1637
  multi: true,
1548
1638
  },
1549
- ], template: "<div class=\"radio_group\" [ngClass]=\"config.layout\">\r\n @if (config.label) {\r\n <div class=\"group_label\">{{ config.label }}</div>\r\n }\r\n\r\n <div class=\"radio_option_container\">\r\n @for (option of optionList; track $index) {\r\n <div class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n [name]=\"config.name\"\r\n [id]=\"extractValue(option)\"\r\n [disabled]=\"config.disabled ? option[config.disabled] : false\"\r\n [value]=\"extractValue(option)\"\r\n [(ngModel)]=\"value\"\r\n (change)=\"handleChange(option)\"\r\n />\r\n <label [for]=\"extractValue(option)\">{{ extractLabel(option) }}</label>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.radio_group{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.radio_group.horizontal .radio_option_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.radio_group.horizontal .radio_option_container .radio_option{padding-right:calc(2.5rem / var(--scale))}.radio_group .group_label{margin-bottom:calc(.6666666667rem / var(--scale));font-weight:500}.radio_group .radio_option_container{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\"}.radio_group .radio_option_container .radio_option{margin-bottom:calc(.6666666667rem / var(--scale))}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before,.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));background:var(--white)}.radio_group .radio_option_container .radio_option [type=radio]:checked,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_group .radio_option_container .radio_option [type=radio]:checked+label,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2.5rem / var(--scale));cursor:pointer;display:inline-block;color:var(--default)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:before{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:100%}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after,.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.5833333333rem / var(--scale));left:calc(.5833333333rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_group .radio_option_container .radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_group .radio_option_container .radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}\n"] }]
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"] }]
1550
1640
  }], propDecorators: { config: [{
1551
1641
  type: Input
1552
1642
  }], optionList: [{
@@ -1557,275 +1647,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1557
1647
  type: Input
1558
1648
  }] } });
1559
1649
 
1560
- class DatePickerComponent {
1561
- minDate;
1562
- maxDate;
1563
- date = '';
1564
- isOpen = false;
1565
- selectedDay = 0;
1566
- currentDate = new Date();
1567
- daysInMonth = [];
1568
- calendarView = 'defaultView';
1569
- showYearSelector = false;
1570
- yearRange = [];
1571
- monthRange = {
1572
- '0': 'JAN',
1573
- '01': 'FEB',
1574
- '02': 'MAR',
1575
- '03': 'APR',
1576
- '04': 'MAY',
1577
- '05': 'JUN',
1578
- '06': 'JUL',
1579
- '07': 'AUG',
1580
- '08': 'SEP',
1581
- '09': 'OCT',
1582
- '10': 'NOV',
1583
- '11': 'DEC',
1584
- };
1585
- // constructor(@Optional() @Self() private ngControl: NgControl) {
1586
- // if (this.ngControl != null) {
1587
- // this.ngControl.valueAccessor = this;
1588
- // }
1589
- // }
1590
- onChange = (date) => { };
1591
- onTouched = () => { };
1592
- control;
1593
- disableControl = false;
1594
- writeValue(value) {
1595
- this.date = value || '';
1596
- if (this.date) {
1597
- this.currentDate = new Date(this.date);
1598
- this.selectedDay = this.currentDate.getDate();
1599
- }
1600
- this.generateCalendar();
1601
- }
1602
- registerOnChange(fn) {
1603
- this.onChange = fn;
1604
- }
1605
- registerOnTouched(fn) {
1606
- this.onTouched = fn;
1607
- }
1608
- setDisabledState(isDisabled) {
1609
- // Optional: Handle disabled state
1610
- this.disableControl = isDisabled;
1611
- }
1612
- validate(control) {
1613
- this.control = control;
1614
- const selected = this.date ? new Date(this.date) : null;
1615
- // Check required manually
1616
- const isRequired = control.validator && control.validator(control)?.['required'];
1617
- if ((isRequired || control.hasError('required')) &&
1618
- (!this.date || !this.selectedDay)) {
1619
- return { required: true };
1620
- }
1621
- else if (this.minDate && selected && selected < new Date(this.minDate)) {
1622
- return { minDate: true };
1623
- }
1624
- else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
1625
- return { maxDate: true };
1626
- }
1627
- return null;
1628
- }
1629
- // validate(control: AbstractControl): ValidationErrors | null {
1630
- // this.control = control;
1631
- // const selected = this.date ? new Date(this.date) : null;
1632
- // const hasRequired = control?.validator?.['required'];
1633
- // if (hasRequired && (!this.date || !this.selectedDay)) {
1634
- // return { required: true };
1635
- // } else if (this.minDate && selected && selected < new Date(this.minDate)) {
1636
- // return { minDate: true };
1637
- // } else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
1638
- // return { maxDate: true };
1639
- // }
1640
- // return null;
1641
- // }
1642
- ngOnInit() {
1643
- this.generateYearRange();
1644
- }
1645
- toggleCalendar() {
1646
- this.isOpen = !this.isOpen;
1647
- if (this.date && this.isOpen) {
1648
- this.currentDate = new Date(this.date);
1649
- this.selectedDay = this.currentDate.getDate();
1650
- }
1651
- this.calendarView = 'defaultView';
1652
- this.generateCalendar();
1653
- this.onTouched();
1654
- if (this.isOpen) {
1655
- let ele = document.getElementsByClassName('calendar-footer');
1656
- setTimeout(() => {
1657
- ele[0]?.scrollIntoView();
1658
- });
1659
- }
1660
- }
1661
- selectDate(day) {
1662
- this.selectedDay = day;
1663
- }
1664
- setSelectedDate() {
1665
- this.selectedDay = this.selectedDay || 1;
1666
- const month = this.currentDate.getMonth() + 1;
1667
- const year = this.currentDate.getFullYear();
1668
- this.date = `${month.toString().padStart(2, '0')}/${this.selectedDay
1669
- .toString()
1670
- .padStart(2, '0')}/${year}`;
1671
- this.onChange(this.date);
1672
- this.onTouched();
1673
- }
1674
- closeCalendar() {
1675
- this.isOpen = false;
1676
- this.calendarView = 'defaultView';
1677
- }
1678
- previousMonth() {
1679
- this.selectedDay = 0;
1680
- this.currentDate.setMonth(this.currentDate.getMonth() - 1);
1681
- this.generateCalendar();
1682
- }
1683
- nextMonth() {
1684
- this.selectedDay = 0;
1685
- this.currentDate.setMonth(this.currentDate.getMonth() + 1);
1686
- this.generateCalendar();
1687
- }
1688
- // @HostListener('window:keydown.arrowleft', ['$event'])
1689
- // handleLeftArrow(event: KeyboardEvent): void {
1690
- // if (this.isOpen) {
1691
- // this.previousMonth();
1692
- // }
1693
- // }
1694
- // @HostListener('window:keydown.arrowright', ['$event'])
1695
- // handleRightArrow(event: KeyboardEvent): void {
1696
- // if (this.isOpen) {
1697
- // this.nextMonth();
1698
- // }
1699
- // }
1700
- handleLeftArrow(event) {
1701
- const keyboardEvent = event;
1702
- if (this.isOpen) {
1703
- this.previousMonth();
1704
- }
1705
- }
1706
- handleRightArrow(event) {
1707
- const keyboardEvent = event;
1708
- if (this.isOpen) {
1709
- this.nextMonth();
1710
- }
1711
- }
1712
- // generateCalendar(): void {
1713
- // const year = this.currentDate.getFullYear();
1714
- // const month = this.currentDate.getMonth();
1715
- // const days = new Date(year, month + 1, 0).getDate();
1716
- // this.daysInMonth = Array.from({ length: days }, (_, i) => i + 1);
1717
- // }
1718
- generateCalendar() {
1719
- const year = this.currentDate.getFullYear();
1720
- const month = this.currentDate.getMonth();
1721
- const firstDayOfMonth = new Date(year, month, 1);
1722
- const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
1723
- const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
1724
- const daysInPreviousMonth = new Date(year, month, 0).getDate();
1725
- const totalCells = 42; // 6 rows of 7 days
1726
- const calendarDays = [];
1727
- // Fill previous month days
1728
- for (let i = firstWeekDay - 1; i >= 0; i--) {
1729
- const day = daysInPreviousMonth - i;
1730
- const date = new Date(year, month - 1, day);
1731
- calendarDays.push({ day, date, isCurrentMonth: false });
1732
- }
1733
- // Fill current month days
1734
- for (let day = 1; day <= daysInCurrentMonth; day++) {
1735
- const date = new Date(year, month, day);
1736
- calendarDays.push({ day, date, isCurrentMonth: true });
1737
- }
1738
- // Fill next month days
1739
- const remaining = totalCells - calendarDays.length;
1740
- for (let day = 1; day <= remaining; day++) {
1741
- const date = new Date(year, month + 1, day);
1742
- calendarDays.push({ day, date, isCurrentMonth: false });
1743
- }
1744
- this.daysInMonth = calendarDays;
1745
- }
1746
- getMonthYear() {
1747
- return {
1748
- month: this.currentDate.toLocaleString('default', {
1749
- month: 'long',
1750
- }),
1751
- year: this.currentDate.toLocaleString('default', {
1752
- year: 'numeric',
1753
- }),
1754
- };
1755
- }
1756
- previousYearRange() {
1757
- this.yearRange = this.yearRange.map((year) => year - 20);
1758
- }
1759
- nextYearRange() {
1760
- this.yearRange = this.yearRange.map((year) => year + 20);
1761
- }
1762
- toggleYearSelector() {
1763
- this.showYearSelector = !this.showYearSelector;
1764
- this.generateYearRange();
1765
- }
1766
- selectYear(year) {
1767
- this.currentDate.setFullYear(year);
1768
- this.showYearSelector = false;
1769
- this.calendarView = 'defaultView';
1770
- this.selectedDay = 0;
1771
- this.generateCalendar();
1772
- }
1773
- selectMonth(month) {
1774
- this.currentDate.setMonth(month);
1775
- this.calendarView = 'defaultView';
1776
- this.selectedDay = 0;
1777
- this.generateCalendar();
1778
- }
1779
- generateYearRange() {
1780
- const currentYear = this.currentDate.getFullYear();
1781
- const startYear = currentYear - (currentYear % 20);
1782
- this.yearRange = Array.from({ length: 20 }, (_, i) => startYear + i);
1783
- }
1784
- isDateSelectable(date) {
1785
- const min = this.minDate ? new Date(this.minDate) : null;
1786
- const max = this.maxDate ? new Date(this.maxDate) : null;
1787
- if (min && date < min)
1788
- return false;
1789
- if (max && date > max)
1790
- return false;
1791
- return true;
1792
- }
1793
- isDayDisabled(day) {
1794
- const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day);
1795
- return !this.isDateSelectable(date);
1796
- }
1797
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1798
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: true, selector: "cats-ui-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate" }, host: { listeners: { "window:keydown.arrowleft": "handleLeftArrow($event)", "window:keydown.arrowright": "handleRightArrow($event)" } }, providers: [
1799
- {
1800
- provide: NG_VALUE_ACCESSOR,
1801
- useExisting: forwardRef(() => DatePickerComponent),
1802
- multi: true,
1803
- },
1804
- DatePipe,
1805
- ], ngImport: i0, template: "<div\r\n class=\"date-picker-container\"\r\n catsOutsideClick\r\n (clickOutside)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div (click)=\"toggleCalendar()\">\r\n <input\r\n type=\"text\"\r\n [value]=\"date | date : 'MM/dd/yyy'\"\r\n placeholder=\"MM/DD/YYYY\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n </div>\r\n @if(isOpen){\r\n <div class=\"calendar-popup\">\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n </span>\r\n <div>\r\n <span\r\n class=\"month-year pe-3 pointer\"\r\n (click)=\"calendarView = 'monthView'\"\r\n >{{ getMonthYear().month }}</span\r\n >\r\n <span class=\"month-year pointer\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n </span>\r\n </div>\r\n\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button\" (click)=\"previousYearRange()\">\r\n <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button\" (click)=\"nextYearRange()\">\r\n <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar-grid\">\r\n <div\r\n *ngFor=\"let day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\"\r\n class=\"days_name\"\r\n >\r\n {{ day }}\r\n </div>\r\n\r\n <div\r\n *ngFor=\"let dayObj of daysInMonth\"\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n selected:\r\n dayObj.date.getDate() === selectedDay && dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.date.getDate()),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"selectDate(dayObj.day)\"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n </div>\r\n\r\n <div id=\"calendar-footer\" class=\"calendar-footer\">\r\n <button type=\"button\" class=\"outline_blue\" (click)=\"closeCalendar()\">\r\n Cancel\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"fill_blue\"\r\n (click)=\"closeCalendar(); setSelectedDate()\"\r\n >\r\n Choose Date\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-container{position:relative;display:inline-block;width:100%}.calendar_icon{position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(1.3333333333rem / var(--scale));stroke:var(--textSecondary);cursor:pointer;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}input[type=text]{padding:calc(1.3333333333rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar-popup{position:absolute;top:calc(4.4166666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--border);padding:calc(1.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);width:calc(34.6666666667rem / var(--scale))}.calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textPrimary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary)}.calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-day:hover{background-color:var(--border);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar-footer{margin-top:calc(1.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.calendar-footer button{min-width:calc(10rem / var(--scale));width:100%;font-size:var(--fs-14);line-height:140%;font-weight:400;border:1px solid var(--primaryBlue)}.navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar-day.selected{background-color:var(--primaryOrange);color:var(--white)}.month-year{font-size:var(--fs-12);font-weight:500}.year-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.year-grid,.month-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.year,.month{padding:4px 8px;border-radius:16px;cursor:pointer}.year.selected,.month.selected{color:var(--blue-700)}.year:hover,.month:hover{background-color:var(--border);color:var(--blue-700);transition:ease-in-out .3s}.calendar-day.disabled{color:#ccc;pointer-events:none;background:#f9f9f9}.notInCurrentMonth{pointer-events:none;background-color:#fff}@media only screen and (min-width: 0) and (max-width: 1360px){.year-grid,.month-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
1806
- }
1807
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, decorators: [{
1808
- type: Component,
1809
- args: [{ selector: 'cats-ui-date-picker', imports: [CommonModule, OutsideClickDirective], providers: [
1810
- {
1811
- provide: NG_VALUE_ACCESSOR,
1812
- useExisting: forwardRef(() => DatePickerComponent),
1813
- multi: true,
1814
- },
1815
- DatePipe,
1816
- ], template: "<div\r\n class=\"date-picker-container\"\r\n catsOutsideClick\r\n (clickOutside)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div (click)=\"toggleCalendar()\">\r\n <input\r\n type=\"text\"\r\n [value]=\"date | date : 'MM/dd/yyy'\"\r\n placeholder=\"MM/DD/YYYY\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n </div>\r\n @if(isOpen){\r\n <div class=\"calendar-popup\">\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n </span>\r\n <div>\r\n <span\r\n class=\"month-year pe-3 pointer\"\r\n (click)=\"calendarView = 'monthView'\"\r\n >{{ getMonthYear().month }}</span\r\n >\r\n <span class=\"month-year pointer\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n </span>\r\n </div>\r\n\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button\" (click)=\"previousYearRange()\">\r\n <!-- <i-feather name=\"chevron-left\"></i-feather> -->\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button\" (click)=\"nextYearRange()\">\r\n <!-- <i-feather name=\"chevron-right\"></i-feather> -->\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar-grid\">\r\n <div\r\n *ngFor=\"let day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\"\r\n class=\"days_name\"\r\n >\r\n {{ day }}\r\n </div>\r\n\r\n <div\r\n *ngFor=\"let dayObj of daysInMonth\"\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n selected:\r\n dayObj.date.getDate() === selectedDay && dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.date.getDate()),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"selectDate(dayObj.day)\"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n </div>\r\n\r\n <div id=\"calendar-footer\" class=\"calendar-footer\">\r\n <button type=\"button\" class=\"outline_blue\" (click)=\"closeCalendar()\">\r\n Cancel\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"fill_blue\"\r\n (click)=\"closeCalendar(); setSelectedDate()\"\r\n >\r\n Choose Date\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-container{position:relative;display:inline-block;width:100%}.calendar_icon{position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(1.3333333333rem / var(--scale));stroke:var(--textSecondary);cursor:pointer;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}input[type=text]{padding:calc(1.3333333333rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}input::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}.calendar-popup{position:absolute;top:calc(4.4166666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--border);padding:calc(1.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);width:calc(34.6666666667rem / var(--scale))}.calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textPrimary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary)}.calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar-day:hover{background-color:var(--border);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar-footer{margin-top:calc(1.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.calendar-footer button{min-width:calc(10rem / var(--scale));width:100%;font-size:var(--fs-14);line-height:140%;font-weight:400;border:1px solid var(--primaryBlue)}.navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar-day.selected{background-color:var(--primaryOrange);color:var(--white)}.month-year{font-size:var(--fs-12);font-weight:500}.year-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.year-grid,.month-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.year,.month{padding:4px 8px;border-radius:16px;cursor:pointer}.year.selected,.month.selected{color:var(--blue-700)}.year:hover,.month:hover{background-color:var(--border);color:var(--blue-700);transition:ease-in-out .3s}.calendar-day.disabled{color:#ccc;pointer-events:none;background:#f9f9f9}.notInCurrentMonth{pointer-events:none;background-color:#fff}@media only screen and (min-width: 0) and (max-width: 1360px){.year-grid,.month-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
1817
- }], propDecorators: { minDate: [{
1818
- type: Input
1819
- }], maxDate: [{
1820
- type: Input
1821
- }], handleLeftArrow: [{
1822
- type: HostListener,
1823
- args: ['window:keydown.arrowleft', ['$event']]
1824
- }], handleRightArrow: [{
1825
- type: HostListener,
1826
- args: ['window:keydown.arrowright', ['$event']]
1827
- }] } });
1828
-
1829
1650
  class DateTimePickerComponent {
1830
1651
  locale;
1831
1652
  cd;
@@ -2306,8 +2127,8 @@ class DateTimePickerComponent {
2306
2127
  this.dateTimeSelected.emit(rangeResult);
2307
2128
  }
2308
2129
  }
2309
- 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 });
2310
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: true, selector: "cats-ui-date-time-picker", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected" }, providers: [
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: [
2311
2132
  {
2312
2133
  provide: NG_VALUE_ACCESSOR,
2313
2134
  useExisting: DateTimePickerComponent,
@@ -2319,9 +2140,9 @@ class DateTimePickerComponent {
2319
2140
  multi: true,
2320
2141
  },
2321
2142
  DatePipe,
2322
- ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
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" }] });
2323
2144
  }
2324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
2145
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimePickerComponent, decorators: [{
2325
2146
  type: Component,
2326
2147
  args: [{ selector: 'cats-ui-date-time-picker', imports: [CommonModule, OutsideClickDirective], providers: [
2327
2148
  {
@@ -2335,7 +2156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2335
2156
  multi: true,
2336
2157
  },
2337
2158
  DatePipe,
2338
- ], template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n catsOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n <!-- <i-feather name=\"chevron-left\"></i-feather -->\r\n </span>\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }}</span\r\n >\r\n <span class=\"year\" (click)=\"calendarView = 'yearView'\">{{\r\n getMonthYear().year\r\n }}</span>\r\n </div>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n\r\n <!-- <i-feather name=\"chevron-right\"></i-feather -->\r\n </span>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null && rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button:focus-visible{outline:none;border:0}button i-feather.icon{display:flex}button.primary_btn{background-color:var(--blue-600);color:var(--white)}button.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.disable{pointer-events:none;opacity:.6}button.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-16);line-height:140%;font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-400)}.calendar_wrapper .date_box img{max-width:calc(1.6666666667rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{position:absolute;top:calc(4.6666666667rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(0rem / var(--scale)) calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:auto;min-width:calc(33.3333333333rem / var(--scale));min-height:calc(37.5rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header{height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .navigation-button{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;font-size:var(--fs-20)}.calendar_wrapper .calendar-popup .calendar-header .navigation-button i-feather{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border-radius:calc(1.3333333333rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar-header .month-year:hover{color:var(--blue-700);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(31.25rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600);transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(31.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.6666666667rem / var(--scale));cursor:pointer;background-color:var(--blue-50);width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-16);line-height:calc(2.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);border:calc(.0833333333rem / var(--scale)) solid var(--blue-700);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:not(:last-child){margin-bottom:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{pointer-events:none;color:var(--neutral-300);background-color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times{min-width:calc(7.0833333333rem / var(--scale));max-height:calc(31.25rem / var(--scale));overflow-y:auto;overflow-x:hidden;padding:calc(.6666666667rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--neutral-50);font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time{color:var(--neutral-500);display:inline-block;width:calc(5.75rem / var(--scale));text-align:center;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .times .span_time:hover,.calendar_wrapper .calendar-popup .calendar_body .times .span_time.active{background-color:var(--blue-600);color:var(--white)}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}.custom_disabled{color:var(--neutral-400);pointer-events:none}\n"] }]
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"] }]
2339
2160
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2340
2161
  type: Inject,
2341
2162
  args: [LOCALE_ID]
@@ -2355,12 +2176,15 @@ class CatsUiTooltipDirective {
2355
2176
  el;
2356
2177
  renderer;
2357
2178
  tooltipText = '';
2179
+ tooltipClass = '';
2358
2180
  tooltipEl;
2359
2181
  constructor(el, renderer) {
2360
2182
  this.el = el;
2361
2183
  this.renderer = renderer;
2362
2184
  }
2363
- ngOnInit() { }
2185
+ ngOnInit() {
2186
+ this.showTooltip();
2187
+ }
2364
2188
  ngOnDestroy() {
2365
2189
  this.removeTooltip();
2366
2190
  }
@@ -2386,12 +2210,20 @@ class CatsUiTooltipDirective {
2386
2210
  this.tooltipEl = this.renderer.createElement('div');
2387
2211
  this.tooltipEl.innerText = this.tooltipText;
2388
2212
  this.renderer.setStyle(this.tooltipEl, 'position', 'fixed');
2389
- this.renderer.setStyle(this.tooltipEl, 'padding', '6px 10px');
2390
- this.renderer.setStyle(this.tooltipEl, 'background', '#333');
2391
- this.renderer.setStyle(this.tooltipEl, 'color', '#fff');
2392
- this.renderer.setStyle(this.tooltipEl, 'borderRadius', '4px');
2393
- this.renderer.setStyle(this.tooltipEl, 'zIndex', '9999');
2394
- this.renderer.setStyle(this.tooltipEl, 'whiteSpace', 'nowrap');
2213
+ // this.renderer.setStyle(this.tooltipEl, 'padding', '6px 10px');
2214
+ // this.renderer.setStyle(this.tooltipEl, 'background', '#ffffff');
2215
+ // this.renderer.setStyle(this.tooltipEl, 'color', '#434a51');
2216
+ // this.renderer.setStyle(this.tooltipEl, 'borderRadius', '4px');
2217
+ // this.renderer.setStyle(this.tooltipEl, 'zIndex', '9999');
2218
+ // this.renderer.setStyle(this.tooltipEl, 'whiteSpace', 'nowrap');
2219
+ // Add a custom class if provided
2220
+ if (this.tooltipClass) {
2221
+ this.renderer.addClass(this.tooltipEl, this.tooltipClass);
2222
+ }
2223
+ else {
2224
+ // Optionally, you can add a default class here
2225
+ this.renderer.addClass(this.tooltipEl, 'default-tooltip-class');
2226
+ }
2395
2227
  document.body.appendChild(this.tooltipEl);
2396
2228
  }
2397
2229
  /**
@@ -2443,10 +2275,10 @@ class CatsUiTooltipDirective {
2443
2275
  this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
2444
2276
  this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
2445
2277
  }
2446
- 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 });
2447
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: CatsUiTooltipDirective, isStandalone: true, selector: "[catsUiTooltip]", inputs: { tooltipText: ["catsUiTooltip", "tooltipText"] }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()", "window:resize": "adjustOnWindowChange()", "window:scroll": "adjustOnWindowChange()" } }, ngImport: i0 });
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 });
2448
2280
  }
2449
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
2281
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsUiTooltipDirective, decorators: [{
2450
2282
  type: Directive,
2451
2283
  args: [{
2452
2284
  selector: '[catsUiTooltip]',
@@ -2454,6 +2286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2454
2286
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
2455
2287
  type: Input,
2456
2288
  args: ['catsUiTooltip']
2289
+ }], tooltipClass: [{
2290
+ type: Input
2457
2291
  }], showTooltip: [{
2458
2292
  type: HostListener,
2459
2293
  args: ['mouseenter']
@@ -2487,12 +2321,12 @@ class AccordionComponent {
2487
2321
  isOpen(index) {
2488
2322
  return this.openedIndex === index;
2489
2323
  }
2490
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2491
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AccordionComponent, isStandalone: true, selector: "cats-ui-accordion", ngImport: i0, template: "<div class=\"accordion\">\r\n <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [".accordion{width:100%;max-width:600px;margin:0 auto}\n"] });
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"] });
2492
2326
  }
2493
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionComponent, decorators: [{
2327
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionComponent, decorators: [{
2494
2328
  type: Component,
2495
- args: [{ selector: 'cats-ui-accordion', imports: [], template: "<div class=\"accordion\">\r\n <ng-content></ng-content> <!-- Will contain AccordionItem components -->\r\n</div>\r\n", styles: [".accordion{width:100%;max-width:600px;margin:0 auto}\n"] }]
2329
+ 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"] }]
2496
2330
  }] });
2497
2331
 
2498
2332
  class AccordionItemComponent {
@@ -2528,12 +2362,12 @@ class AccordionItemComponent {
2528
2362
  console.error('No content template provided for accordion item:', this.title);
2529
2363
  }
2530
2364
  }
2531
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
2532
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AccordionItemComponent, isStandalone: true, selector: "cats-ui-accordion-item", inputs: { title: "title", index: "index" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <h3>{{ title }}</h3>\r\n <img [src]=\"isOpen()?'images/chevron-up.svg':'images/chevron-down.svg'\" alt=\"\">\r\n \r\n </div>\r\n @if (isOpen()) {\r\n\r\n <div class=\"accordion-body\" >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion-item{border:1px solid #ccc;margin-bottom:10px}.accordion-header{display:flex;background-color:#f1f1f1;padding:10px;cursor:pointer}.accordion-body{padding:10px;background-color:#fafafa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
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"] }] });
2533
2367
  }
2534
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
2368
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
2535
2369
  type: Component,
2536
- args: [{ selector: 'cats-ui-accordion-item', imports: [CommonModule], template: "<div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <h3>{{ title }}</h3>\r\n <img [src]=\"isOpen()?'images/chevron-up.svg':'images/chevron-down.svg'\" alt=\"\">\r\n \r\n </div>\r\n @if (isOpen()) {\r\n\r\n <div class=\"accordion-body\" >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion-item{border:1px solid #ccc;margin-bottom:10px}.accordion-header{display:flex;background-color:#f1f1f1;padding:10px;cursor:pointer}.accordion-body{padding:10px;background-color:#fafafa}\n"] }]
2370
+ 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"] }]
2537
2371
  }], ctorParameters: () => [{ type: AccordionComponent, decorators: [{
2538
2372
  type: Inject,
2539
2373
  args: [AccordionComponent]
@@ -2546,6 +2380,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2546
2380
  args: [TemplateRef]
2547
2381
  }] } });
2548
2382
 
2383
+ class TabContentDirective {
2384
+ template;
2385
+ constructor(template) {
2386
+ this.template = template;
2387
+ }
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 });
2390
+ }
2391
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, decorators: [{
2392
+ type: Directive,
2393
+ args: [{
2394
+ selector: '[tabContent]',
2395
+ standalone: true,
2396
+ }]
2397
+ }], ctorParameters: () => [{ type: i0.TemplateRef }] });
2398
+
2399
+ class TabHeadingDirective {
2400
+ template;
2401
+ constructor(template) {
2402
+ this.template = template;
2403
+ }
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 });
2406
+ }
2407
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabHeadingDirective, decorators: [{
2408
+ type: Directive,
2409
+ args: [{
2410
+ selector: '[tabHeading]',
2411
+ standalone: true
2412
+ }]
2413
+ }], ctorParameters: () => [{ type: i0.TemplateRef }] });
2414
+
2415
+ class TabItemComponent {
2416
+ heading;
2417
+ 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: [""] });
2420
+ }
2421
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabItemComponent, decorators: [{
2422
+ type: Component,
2423
+ args: [{ selector: 'cats-ui-tab-item', imports: [], template: "<p>tab-item works!</p>\r\n" }]
2424
+ }], propDecorators: { heading: [{
2425
+ type: ContentChild,
2426
+ args: [TabHeadingDirective]
2427
+ }], content: [{
2428
+ type: ContentChild,
2429
+ args: [TabContentDirective]
2430
+ }] } });
2431
+
2432
+ class TabComponent {
2433
+ activeTab = 0;
2434
+ disabledTabs = [];
2435
+ selectTab = new EventEmitter();
2436
+ items;
2437
+ /**
2438
+ * @description Sets active
2439
+ * @author Shiva Kant
2440
+ * @param index
2441
+ */
2442
+ setActive(index) {
2443
+ if (!this.disabledTabs.includes(index)) {
2444
+ this.activeTab = index;
2445
+ this.selectTab.emit(index);
2446
+ }
2447
+ }
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"] }] });
2450
+ }
2451
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabComponent, decorators: [{
2452
+ type: Component,
2453
+ 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
+ }], propDecorators: { activeTab: [{
2455
+ type: Input
2456
+ }], disabledTabs: [{
2457
+ type: Input
2458
+ }], selectTab: [{
2459
+ type: Output
2460
+ }], items: [{
2461
+ type: ContentChildren,
2462
+ args: [TabItemComponent]
2463
+ }] } });
2464
+
2549
2465
  /*
2550
2466
  * Public API Surface of cats-ui
2551
2467
  */
@@ -2554,5 +2470,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2554
2470
  * Generated bundle index. Do not edit.
2555
2471
  */
2556
2472
 
2557
- export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, DatePickerComponent, DateTimePickerComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, ToggleConfig, ToogleButtonComponent };
2473
+ 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 };
2558
2474
  //# sourceMappingURL=cats-ui.mjs.map