cats-ui-lib 2.2.9 → 2.2.10

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 (4) hide show
  1. package/fesm2022/cats-ui-lib.mjs +180 -12
  2. package/fesm2022/cats-ui-lib.mjs.map +1 -1
  3. package/index.d.ts +53 -5
  4. package/package.json +1 -1
package/fesm2022/cats-ui-lib.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, forwardRef, Output, Input, Component, HostListener, ContentChild, ChangeDetectionStrategy, Directive, ViewChild, TemplateRef, Inject, ContentChildren, signal, computed, effect, ViewContainerRef, createComponent } from '@angular/core';
2
+ import { Injectable, EventEmitter, forwardRef, HostListener, Output, Input, Component, ContentChild, ChangeDetectionStrategy, Directive, ViewChild, TemplateRef, Inject, ContentChildren, signal, computed, effect, ViewContainerRef, createComponent } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, NgClass, NgStyle } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -21,16 +21,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
21
21
  }], ctorParameters: () => [] });
22
22
 
23
23
  class InputComponent {
24
+ el;
24
25
  inputConfig;
26
+ selectedValue;
25
27
  onKeyDown = new EventEmitter();
26
28
  onKeyUp = new EventEmitter();
29
+ onDropdownSelection = new EventEmitter();
27
30
  value = '';
28
31
  disabled = false;
29
32
  touched = false;
30
33
  control;
31
34
  showPassword = false;
35
+ openDropdown = null;
36
+ selectedLeadingOption = null;
37
+ selectedTrailingOption = null;
32
38
  onChange = (value) => { };
33
39
  onTouched = () => { };
40
+ constructor(el) {
41
+ this.el = el;
42
+ }
43
+ ngOnChanges(changes) {
44
+ if (changes['inputConfig'] || changes['selectedValue']) {
45
+ this.syncDropdownSelections();
46
+ }
47
+ }
34
48
  /**
35
49
  * @description Method to when value changes
36
50
  * @author Shiva Kant
@@ -38,7 +52,7 @@ class InputComponent {
38
52
  handleInput(event) {
39
53
  const target = event.target;
40
54
  this.value = target.value;
41
- this.onChange(this.value);
55
+ this.emitValueChange();
42
56
  if (this.control) {
43
57
  this.control.markAsDirty();
44
58
  this.control.updateValueAndValidity();
@@ -73,7 +87,9 @@ class InputComponent {
73
87
  * @author Shiva Kant
74
88
  */
75
89
  writeValue(value) {
76
- this.value = value ?? '';
90
+ const hasObjectValue = value && typeof value === 'object' && !Array.isArray(value);
91
+ this.value = hasObjectValue ? (value.value ?? '') : (value ?? '');
92
+ this.syncDropdownSelections(value);
77
93
  }
78
94
  registerOnChange(fn) {
79
95
  this.onChange = fn;
@@ -102,8 +118,128 @@ class InputComponent {
102
118
  togglePassword() {
103
119
  this.showPassword = !this.showPassword;
104
120
  }
105
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
106
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, host: { attributes: { "tabindex": "0" } }, providers: [
121
+ toggleDropdown(position, event) {
122
+ event.stopPropagation();
123
+ if (this.disabled)
124
+ return;
125
+ this.openDropdown = this.openDropdown === position ? null : position;
126
+ }
127
+ selectDropdownOption(position, option, event) {
128
+ event.stopPropagation();
129
+ const config = this.getDropdownConfig(position);
130
+ if (this.isOptionDisabled(option, config))
131
+ return;
132
+ this.onDropdownSelection.emit(option);
133
+ this.openDropdown = null;
134
+ this.touched = true;
135
+ this.onTouched();
136
+ }
137
+ getDropdownText(option, config) {
138
+ if (!option)
139
+ return config?.placeholder || '';
140
+ if (typeof option !== 'object')
141
+ return `${option}`;
142
+ return option[this.getTextField(config)] ?? '';
143
+ }
144
+ getDropdownIcon(option, config) {
145
+ if (!option || typeof option !== 'object')
146
+ return '';
147
+ return option[this.getIconField(config)] || '';
148
+ }
149
+ isDropdownSelected(position, option) {
150
+ const selected = position === 'leading'
151
+ ? this.selectedLeadingOption
152
+ : this.selectedTrailingOption;
153
+ const config = this.getDropdownConfig(position);
154
+ return (this.getOptionId(selected, config) === this.getOptionId(option, config));
155
+ }
156
+ isOptionDisabled(option, config) {
157
+ const disabledField = config?.disabledField;
158
+ return !!(disabledField &&
159
+ typeof option === 'object' &&
160
+ option[disabledField]);
161
+ }
162
+ closeDropdown(event) {
163
+ if (!this.el.nativeElement.contains(event.target)) {
164
+ this.openDropdown = null;
165
+ }
166
+ }
167
+ syncDropdownSelections(value) {
168
+ this.selectedLeadingOption = this.resolveSelectedOption(this.getDropdownConfig('leading'), this.getDropdownSelectedValue('leading', value));
169
+ this.selectedTrailingOption = this.resolveSelectedOption(this.getDropdownConfig('trailing'), this.getDropdownSelectedValue('trailing', value));
170
+ }
171
+ resolveSelectedOption(config, value) {
172
+ if (!config?.options?.length)
173
+ return null;
174
+ const selectedValue = value ?? config.selected;
175
+ if (selectedValue === undefined ||
176
+ selectedValue === null ||
177
+ selectedValue === '') {
178
+ return config.options[0] || null;
179
+ }
180
+ const idField = this.getIdField(config);
181
+ const textField = this.getTextField(config);
182
+ return (config.options.find((option) => {
183
+ if (typeof selectedValue === 'object') {
184
+ return (option[idField] == selectedValue[idField] ||
185
+ option[textField] == selectedValue[textField]);
186
+ }
187
+ return (option[idField] == selectedValue || option[textField] == selectedValue);
188
+ }) || null);
189
+ }
190
+ getDropdownConfig(position) {
191
+ const configuredDropdown = position === 'leading'
192
+ ? this.inputConfig?.leadingDropdown
193
+ : this.inputConfig?.trailingDropdown;
194
+ if (configuredDropdown)
195
+ return configuredDropdown;
196
+ if (this.inputConfig?.showDropdown &&
197
+ this.inputConfig.dropdownPosition === position &&
198
+ this.inputConfig.dropdownOptions?.length) {
199
+ return {
200
+ options: this.inputConfig.dropdownOptions,
201
+ selected: this.inputConfig.dropdownSelected,
202
+ };
203
+ }
204
+ return undefined;
205
+ }
206
+ getIdField(config) {
207
+ return config?.idField || 'id';
208
+ }
209
+ getTextField(config) {
210
+ return config?.textField || 'name';
211
+ }
212
+ getIconField(config) {
213
+ return config?.iconField || 'icon';
214
+ }
215
+ hasDropdownConfig() {
216
+ return !!(this.inputConfig?.showDropdown &&
217
+ (this.inputConfig.leadingDropdown ||
218
+ this.inputConfig.trailingDropdown ||
219
+ this.inputConfig.dropdownOptions?.length));
220
+ }
221
+ getOptionId(option, config) {
222
+ if (!option)
223
+ return null;
224
+ if (typeof option !== 'object')
225
+ return option;
226
+ return option[this.getIdField(config)] ?? option[this.getTextField(config)];
227
+ }
228
+ emitValueChange() {
229
+ this.onChange(this.value);
230
+ }
231
+ getDropdownSelectedValue(position, value) {
232
+ const dropdownValue = position === 'leading' ? value?.leadingDropdown : value?.trailingDropdown;
233
+ if (dropdownValue !== undefined)
234
+ return dropdownValue;
235
+ if (this.inputConfig?.dropdownPosition === position &&
236
+ this.selectedValue !== undefined) {
237
+ return this.selectedValue;
238
+ }
239
+ return undefined;
240
+ }
241
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
242
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: InputComponent, isStandalone: true, selector: "cats-ui-input", inputs: { inputConfig: "inputConfig", selectedValue: "selectedValue" }, outputs: { onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onDropdownSelection: "onDropdownSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "document:click": "closeDropdown($event)" } }, providers: [
107
243
  {
108
244
  provide: NG_VALUE_ACCESSOR,
109
245
  useExisting: forwardRef(() => InputComponent),
@@ -114,7 +250,7 @@ class InputComponent {
114
250
  useExisting: forwardRef(() => InputComponent),
115
251
  multi: true,
116
252
  },
117
- ], ngImport: i0, template: "<div class=\"cats-input-container\">\r\n @if (inputConfig.label) {\r\n <label class=\"cats-label-text\">{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"cats-custom-input\">\r\n <input\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n }\"\r\n class=\"cats-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=\"cats-eye-icon\" (click)=\"togglePassword()\">\r\n <img\r\n class=\"cats-eye-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{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-input-container .cats-label-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);margin-bottom:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box{width:100%;height:calc(4rem / var(--scale));padding:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-body-primary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box::placeholder{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box[type=password]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box:focus{outline:none;border-color:var(--border-interaction-focus)}.cats-input-container .cats-custom-input .cats-input-box.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable::selection{background-color:transparent}.cats-input-container .cats-custom-input .cats-input-box:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-box:disabled+.cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box:disabled::placeholder{color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-eye-icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.cats-input-container .cats-custom-input .cats-eye-icon .cats-eye-img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}::ng-deep input::-ms-reveal,::ng-deep input::-ms-clear{display:none}\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"] }] });
253
+ ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-input-container\">\n @if (inputConfig.label) {\n <label class=\"cats-label-text\">{{ inputConfig.label }}</label>\n }\n <div\n class=\"cats-custom-input\"\n [ngClass]=\"{\n invalid:\n (control?.touched || control?.dirty) &&\n control?.invalid &&\n control?.errors,\n disabled: disabled,\n 'has-leading-dropdown':\n inputConfig.showDropdown &&\n (inputConfig.leadingDropdown ||\n inputConfig.dropdownPosition === 'leading'),\n 'has-trailing-dropdown':\n inputConfig.showDropdown &&\n (inputConfig.trailingDropdown ||\n inputConfig.dropdownPosition === 'trailing'),\n }\"\n >\n @if (\n inputConfig.showDropdown && getDropdownConfig(\"leading\");\n as leadingDropdown\n ) {\n <div\n class=\"cats-input-dropdown leading-dropdown\"\n [class.active]=\"openDropdown === 'leading'\"\n (click)=\"toggleDropdown('leading', $event)\"\n >\n <span class=\"cats-input-dropdown-value textTruncate\">\n @if (getDropdownIcon(selectedLeadingOption, leadingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(selectedLeadingOption, leadingDropdown)\"\n alt=\"\"\n />\n }\n {{ getDropdownText(selectedLeadingOption, leadingDropdown) }}\n </span>\n <img\n class=\"cats-input-dropdown-arrow\"\n src=\"images/chevron-down.svg\"\n alt=\"\"\n />\n @if (openDropdown === \"leading\") {\n <ul class=\"cats-input-dropdown-list\">\n @for (\n option of leadingDropdown.options;\n track getOptionId(option, getDropdownConfig(\"leading\"))\n ) {\n <li\n class=\"cats-input-dropdown-item\"\n [class.selected]=\"isDropdownSelected('leading', option)\"\n [class.disabled-option]=\"\n isOptionDisabled(option, leadingDropdown)\n \"\n (click)=\"selectDropdownOption('leading', option, $event)\"\n >\n @if (getDropdownIcon(option, leadingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(option, leadingDropdown)\"\n alt=\"\"\n />\n }\n <span class=\"textTruncate\">{{\n getDropdownText(option, leadingDropdown)\n }}</span>\n </li>\n }\n </ul>\n }\n </div>\n }\n <input\n [ngClass]=\"{\n invalid:\n (control?.touched || control?.dirty) &&\n control?.invalid &&\n control?.errors,\n }\"\n class=\"cats-input-box\"\n [type]=\"showPassword ? 'text' : inputConfig.type\"\n [placeholder]=\"inputConfig.placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n />\n @if (\n inputConfig.showDropdown && getDropdownConfig(\"trailing\");\n as trailingDropdown\n ) {\n <div\n class=\"cats-input-dropdown trailing-dropdown\"\n [class.active]=\"openDropdown === 'trailing'\"\n (click)=\"toggleDropdown('trailing', $event)\"\n >\n <span class=\"cats-input-dropdown-value textTruncate\">\n @if (getDropdownIcon(selectedTrailingOption, trailingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(selectedTrailingOption, trailingDropdown)\"\n alt=\"\"\n />\n }\n {{ getDropdownText(selectedTrailingOption, trailingDropdown) }}\n </span>\n <img\n class=\"cats-input-dropdown-arrow\"\n src=\"images/chevron-down.svg\"\n alt=\"\"\n />\n @if (openDropdown === \"trailing\") {\n <ul class=\"cats-input-dropdown-list\">\n @for (\n option of trailingDropdown.options;\n track getOptionId(option, getDropdownConfig(\"trailing\"))\n ) {\n <li\n class=\"cats-input-dropdown-item\"\n [class.selected]=\"isDropdownSelected('trailing', option)\"\n [class.disabled-option]=\"\n isOptionDisabled(option, trailingDropdown)\n \"\n (click)=\"selectDropdownOption('trailing', option, $event)\"\n >\n @if (getDropdownIcon(option, trailingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(option, trailingDropdown)\"\n alt=\"\"\n />\n }\n <span class=\"textTruncate\">{{\n getDropdownText(option, trailingDropdown)\n }}</span>\n </li>\n }\n </ul>\n }\n </div>\n }\n <!-- Eye Icon Only When Type Is Password -->\n @if (inputConfig.type === \"password\") {\n <span class=\"cats-eye-icon\" (click)=\"togglePassword()\">\n <img\n class=\"cats-eye-img\"\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\n alt=\"toggle password visibility\"\n />\n </span>\n }\n </div>\n</div>\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-input-container .cats-label-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);margin-bottom:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas);gap:0;height:calc(4rem / var(--scale))}.cats-input-container .cats-custom-input:has(.cats-eye-icon) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input:focus-within{border-color:var(--border-interaction-focus)}.cats-input-container .cats-custom-input.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input.disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-input-container .cats-custom-input.disabled .cats-input-dropdown{color:var(--text-body-muted);pointer-events:none}.cats-input-container .cats-custom-input.disabled .cats-input-dropdown-arrow,.cats-input-container .cats-custom-input.disabled .cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box{width:100%;height:calc(4rem / var(--scale));padding:calc(1rem / var(--scale));border:none;border-radius:calc(.6666666667rem / var(--scale));background:transparent;color:var(--text-body-primary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box::placeholder{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box[type=password]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box:focus{outline:none}.cats-input-container .cats-custom-input .cats-input-box.invalid{background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable::selection{background-color:transparent}.cats-input-container .cats-custom-input .cats-input-box:disabled{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-box:disabled+.cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box:disabled::placeholder{color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown{align-self:stretch;position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));flex:0 0 auto;min-width:calc(9.8333333333rem / var(--scale));max-width:45%;padding:0 calc(1rem / var(--scale));background-color:var(--surface-background-subtle);color:var(--text-body-primary);cursor:pointer;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-dropdown.leading-dropdown{border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown.trailing-dropdown{border-top-right-radius:calc(.5833333333rem / var(--scale));border-bottom-right-radius:calc(.5833333333rem / var(--scale));border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-value,.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));min-width:0}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-icon{width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));flex:0 0 auto;object-fit:contain}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-arrow{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));flex:0 0 auto}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list{position:absolute;top:calc(100% + .3333333333rem / var(--scale));left:0;z-index:3;width:max-content;min-width:100%;max-width:calc(21.6666666667rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;margin:0;padding:calc(.6666666667rem / var(--scale)) 0;list-style:none;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item{height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));white-space:nowrap;cursor:pointer}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item:hover,.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item.selected{background-color:var(--surface-background-blue)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-input-container .cats-custom-input .cats-eye-icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.cats-input-container .cats-custom-input .cats-eye-icon .cats-eye-img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}.cats-input-container .cats-input-error{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));color:var(--semantics-error-default);font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-input-container .cats-input-error img{width:calc(1rem / var(--scale));height:calc(1rem / var(--scale))}::ng-deep input::-ms-reveal,::ng-deep input::-ms-clear{display:none}\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"] }] });
118
254
  }
119
255
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InputComponent, decorators: [{
120
256
  type: Component,
@@ -129,13 +265,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
129
265
  useExisting: forwardRef(() => InputComponent),
130
266
  multi: true,
131
267
  },
132
- ], host: { tabindex: '0' }, template: "<div class=\"cats-input-container\">\r\n @if (inputConfig.label) {\r\n <label class=\"cats-label-text\">{{ inputConfig.label }}</label>\r\n }\r\n <div class=\"cats-custom-input\">\r\n <input\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n }\"\r\n class=\"cats-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=\"cats-eye-icon\" (click)=\"togglePassword()\">\r\n <img\r\n class=\"cats-eye-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{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-input-container .cats-label-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);margin-bottom:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input:has(span) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box{width:100%;height:calc(4rem / var(--scale));padding:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-body-primary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box::placeholder{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box[type=password]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box:focus{outline:none;border-color:var(--border-interaction-focus)}.cats-input-container .cats-custom-input .cats-input-box.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable::selection{background-color:transparent}.cats-input-container .cats-custom-input .cats-input-box:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-box:disabled+.cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box:disabled::placeholder{color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-eye-icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.cats-input-container .cats-custom-input .cats-eye-icon .cats-eye-img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}::ng-deep input::-ms-reveal,::ng-deep input::-ms-clear{display:none}\n"] }]
133
- }], propDecorators: { inputConfig: [{
268
+ ], host: { tabindex: '0' }, template: "<div class=\"cats-input-container\">\n @if (inputConfig.label) {\n <label class=\"cats-label-text\">{{ inputConfig.label }}</label>\n }\n <div\n class=\"cats-custom-input\"\n [ngClass]=\"{\n invalid:\n (control?.touched || control?.dirty) &&\n control?.invalid &&\n control?.errors,\n disabled: disabled,\n 'has-leading-dropdown':\n inputConfig.showDropdown &&\n (inputConfig.leadingDropdown ||\n inputConfig.dropdownPosition === 'leading'),\n 'has-trailing-dropdown':\n inputConfig.showDropdown &&\n (inputConfig.trailingDropdown ||\n inputConfig.dropdownPosition === 'trailing'),\n }\"\n >\n @if (\n inputConfig.showDropdown && getDropdownConfig(\"leading\");\n as leadingDropdown\n ) {\n <div\n class=\"cats-input-dropdown leading-dropdown\"\n [class.active]=\"openDropdown === 'leading'\"\n (click)=\"toggleDropdown('leading', $event)\"\n >\n <span class=\"cats-input-dropdown-value textTruncate\">\n @if (getDropdownIcon(selectedLeadingOption, leadingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(selectedLeadingOption, leadingDropdown)\"\n alt=\"\"\n />\n }\n {{ getDropdownText(selectedLeadingOption, leadingDropdown) }}\n </span>\n <img\n class=\"cats-input-dropdown-arrow\"\n src=\"images/chevron-down.svg\"\n alt=\"\"\n />\n @if (openDropdown === \"leading\") {\n <ul class=\"cats-input-dropdown-list\">\n @for (\n option of leadingDropdown.options;\n track getOptionId(option, getDropdownConfig(\"leading\"))\n ) {\n <li\n class=\"cats-input-dropdown-item\"\n [class.selected]=\"isDropdownSelected('leading', option)\"\n [class.disabled-option]=\"\n isOptionDisabled(option, leadingDropdown)\n \"\n (click)=\"selectDropdownOption('leading', option, $event)\"\n >\n @if (getDropdownIcon(option, leadingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(option, leadingDropdown)\"\n alt=\"\"\n />\n }\n <span class=\"textTruncate\">{{\n getDropdownText(option, leadingDropdown)\n }}</span>\n </li>\n }\n </ul>\n }\n </div>\n }\n <input\n [ngClass]=\"{\n invalid:\n (control?.touched || control?.dirty) &&\n control?.invalid &&\n control?.errors,\n }\"\n class=\"cats-input-box\"\n [type]=\"showPassword ? 'text' : inputConfig.type\"\n [placeholder]=\"inputConfig.placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n />\n @if (\n inputConfig.showDropdown && getDropdownConfig(\"trailing\");\n as trailingDropdown\n ) {\n <div\n class=\"cats-input-dropdown trailing-dropdown\"\n [class.active]=\"openDropdown === 'trailing'\"\n (click)=\"toggleDropdown('trailing', $event)\"\n >\n <span class=\"cats-input-dropdown-value textTruncate\">\n @if (getDropdownIcon(selectedTrailingOption, trailingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(selectedTrailingOption, trailingDropdown)\"\n alt=\"\"\n />\n }\n {{ getDropdownText(selectedTrailingOption, trailingDropdown) }}\n </span>\n <img\n class=\"cats-input-dropdown-arrow\"\n src=\"images/chevron-down.svg\"\n alt=\"\"\n />\n @if (openDropdown === \"trailing\") {\n <ul class=\"cats-input-dropdown-list\">\n @for (\n option of trailingDropdown.options;\n track getOptionId(option, getDropdownConfig(\"trailing\"))\n ) {\n <li\n class=\"cats-input-dropdown-item\"\n [class.selected]=\"isDropdownSelected('trailing', option)\"\n [class.disabled-option]=\"\n isOptionDisabled(option, trailingDropdown)\n \"\n (click)=\"selectDropdownOption('trailing', option, $event)\"\n >\n @if (getDropdownIcon(option, trailingDropdown)) {\n <img\n class=\"cats-input-dropdown-icon\"\n [src]=\"getDropdownIcon(option, trailingDropdown)\"\n alt=\"\"\n />\n }\n <span class=\"textTruncate\">{{\n getDropdownText(option, trailingDropdown)\n }}</span>\n </li>\n }\n </ul>\n }\n </div>\n }\n <!-- Eye Icon Only When Type Is Password -->\n @if (inputConfig.type === \"password\") {\n <span class=\"cats-eye-icon\" (click)=\"togglePassword()\">\n <img\n class=\"cats-eye-img\"\n [src]=\"showPassword ? 'images/eye.svg' : 'images/eye-off.svg'\"\n alt=\"toggle password visibility\"\n />\n </span>\n }\n </div>\n</div>\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-input-container .cats-label-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);margin-bottom:calc(.6666666667rem / var(--scale))}.cats-input-container .cats-custom-input{position:relative;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas);gap:0;height:calc(4rem / var(--scale))}.cats-input-container .cats-custom-input:has(.cats-eye-icon) input[type=text]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input:focus-within{border-color:var(--border-interaction-focus)}.cats-input-container .cats-custom-input.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input.disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-input-container .cats-custom-input.disabled .cats-input-dropdown{color:var(--text-body-muted);pointer-events:none}.cats-input-container .cats-custom-input.disabled .cats-input-dropdown-arrow,.cats-input-container .cats-custom-input.disabled .cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box{width:100%;height:calc(4rem / var(--scale));padding:calc(1rem / var(--scale));border:none;border-radius:calc(.6666666667rem / var(--scale));background:transparent;color:var(--text-body-primary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box::placeholder{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-box[type=password]{padding-right:calc(3.75rem / var(--scale))}.cats-input-container .cats-custom-input .cats-input-box:focus{outline:none}.cats-input-container .cats-custom-input .cats-input-box.invalid{background-color:var(--surface-contextual-red)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-box.selected-disable::selection{background-color:transparent}.cats-input-container .cats-custom-input .cats-input-box:disabled{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-box:disabled+.cats-eye-icon{opacity:.2}.cats-input-container .cats-custom-input .cats-input-box:disabled::placeholder{color:var(--text-body-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown{align-self:stretch;position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));flex:0 0 auto;min-width:calc(9.8333333333rem / var(--scale));max-width:45%;padding:0 calc(1rem / var(--scale));background-color:var(--surface-background-subtle);color:var(--text-body-primary);cursor:pointer;font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-input-container .cats-custom-input .cats-input-dropdown.leading-dropdown{border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown.trailing-dropdown{border-top-right-radius:calc(.5833333333rem / var(--scale));border-bottom-right-radius:calc(.5833333333rem / var(--scale));border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-value,.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));min-width:0}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-icon{width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));flex:0 0 auto;object-fit:contain}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-arrow{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale));flex:0 0 auto}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list{position:absolute;top:calc(100% + .3333333333rem / var(--scale));left:0;z-index:3;width:max-content;min-width:100%;max-width:calc(21.6666666667rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;margin:0;padding:calc(.6666666667rem / var(--scale)) 0;list-style:none;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item{height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));white-space:nowrap;cursor:pointer}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item:hover,.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item.selected{background-color:var(--surface-background-blue)}.cats-input-container .cats-custom-input .cats-input-dropdown .cats-input-dropdown-list .cats-input-dropdown-item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-input-container .cats-custom-input .cats-eye-icon{position:absolute;right:calc(1.3333333333rem / var(--scale))}.cats-input-container .cats-custom-input .cats-eye-icon .cats-eye-img{max-width:calc(1.6666666667rem / var(--scale));cursor:pointer}.cats-input-container .cats-input-error{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));color:var(--semantics-error-default);font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-input-container .cats-input-error img{width:calc(1rem / var(--scale));height:calc(1rem / var(--scale))}::ng-deep input::-ms-reveal,::ng-deep input::-ms-clear{display:none}\n"] }]
269
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputConfig: [{
270
+ type: Input
271
+ }], selectedValue: [{
134
272
  type: Input
135
273
  }], onKeyDown: [{
136
274
  type: Output
137
275
  }], onKeyUp: [{
138
276
  type: Output
277
+ }], onDropdownSelection: [{
278
+ type: Output
279
+ }], closeDropdown: [{
280
+ type: HostListener,
281
+ args: ['document:click', ['$event']]
139
282
  }] } });
140
283
 
141
284
  class SingleSelectConfig {
@@ -172,6 +315,14 @@ class InputConfig {
172
315
  type = 'text';
173
316
  placeholder = 'Enter here';
174
317
  label = 'label';
318
+ showDropdown = false;
319
+ dropdownPosition;
320
+ dropdownOptions;
321
+ dropdownSelected;
322
+ leadingDropdown;
323
+ trailingDropdown;
324
+ errorMessage = 'Error';
325
+ showErrorMessage = false;
175
326
  }
176
327
  class AutoCompleteSingleSelectConfig {
177
328
  idField = 'id';
@@ -4330,6 +4481,7 @@ class SidebarComponent {
4330
4481
  module: firstModule,
4331
4482
  feature: firstFeature,
4332
4483
  attribute: null,
4484
+ activeItem: this.activeItem,
4333
4485
  });
4334
4486
  }
4335
4487
  // Expand defaults (only for non-sectional)
@@ -4367,6 +4519,7 @@ class SidebarComponent {
4367
4519
  module,
4368
4520
  feature: null,
4369
4521
  attribute: null,
4522
+ activeItem: this.activeItem,
4370
4523
  });
4371
4524
  return;
4372
4525
  }
@@ -4409,6 +4562,7 @@ class SidebarComponent {
4409
4562
  module: selectedModule,
4410
4563
  feature: selectedFeature,
4411
4564
  attribute: selectedAttribute,
4565
+ activeItem: this.activeItem,
4412
4566
  });
4413
4567
  }
4414
4568
  onFeatureClick(moduleIndex, featureIndex, feature, navigate) {
@@ -4425,7 +4579,12 @@ class SidebarComponent {
4425
4579
  if (navigate) {
4426
4580
  this.navigateToItem(module, feature, attribute);
4427
4581
  }
4428
- this.activeSidebar.emit({ module, feature, attribute });
4582
+ this.activeSidebar.emit({
4583
+ module,
4584
+ feature,
4585
+ attribute,
4586
+ activeItem: this.activeItem,
4587
+ });
4429
4588
  }
4430
4589
  else {
4431
4590
  this.activeItem = {
@@ -4436,7 +4595,12 @@ class SidebarComponent {
4436
4595
  if (navigate) {
4437
4596
  this.navigateToItem(module, feature);
4438
4597
  }
4439
- this.activeSidebar.emit({ module, feature, attribute: null });
4598
+ this.activeSidebar.emit({
4599
+ module,
4600
+ feature,
4601
+ attribute: null,
4602
+ activeItem: this.activeItem,
4603
+ });
4440
4604
  }
4441
4605
  }
4442
4606
  isActiveItem(moduleIndex, featureIndex, attrIndex) {
@@ -4503,6 +4667,7 @@ class SidebarComponent {
4503
4667
  module: this.appMenus[mIdx],
4504
4668
  feature,
4505
4669
  attribute: feature.attributes?.[0],
4670
+ activeItem: this.activeItem,
4506
4671
  });
4507
4672
  }
4508
4673
  else {
@@ -4516,6 +4681,7 @@ class SidebarComponent {
4516
4681
  module: this.appMenus[mIdx],
4517
4682
  feature,
4518
4683
  attribute: null,
4684
+ activeItem: this.activeItem,
4519
4685
  });
4520
4686
  }
4521
4687
  }
@@ -4551,6 +4717,7 @@ class SidebarComponent {
4551
4717
  module: this.appMenus[mIdx],
4552
4718
  feature,
4553
4719
  attribute: feature.attributes?.[0],
4720
+ activeItem: this.activeItem,
4554
4721
  });
4555
4722
  }
4556
4723
  else {
@@ -4564,6 +4731,7 @@ class SidebarComponent {
4564
4731
  module: this.appMenus[mIdx],
4565
4732
  feature,
4566
4733
  attribute: null,
4734
+ activeItem: this.activeItem,
4567
4735
  });
4568
4736
  }
4569
4737
  }
@@ -4595,11 +4763,11 @@ class SidebarComponent {
4595
4763
  }
4596
4764
  }
4597
4765
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
4598
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SidebarComponent, isStandalone: true, selector: "cats-ui-sidebar", inputs: { appMenus: "appMenus", sidebarConfig: "sidebarConfig", activeItem: "activeItem" }, outputs: { activeSidebar: "activeSidebar" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-sidebar-panel\" [class.collapsed]=\"isCollapsed\">\r\n <!-- Header -->\r\n <div class=\"group-header\">\r\n <div class=\"header-wrapper\" (click)=\"toggleCollapse()\">\r\n <img\r\n class=\"menu-icon\"\r\n [src]=\"\r\n isCollapsed ? 'images/menu-expand.svg' : 'images/menu-collapsed.svg'\r\n \"\r\n alt=\"Toggle menu\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Main Menu -->\r\n <ul class=\"main-menu-list\">\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <li class=\"menu-item-wrapper\" [class.disabled]=\"!module.isEnable\">\r\n <!-- Module Header -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n <div class=\"head-content\">\r\n <img class=\"img-dropdown\" src=\"images/filled-dropdown.svg\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n }\r\n\r\n <!-- Features List -->\r\n @if (\r\n sidebarConfig.sidebarType === \"sectional\" || isModuleExpanded(mIdx)\r\n ) {\r\n <ul class=\"items-wrapper\">\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <li\r\n class=\"items-list\"\r\n [class.disabled]=\"!feature.isEnable\"\r\n [class.cats-show-nested-menu]=\"\r\n isExpandable(feature) &&\r\n isFeatureExpanded(mIdx, fIdx) &&\r\n !isCollapsed\r\n \"\r\n >\r\n <!-- Expanded view -->\r\n <div\r\n class=\"menu-item\"\r\n [class.active]=\"\r\n isActiveItem(mIdx, fIdx) && !isExpandable(feature)\r\n \"\r\n (click)=\"onFeatureClick(mIdx, fIdx, feature)\"\r\n >\r\n <div class=\"item-content\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <!-- Chevron: only when feature has attributes -->\r\n @if (isExpandable(feature)) {\r\n @if (isFeatureExpanded(mIdx, fIdx)) {\r\n <img\r\n class=\"chevron-up-icon\"\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n />\r\n } @else {\r\n <img\r\n class=\"chevron-right-icon\"\r\n src=\"images/chevron-right.svg\"\r\n alt=\"\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Nested Sub-menu -->\r\n @if (isExpandable(feature) && isFeatureExpanded(mIdx, fIdx)) {\r\n <ul class=\"nested-sub-menu\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <li\r\n class=\"nested-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr?.activeIcon\r\n : attr?.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ attr.attributeName }}</span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <div class=\"collapsed-menu\">\r\n <!-- Collapsed view (icon only) -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <!-- Feature Icon (sectional: each feature gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-feature':\r\n collapsedModuleIndex === mIdx && collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"item-content\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx)\"\r\n >\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n </div>\r\n\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n {{ module.moduleName }}\r\n </div>\r\n\r\n <!-- [class.active]=\"collapsedFeatureIndex === fIdx\" -->\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx, 'fIdx')\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n collapsedFeatureIndex === fIdx\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedFeatureIndex === fIdx && isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n {{ feature.featuresName }}\r\n </div>\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <!-- [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\" -->\r\n <div\r\n class=\"attribute-item\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <!-- Module Icon (non-sectional: each module gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx),\r\n 'open-feature': collapsedModuleIndex === mIdx,\r\n }\"\r\n >\r\n <div class=\"item-content\" (click)=\"onCollapsedModuleIconClick(mIdx)\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx) ? module.activeIcon : module.icon\r\n \"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n <span>\r\n {{ module.moduleName }}\r\n </span>\r\n </div>\r\n\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active:\r\n isCollapsedIconActive(mIdx, fIdx) ||\r\n (collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedFeatureClick(mIdx, fIdx)\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"text\">\r\n {{ feature.featuresName }}\r\n </span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx &&\r\n isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n <span>{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <div\r\n class=\"attribute-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n @if (sidebarConfig.switchOrganiser) {\r\n <div class=\"group-footer\">\r\n <img class=\"footer-icon\" src=\"images/shuffle-01.svg\" alt=\"\" />\r\n <span class=\"footer-text\">Switch Organiser</span>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-sidebar-panel{position:absolute;z-index:20;top:0;width:calc(28rem / var(--scale));height:100%;background-color:var(--surface-background-default);padding:0 calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));transition:all ease .3s}.cats-sidebar-panel .group-header{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-header .header-wrapper{width:calc(4.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .group-header .header-wrapper .menu-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list{overflow-y:auto;overflow-x:visible;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(4rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .img-dropdown{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .menu-head{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));min-height:calc(4rem / var(--scale));cursor:pointer}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item{height:calc(4rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .chevron-up-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .collapsed-menu{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item{background-color:var(--surface-background-subtle)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-right-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-up-icon{display:flex}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .nested-sub-menu{max-height:calc(41.6666666667rem / var(--scale));opacity:1}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu{max-height:0;overflow:hidden;opacity:0;transition:all .3s ease}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item{min-height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-left:calc(2.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .group-footer{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);height:calc(4.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-footer .footer-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed{width:calc(5.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed .main-menu-list{display:none}.cats-sidebar-panel.collapsed .collapsed-menu{display:block}.cats-sidebar-panel.collapsed .group-footer .footer-text{display:none}.cats-sidebar-panel .collapsed-menu{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;display:none;flex:1}.cats-sidebar-panel .collapsed-menu .menu-item2{position:relative;width:calc(4.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.cats-sidebar-panel .collapsed-menu .menu-item2 .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section{position:absolute;width:calc(19.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) 0 #00000040;left:calc(6.0833333333rem / var(--scale));top:0;display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .feature-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active .feature-item-wrapper .img-text-wrapper .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.open-attribute .attribute-section-wrapper{display:block}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));left:calc(19.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);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-200);display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active{background-color:var(--surface-background-blue);border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.active{background-color:var(--surface-action-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.open-feature .feature-section{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
4766
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SidebarComponent, isStandalone: true, selector: "cats-ui-sidebar", inputs: { appMenus: "appMenus", sidebarConfig: "sidebarConfig", activeItem: "activeItem" }, outputs: { activeSidebar: "activeSidebar" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-sidebar-panel\" [class.collapsed]=\"isCollapsed\">\r\n <!-- Header -->\r\n <div class=\"group-header\">\r\n <div class=\"header-wrapper\" (click)=\"toggleCollapse()\">\r\n <img\r\n class=\"menu-icon\"\r\n [src]=\"\r\n isCollapsed ? 'images/menu-expand.svg' : 'images/menu-collapsed.svg'\r\n \"\r\n alt=\"Toggle menu\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Main Menu -->\r\n <ul class=\"main-menu-list\">\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <li class=\"menu-item-wrapper\" [class.disabled]=\"!module.isEnable\">\r\n <!-- Module Header -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n <div class=\"head-content\">\r\n <img class=\"img-dropdown\" src=\"images/filled-dropdown.svg\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else if (sidebarConfig.sidebarType !== \"default\") {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n }\r\n\r\n <!-- Features List -->\r\n @if (\r\n sidebarConfig.sidebarType === \"sectional\" || isModuleExpanded(mIdx)\r\n ) {\r\n <ul class=\"items-wrapper\">\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <li\r\n class=\"items-list\"\r\n [class.disabled]=\"!feature.isEnable\"\r\n [class.cats-show-nested-menu]=\"\r\n isExpandable(feature) &&\r\n isFeatureExpanded(mIdx, fIdx) &&\r\n !isCollapsed\r\n \"\r\n >\r\n <!-- Expanded view -->\r\n <div\r\n class=\"menu-item\"\r\n [class.active]=\"\r\n isActiveItem(mIdx, fIdx) && !isExpandable(feature)\r\n \"\r\n (click)=\"onFeatureClick(mIdx, fIdx, feature, true)\"\r\n >\r\n <div class=\"item-content\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <!-- Chevron: only when feature has attributes -->\r\n @if (isExpandable(feature)) {\r\n @if (isFeatureExpanded(mIdx, fIdx)) {\r\n <img\r\n class=\"chevron-up-icon\"\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n />\r\n } @else {\r\n <img\r\n class=\"chevron-right-icon\"\r\n src=\"images/chevron-right.svg\"\r\n alt=\"\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Nested Sub-menu -->\r\n @if (isExpandable(feature) && isFeatureExpanded(mIdx, fIdx)) {\r\n <ul class=\"nested-sub-menu\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <li\r\n class=\"nested-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr?.activeIcon\r\n : attr?.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ attr.attributeName }}</span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <div class=\"collapsed-menu\">\r\n <!-- Collapsed view (icon only) -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <!-- Feature Icon (sectional: each feature gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-feature':\r\n collapsedModuleIndex === mIdx && collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"item-content\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx)\"\r\n >\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n </div>\r\n\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n {{ module.moduleName }}\r\n </div>\r\n\r\n <!-- [class.active]=\"collapsedFeatureIndex === fIdx\" -->\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx, 'fIdx')\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n collapsedFeatureIndex === fIdx\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedFeatureIndex === fIdx && isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n {{ feature.featuresName }}\r\n </div>\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <!-- [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\" -->\r\n <div\r\n class=\"attribute-item\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <!-- Module Icon (non-sectional: each module gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx),\r\n 'open-feature': collapsedModuleIndex === mIdx,\r\n }\"\r\n >\r\n <div class=\"item-content\" (click)=\"onCollapsedModuleIconClick(mIdx)\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx) ? module.activeIcon : module.icon\r\n \"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n <span>\r\n {{ module.moduleName }}\r\n </span>\r\n </div>\r\n\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active:\r\n isCollapsedIconActive(mIdx, fIdx) ||\r\n (collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedFeatureClick(mIdx, fIdx)\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"text\">\r\n {{ feature.featuresName }}\r\n </span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx &&\r\n isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n <span>{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <div\r\n class=\"attribute-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n @if (sidebarConfig.switchOrganiser) {\r\n <div class=\"group-footer\">\r\n <img class=\"footer-icon\" src=\"images/shuffle-01.svg\" alt=\"\" />\r\n <span class=\"footer-text\">Switch Organiser</span>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-sidebar-panel{position:absolute;z-index:20;top:0;width:calc(28rem / var(--scale));height:100%;background-color:var(--surface-background-default);padding:0 calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));transition:all ease .3s}.cats-sidebar-panel .group-header{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-header .header-wrapper{width:calc(4.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .group-header .header-wrapper .menu-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list{overflow-y:auto;overflow-x:visible;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(4rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .img-dropdown{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .menu-head{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));min-height:calc(4rem / var(--scale));cursor:pointer}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item{height:calc(4rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .chevron-up-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .collapsed-menu{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item{background-color:var(--surface-background-subtle)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-right-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-up-icon{display:flex}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .nested-sub-menu{max-height:calc(41.6666666667rem / var(--scale));opacity:1}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu{max-height:0;overflow:hidden;opacity:0;transition:all .3s ease}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item{min-height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-left:calc(2.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .group-footer{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);height:calc(4.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-footer .footer-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed{width:calc(5.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed .main-menu-list{display:none}.cats-sidebar-panel.collapsed .collapsed-menu{display:block}.cats-sidebar-panel.collapsed .group-footer .footer-text{display:none}.cats-sidebar-panel .collapsed-menu{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;display:none;flex:1}.cats-sidebar-panel .collapsed-menu .menu-item2{position:relative;width:calc(4.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.cats-sidebar-panel .collapsed-menu .menu-item2 .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section{position:absolute;width:calc(19.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) 0 #00000040;left:calc(6.0833333333rem / var(--scale));top:0;display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .feature-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active .feature-item-wrapper .img-text-wrapper .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.open-attribute .attribute-section-wrapper{display:block}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));left:calc(19.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);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-200);display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active{background-color:var(--surface-background-blue);border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.active{background-color:var(--surface-action-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.open-feature .feature-section{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
4599
4767
  }
4600
4768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, decorators: [{
4601
4769
  type: Component,
4602
- args: [{ selector: 'cats-ui-sidebar', imports: [NgClass], template: "<div class=\"cats-sidebar-panel\" [class.collapsed]=\"isCollapsed\">\r\n <!-- Header -->\r\n <div class=\"group-header\">\r\n <div class=\"header-wrapper\" (click)=\"toggleCollapse()\">\r\n <img\r\n class=\"menu-icon\"\r\n [src]=\"\r\n isCollapsed ? 'images/menu-expand.svg' : 'images/menu-collapsed.svg'\r\n \"\r\n alt=\"Toggle menu\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Main Menu -->\r\n <ul class=\"main-menu-list\">\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <li class=\"menu-item-wrapper\" [class.disabled]=\"!module.isEnable\">\r\n <!-- Module Header -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n <div class=\"head-content\">\r\n <img class=\"img-dropdown\" src=\"images/filled-dropdown.svg\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n }\r\n\r\n <!-- Features List -->\r\n @if (\r\n sidebarConfig.sidebarType === \"sectional\" || isModuleExpanded(mIdx)\r\n ) {\r\n <ul class=\"items-wrapper\">\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <li\r\n class=\"items-list\"\r\n [class.disabled]=\"!feature.isEnable\"\r\n [class.cats-show-nested-menu]=\"\r\n isExpandable(feature) &&\r\n isFeatureExpanded(mIdx, fIdx) &&\r\n !isCollapsed\r\n \"\r\n >\r\n <!-- Expanded view -->\r\n <div\r\n class=\"menu-item\"\r\n [class.active]=\"\r\n isActiveItem(mIdx, fIdx) && !isExpandable(feature)\r\n \"\r\n (click)=\"onFeatureClick(mIdx, fIdx, feature)\"\r\n >\r\n <div class=\"item-content\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <!-- Chevron: only when feature has attributes -->\r\n @if (isExpandable(feature)) {\r\n @if (isFeatureExpanded(mIdx, fIdx)) {\r\n <img\r\n class=\"chevron-up-icon\"\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n />\r\n } @else {\r\n <img\r\n class=\"chevron-right-icon\"\r\n src=\"images/chevron-right.svg\"\r\n alt=\"\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Nested Sub-menu -->\r\n @if (isExpandable(feature) && isFeatureExpanded(mIdx, fIdx)) {\r\n <ul class=\"nested-sub-menu\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <li\r\n class=\"nested-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr?.activeIcon\r\n : attr?.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ attr.attributeName }}</span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <div class=\"collapsed-menu\">\r\n <!-- Collapsed view (icon only) -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <!-- Feature Icon (sectional: each feature gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-feature':\r\n collapsedModuleIndex === mIdx && collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"item-content\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx)\"\r\n >\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n </div>\r\n\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n {{ module.moduleName }}\r\n </div>\r\n\r\n <!-- [class.active]=\"collapsedFeatureIndex === fIdx\" -->\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx, 'fIdx')\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n collapsedFeatureIndex === fIdx\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedFeatureIndex === fIdx && isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n {{ feature.featuresName }}\r\n </div>\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <!-- [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\" -->\r\n <div\r\n class=\"attribute-item\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <!-- Module Icon (non-sectional: each module gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx),\r\n 'open-feature': collapsedModuleIndex === mIdx,\r\n }\"\r\n >\r\n <div class=\"item-content\" (click)=\"onCollapsedModuleIconClick(mIdx)\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx) ? module.activeIcon : module.icon\r\n \"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n <span>\r\n {{ module.moduleName }}\r\n </span>\r\n </div>\r\n\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active:\r\n isCollapsedIconActive(mIdx, fIdx) ||\r\n (collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedFeatureClick(mIdx, fIdx)\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"text\">\r\n {{ feature.featuresName }}\r\n </span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx &&\r\n isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n <span>{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <div\r\n class=\"attribute-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n @if (sidebarConfig.switchOrganiser) {\r\n <div class=\"group-footer\">\r\n <img class=\"footer-icon\" src=\"images/shuffle-01.svg\" alt=\"\" />\r\n <span class=\"footer-text\">Switch Organiser</span>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-sidebar-panel{position:absolute;z-index:20;top:0;width:calc(28rem / var(--scale));height:100%;background-color:var(--surface-background-default);padding:0 calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));transition:all ease .3s}.cats-sidebar-panel .group-header{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-header .header-wrapper{width:calc(4.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .group-header .header-wrapper .menu-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list{overflow-y:auto;overflow-x:visible;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(4rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .img-dropdown{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .menu-head{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));min-height:calc(4rem / var(--scale));cursor:pointer}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item{height:calc(4rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .chevron-up-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .collapsed-menu{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item{background-color:var(--surface-background-subtle)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-right-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-up-icon{display:flex}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .nested-sub-menu{max-height:calc(41.6666666667rem / var(--scale));opacity:1}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu{max-height:0;overflow:hidden;opacity:0;transition:all .3s ease}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item{min-height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-left:calc(2.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .group-footer{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);height:calc(4.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-footer .footer-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed{width:calc(5.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed .main-menu-list{display:none}.cats-sidebar-panel.collapsed .collapsed-menu{display:block}.cats-sidebar-panel.collapsed .group-footer .footer-text{display:none}.cats-sidebar-panel .collapsed-menu{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;display:none;flex:1}.cats-sidebar-panel .collapsed-menu .menu-item2{position:relative;width:calc(4.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.cats-sidebar-panel .collapsed-menu .menu-item2 .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section{position:absolute;width:calc(19.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) 0 #00000040;left:calc(6.0833333333rem / var(--scale));top:0;display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .feature-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active .feature-item-wrapper .img-text-wrapper .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.open-attribute .attribute-section-wrapper{display:block}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));left:calc(19.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);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-200);display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active{background-color:var(--surface-background-blue);border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.active{background-color:var(--surface-action-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.open-feature .feature-section{display:block}\n"] }]
4770
+ args: [{ selector: 'cats-ui-sidebar', imports: [NgClass], template: "<div class=\"cats-sidebar-panel\" [class.collapsed]=\"isCollapsed\">\r\n <!-- Header -->\r\n <div class=\"group-header\">\r\n <div class=\"header-wrapper\" (click)=\"toggleCollapse()\">\r\n <img\r\n class=\"menu-icon\"\r\n [src]=\"\r\n isCollapsed ? 'images/menu-expand.svg' : 'images/menu-collapsed.svg'\r\n \"\r\n alt=\"Toggle menu\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Main Menu -->\r\n <ul class=\"main-menu-list\">\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <li class=\"menu-item-wrapper\" [class.disabled]=\"!module.isEnable\">\r\n <!-- Module Header -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n <div class=\"head-content\">\r\n <img class=\"img-dropdown\" src=\"images/filled-dropdown.svg\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else if (sidebarConfig.sidebarType !== \"default\") {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"head-content\"\r\n [class.active]=\"isActiveItem(mIdx)\"\r\n (click)=\"toggleModule(mIdx)\"\r\n >\r\n <img class=\"img-dropdown\" [src]=\"module.icon\" alt=\"\" />\r\n <span class=\"menu-head\">{{ module.moduleName }}</span>\r\n </div>\r\n }\r\n\r\n <!-- Features List -->\r\n @if (\r\n sidebarConfig.sidebarType === \"sectional\" || isModuleExpanded(mIdx)\r\n ) {\r\n <ul class=\"items-wrapper\">\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <li\r\n class=\"items-list\"\r\n [class.disabled]=\"!feature.isEnable\"\r\n [class.cats-show-nested-menu]=\"\r\n isExpandable(feature) &&\r\n isFeatureExpanded(mIdx, fIdx) &&\r\n !isCollapsed\r\n \"\r\n >\r\n <!-- Expanded view -->\r\n <div\r\n class=\"menu-item\"\r\n [class.active]=\"\r\n isActiveItem(mIdx, fIdx) && !isExpandable(feature)\r\n \"\r\n (click)=\"onFeatureClick(mIdx, fIdx, feature, true)\"\r\n >\r\n <div class=\"item-content\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <!-- Chevron: only when feature has attributes -->\r\n @if (isExpandable(feature)) {\r\n @if (isFeatureExpanded(mIdx, fIdx)) {\r\n <img\r\n class=\"chevron-up-icon\"\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n />\r\n } @else {\r\n <img\r\n class=\"chevron-right-icon\"\r\n src=\"images/chevron-right.svg\"\r\n alt=\"\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Nested Sub-menu -->\r\n @if (isExpandable(feature) && isFeatureExpanded(mIdx, fIdx)) {\r\n <ul class=\"nested-sub-menu\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <li\r\n class=\"nested-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr?.activeIcon\r\n : attr?.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"menu-text\">{{ attr.attributeName }}</span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <div class=\"collapsed-menu\">\r\n <!-- Collapsed view (icon only) -->\r\n @if (sidebarConfig.sidebarType === \"sectional\") {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <!-- Feature Icon (sectional: each feature gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-feature':\r\n collapsedModuleIndex === mIdx && collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"item-content\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx)\"\r\n >\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n </div>\r\n\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n {{ module.moduleName }}\r\n </div>\r\n\r\n <!-- [class.active]=\"collapsedFeatureIndex === fIdx\" -->\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx, fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedSectionalIconClick(mIdx, fIdx, 'fIdx')\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n collapsedFeatureIndex === fIdx\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedFeatureIndex === fIdx && isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n {{ feature.featuresName }}\r\n </div>\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <!-- [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\" -->\r\n <div\r\n class=\"attribute-item\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @for (module of appMenus; track mIdx; let mIdx = $index) {\r\n <!-- Module Icon (non-sectional: each module gets its own icon) -->\r\n <div\r\n class=\"menu-item2\"\r\n [ngClass]=\"{\r\n active: isCollapsedIconActive(mIdx),\r\n 'open-feature': collapsedModuleIndex === mIdx,\r\n }\"\r\n >\r\n <div class=\"item-content\" (click)=\"onCollapsedModuleIconClick(mIdx)\">\r\n <img\r\n class=\"left-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx) ? module.activeIcon : module.icon\r\n \"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"feature-section\">\r\n <div class=\"feature-dropdown\">\r\n <div class=\"feature-heading\">\r\n <span>\r\n {{ module.moduleName }}\r\n </span>\r\n </div>\r\n\r\n @for (feature of module.features; track fIdx; let fIdx = $index) {\r\n <div\r\n class=\"feature-item\"\r\n [ngClass]=\"{\r\n active:\r\n isCollapsedIconActive(mIdx, fIdx) ||\r\n (collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx),\r\n 'open-attribute':\r\n openAttributeFeatureIndex === fIdx &&\r\n collapsedFeatureIndex === fIdx,\r\n }\"\r\n >\r\n <div\r\n class=\"feature-item-wrapper\"\r\n (click)=\"onCollapsedFeatureClick(mIdx, fIdx)\"\r\n >\r\n <div class=\"img-text-wrapper\">\r\n <img\r\n class=\"feature-icon\"\r\n [src]=\"\r\n isCollapsedIconActive(mIdx, fIdx)\r\n ? feature.activeIcon\r\n : feature.icon\r\n \"\r\n alt=\"\"\r\n />\r\n <span class=\"text\">\r\n {{ feature.featuresName }}\r\n </span>\r\n </div>\r\n\r\n @if (isExpandable(feature)) {\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n }\r\n </div>\r\n\r\n <!-- Attributes -->\r\n @if (\r\n collapsedModuleIndex === mIdx &&\r\n collapsedFeatureIndex === fIdx &&\r\n isExpandable(feature)\r\n ) {\r\n <div class=\"attribute-section-wrapper\">\r\n <div class=\"attribute-heading\">\r\n <span>{{ feature.featuresName }}</span>\r\n </div>\r\n\r\n <div class=\"attribute-section\">\r\n @for (\r\n attr of feature.attributes;\r\n track aIdx;\r\n let aIdx = $index\r\n ) {\r\n <div\r\n class=\"attribute-item\"\r\n [class.active]=\"isActiveItem(mIdx, fIdx, aIdx)\"\r\n (click)=\"setActiveItem(mIdx, fIdx, aIdx, true)\"\r\n >\r\n <img\r\n class=\"attribute-icon\"\r\n [src]=\"\r\n isActiveItem(mIdx, fIdx, aIdx)\r\n ? attr.activeIcon\r\n : attr.icon\r\n \"\r\n />\r\n <span class=\"text\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n @if (sidebarConfig.switchOrganiser) {\r\n <div class=\"group-footer\">\r\n <img class=\"footer-icon\" src=\"images/shuffle-01.svg\" alt=\"\" />\r\n <span class=\"footer-text\">Switch Organiser</span>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);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(--surface-background-canvas);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(--border-core-muted);border-top:0;border-left:0}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{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(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--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-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--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(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-sidebar-panel{position:absolute;z-index:20;top:0;width:calc(28rem / var(--scale));height:100%;background-color:var(--surface-background-default);padding:0 calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));transition:all ease .3s}.cats-sidebar-panel .group-header{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;height:calc(4.6666666667rem / var(--scale));cursor:pointer;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-header .header-wrapper{width:calc(4.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .group-header .header-wrapper .menu-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list{overflow-y:auto;overflow-x:visible;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(4rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .img-dropdown{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .head-content .menu-head{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));min-height:calc(4rem / var(--scale));cursor:pointer}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item{height:calc(4rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item .chevron-up-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .menu-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .collapsed-menu{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item{background-color:var(--surface-background-subtle)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-right-icon{display:none}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .menu-item .chevron-up-icon{display:flex}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list.cats-show-nested-menu .nested-sub-menu{max-height:calc(41.6666666667rem / var(--scale));opacity:1}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu{max-height:0;overflow:hidden;opacity:0;transition:all .3s ease}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item{min-height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-left:calc(2.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item .menu-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active{background-color:var(--surface-action-default)}.cats-sidebar-panel .main-menu-list .menu-item-wrapper .items-wrapper .items-list .nested-sub-menu .nested-item.active .menu-text{color:var(--text-body-inversed)}.cats-sidebar-panel .group-footer{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);height:calc(4.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));cursor:pointer;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-sidebar-panel .group-footer .footer-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed{width:calc(5.6666666667rem / var(--scale))}.cats-sidebar-panel.collapsed .main-menu-list{display:none}.cats-sidebar-panel.collapsed .collapsed-menu{display:block}.cats-sidebar-panel.collapsed .group-footer .footer-text{display:none}.cats-sidebar-panel .collapsed-menu{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;display:none;flex:1}.cats-sidebar-panel .collapsed-menu .menu-item2{position:relative;width:calc(4.3333333333rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.cats-sidebar-panel .collapsed-menu .menu-item2 .item-content .left-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section{position:absolute;width:calc(19.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) 0 #00000040;left:calc(6.0833333333rem / var(--scale));top:0;display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item{position:relative}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .feature-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .feature-item-wrapper .img-text-wrapper .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.active .feature-item-wrapper .img-text-wrapper .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item.open-attribute .attribute-section-wrapper{display:block}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));left:calc(19.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);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-200);display:none}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-heading{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary);cursor:auto}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .attribute-icon{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover{background-color:var(--surface-background-blue)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item:hover .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active{background-color:var(--surface-background-blue);border-radius:calc(.6666666667rem / var(--scale))}.cats-sidebar-panel .collapsed-menu .menu-item2 .feature-section .feature-dropdown .feature-item .attribute-section-wrapper .attribute-item.active .text{color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.active{background-color:var(--surface-action-default);border-radius:calc(.6666666667rem / var(--scale));color:var(--text-link-default)}.cats-sidebar-panel .collapsed-menu .menu-item2.open-feature .feature-section{display:block}\n"] }]
4603
4771
  }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { appMenus: [{
4604
4772
  type: Input
4605
4773
  }], sidebarConfig: [{