cats-ui-lib 2.0.12 → 2.0.14
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.
- package/fesm2022/cats-ui-lib.mjs +30 -41
- package/fesm2022/cats-ui-lib.mjs.map +1 -1
- package/index.d.ts +5 -6
- package/package.json +1 -1
package/fesm2022/cats-ui-lib.mjs
CHANGED
|
@@ -697,14 +697,14 @@ class MultiSelectComponent {
|
|
|
697
697
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MultiSelectComponent, isStandalone: true, selector: "cats-ui-multi-select", inputs: { optionList: "optionList", multiSelectConfig: "multiSelectConfig", selectedOptions: "selectedOptions" }, outputs: { onSelection: "onSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "blur": "onTouched()", "document:click": "closeDropdown($event)" } }, providers: [
|
|
698
698
|
MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
|
|
699
699
|
MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
|
|
700
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && disabledControl,\r\n 'selected-disable': selectedOptions && disabledControl,\r\n }\"\r\n >\r\n <div class=\"left-details\">\r\n @if (multiSelectConfig.prefixLabel) {\r\n <span class=\"predefine-label\">\r\n <p class=\"textTruncate predefine-label-text\">\r\n {{ multiSelectConfig.prefixLabel }}\r\n </p>\r\n </span>\r\n }\r\n <div class=\"multi-label-wrapper\">\r\n @if (selectedOptions.length > 0) {\r\n @for (item of selectedOptions; track $index) {\r\n @if (multiSelectConfig.chipLimit >= $index + 1) {\r\n <div class=\"input-text\">\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (item.isSelected) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate\">\r\n {{ item[multiSelectConfig.textField] }}\r\n </span>\r\n <!-- <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span> -->\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x-circle.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n }\r\n @if (multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view-more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow-icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"cats-dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search-bar\">\r\n <div class=\"input-box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter-search-box\"\r\n name=\"\"\r\n id=\"\"\r\n [placeholder]=\"\r\n multiSelectConfig.searchPlaceholder || 'Search here'\r\n \"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length > 0) {\r\n <li class=\"multiitem\" (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox-container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if (isSelectedAll) {\r\n UnSelectAll\r\n } @else {\r\n SelectAll\r\n }\r\n </span>\r\n </li>\r\n }\r\n @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox-container multiitem\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField],\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': option[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"option[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no-data multiitem\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-wrapper{position:relative;width:100%;height:calc(4rem / var(--scale));min-height:calc(4rem / var(--scale))}.cats-main-wrapper:has(#container_scroll) .display-div{border-color:var(--border-interaction-focus)}.cats-main-wrapper:has(#container_scroll) .display-div.disable-input{border-color:var(--border-core-muted)}.cats-main-wrapper:has(#container_scroll) .display-div.invalid{border-color:var(--semantics-error-default)}.cats-main-wrapper:has(#container_scroll) .display-div.selected-disable{border-color:var(--border-core-muted)}.cats-main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));width:100%;height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.cats-main-wrapper .display-div .left-details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-main-wrapper .display-div .left-details .multi-label-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more,.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-wrap:nowrap}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text span{max-width:calc(16.6666666667rem / var(--scale));font-weight:400}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.8}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-secondary)}.cats-main-wrapper .display-div .left-details .predefine-label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(3.8333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-subtle);color:var(--text-body-primary);border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));margin:0 calc(1rem / var(--scale)) 0 calc(-1rem / var(--scale))}.cats-main-wrapper .display-div .left-details .predefine-label .predefine-label-text{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.cats-main-wrapper .display-div .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-wrapper .display-div.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div.disable-input::selection{background-color:transparent}.cats-main-wrapper .display-div.disable-input .left-details .predefine-label,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text .cross-icon,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more .cross-icon,.cats-main-wrapper .display-div.disable-input .arrow-icon img{opacity:.2}.cats-main-wrapper .display-div.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-wrapper .display-div.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div:has(.view-more) .arrow-icon{margin-left:calc(.8333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list{position:absolute;width:100%;z-index:10;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));overflow:hidden}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box img{opacity:.8;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box{flex-grow:1;border:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);padding:0;min-width:0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box::placeholder{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .cross-icon{cursor:pointer}.cats-main-wrapper .cats-dropdown-list ul{list-style-type:none;padding:0;margin:calc(.6666666667rem / var(--scale)) 0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.cats-main-wrapper .cats-dropdown-list ul li.multiitem{padding:calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.no-data:hover{background-color:unset;cursor:default}.cats-main-wrapper .cats-dropdown-list ul li.multiitem:hover{background-color:var(--surface-background-blue)}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
700
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n invalid:\r\n control?.touched &&\r\n control?.dirty &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && disabledControl,\r\n 'selected-disable': selectedOptions && disabledControl,\r\n }\"\r\n >\r\n <div class=\"left-details\">\r\n @if (multiSelectConfig.prefixLabel) {\r\n <span class=\"predefine-label\">\r\n <p class=\"textTruncate predefine-label-text\">\r\n {{ multiSelectConfig.prefixLabel }}\r\n </p>\r\n </span>\r\n }\r\n <div class=\"multi-label-wrapper\">\r\n @if (selectedOptions.length > 0) {\r\n @for (item of selectedOptions; track $index) {\r\n @if (multiSelectConfig.chipLimit >= $index + 1) {\r\n <div class=\"input-text\">\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (item.isSelected) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate\">\r\n {{ item[multiSelectConfig.textField] }}\r\n </span>\r\n <!-- <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span> -->\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x-circle.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n }\r\n @if (multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view-more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow-icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"cats-dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search-bar\">\r\n <div class=\"input-box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter-search-box\"\r\n name=\"\"\r\n id=\"\"\r\n [placeholder]=\"\r\n multiSelectConfig.searchPlaceholder || 'Search here'\r\n \"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length > 0) {\r\n <li class=\"multiitem\" (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox-container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if (isSelectedAll) {\r\n UnSelectAll\r\n } @else {\r\n SelectAll\r\n }\r\n </span>\r\n </li>\r\n }\r\n @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox-container multiitem\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField],\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': option[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"option[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no-data multiitem\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-wrapper{position:relative;width:100%;height:calc(4rem / var(--scale));min-height:calc(4rem / var(--scale))}.cats-main-wrapper:has(#container_scroll) .display-div{border-color:var(--border-interaction-focus)}.cats-main-wrapper:has(#container_scroll) .display-div.disable-input{border-color:var(--border-core-muted)}.cats-main-wrapper:has(#container_scroll) .display-div.invalid{border-color:var(--semantics-error-default)}.cats-main-wrapper:has(#container_scroll) .display-div.selected-disable{border-color:var(--border-core-muted)}.cats-main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));width:100%;height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.cats-main-wrapper .display-div .left-details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-main-wrapper .display-div .left-details .multi-label-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more,.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-wrap:nowrap}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text span{max-width:calc(16.6666666667rem / var(--scale));font-weight:400}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.8}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-secondary)}.cats-main-wrapper .display-div .left-details .predefine-label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(3.8333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-subtle);color:var(--text-body-primary);border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));margin:0 calc(1rem / var(--scale)) 0 calc(-1rem / var(--scale))}.cats-main-wrapper .display-div .left-details .predefine-label .predefine-label-text{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.cats-main-wrapper .display-div .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-wrapper .display-div.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div.disable-input::selection{background-color:transparent}.cats-main-wrapper .display-div.disable-input .left-details .predefine-label,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text .cross-icon,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more .cross-icon,.cats-main-wrapper .display-div.disable-input .arrow-icon img{opacity:.2}.cats-main-wrapper .display-div.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-wrapper .display-div.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div:has(.view-more) .arrow-icon{margin-left:calc(.8333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list{position:absolute;width:100%;z-index:10;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));overflow:hidden}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box img{opacity:.8;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box{flex-grow:1;border:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);padding:0;min-width:0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box::placeholder{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .cross-icon{cursor:pointer}.cats-main-wrapper .cats-dropdown-list ul{list-style-type:none;padding:0;margin:calc(.6666666667rem / var(--scale)) 0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.cats-main-wrapper .cats-dropdown-list ul li.multiitem{padding:calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.no-data:hover{background-color:unset;cursor:default}.cats-main-wrapper .cats-dropdown-list ul li.multiitem:hover{background-color:var(--surface-background-blue)}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
701
701
|
}
|
|
702
702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
703
703
|
type: Component,
|
|
704
704
|
args: [{ selector: 'cats-ui-multi-select', imports: [NgClass, FormsModule, NgStyle], providers: [
|
|
705
705
|
MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
|
|
706
706
|
MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
|
|
707
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"cats-main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && disabledControl,\r\n 'selected-disable': selectedOptions && disabledControl,\r\n }\"\r\n >\r\n <div class=\"left-details\">\r\n @if (multiSelectConfig.prefixLabel) {\r\n <span class=\"predefine-label\">\r\n <p class=\"textTruncate predefine-label-text\">\r\n {{ multiSelectConfig.prefixLabel }}\r\n </p>\r\n </span>\r\n }\r\n <div class=\"multi-label-wrapper\">\r\n @if (selectedOptions.length > 0) {\r\n @for (item of selectedOptions; track $index) {\r\n @if (multiSelectConfig.chipLimit >= $index + 1) {\r\n <div class=\"input-text\">\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (item.isSelected) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate\">\r\n {{ item[multiSelectConfig.textField] }}\r\n </span>\r\n <!-- <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span> -->\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x-circle.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n }\r\n @if (multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view-more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow-icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"cats-dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search-bar\">\r\n <div class=\"input-box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter-search-box\"\r\n name=\"\"\r\n id=\"\"\r\n [placeholder]=\"\r\n multiSelectConfig.searchPlaceholder || 'Search here'\r\n \"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length > 0) {\r\n <li class=\"multiitem\" (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox-container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if (isSelectedAll) {\r\n UnSelectAll\r\n } @else {\r\n SelectAll\r\n }\r\n </span>\r\n </li>\r\n }\r\n @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox-container multiitem\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField],\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': option[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"option[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no-data multiitem\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-wrapper{position:relative;width:100%;height:calc(4rem / var(--scale));min-height:calc(4rem / var(--scale))}.cats-main-wrapper:has(#container_scroll) .display-div{border-color:var(--border-interaction-focus)}.cats-main-wrapper:has(#container_scroll) .display-div.disable-input{border-color:var(--border-core-muted)}.cats-main-wrapper:has(#container_scroll) .display-div.invalid{border-color:var(--semantics-error-default)}.cats-main-wrapper:has(#container_scroll) .display-div.selected-disable{border-color:var(--border-core-muted)}.cats-main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));width:100%;height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.cats-main-wrapper .display-div .left-details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-main-wrapper .display-div .left-details .multi-label-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more,.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-wrap:nowrap}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text span{max-width:calc(16.6666666667rem / var(--scale));font-weight:400}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.8}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-secondary)}.cats-main-wrapper .display-div .left-details .predefine-label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(3.8333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-subtle);color:var(--text-body-primary);border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));margin:0 calc(1rem / var(--scale)) 0 calc(-1rem / var(--scale))}.cats-main-wrapper .display-div .left-details .predefine-label .predefine-label-text{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.cats-main-wrapper .display-div .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-wrapper .display-div.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div.disable-input::selection{background-color:transparent}.cats-main-wrapper .display-div.disable-input .left-details .predefine-label,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text .cross-icon,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more .cross-icon,.cats-main-wrapper .display-div.disable-input .arrow-icon img{opacity:.2}.cats-main-wrapper .display-div.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-wrapper .display-div.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div:has(.view-more) .arrow-icon{margin-left:calc(.8333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list{position:absolute;width:100%;z-index:10;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));overflow:hidden}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box img{opacity:.8;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box{flex-grow:1;border:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);padding:0;min-width:0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box::placeholder{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .cross-icon{cursor:pointer}.cats-main-wrapper .cats-dropdown-list ul{list-style-type:none;padding:0;margin:calc(.6666666667rem / var(--scale)) 0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.cats-main-wrapper .cats-dropdown-list ul li.multiitem{padding:calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.no-data:hover{background-color:unset;cursor:default}.cats-main-wrapper .cats-dropdown-list ul li.multiitem:hover{background-color:var(--surface-background-blue)}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
707
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: { tabindex: '0' }, template: "<div class=\"cats-main-wrapper\">\r\n <div\r\n class=\"display-div\"\r\n (click)=\"toggleDropdown()\"\r\n [ngClass]=\"{\r\n invalid:\r\n control?.touched &&\r\n control?.dirty &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && disabledControl,\r\n 'selected-disable': selectedOptions && disabledControl,\r\n }\"\r\n >\r\n <div class=\"left-details\">\r\n @if (multiSelectConfig.prefixLabel) {\r\n <span class=\"predefine-label\">\r\n <p class=\"textTruncate predefine-label-text\">\r\n {{ multiSelectConfig.prefixLabel }}\r\n </p>\r\n </span>\r\n }\r\n <div class=\"multi-label-wrapper\">\r\n @if (selectedOptions.length > 0) {\r\n @for (item of selectedOptions; track $index) {\r\n @if (multiSelectConfig.chipLimit >= $index + 1) {\r\n <div class=\"input-text\">\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (item.isSelected) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate\">\r\n {{ item[multiSelectConfig.textField] }}\r\n </span>\r\n <!-- <span class=\"textTruncate\">{{\r\n item[multiSelectConfig.textField]\r\n }}</span> -->\r\n <!-- <i-feather name=\"x\" (click)=\"$event.stopPropagation();updateSelectedOption(item)\"></i-feather> -->\r\n <img\r\n src=\"images/x-circle.svg\"\r\n (click)=\"$event.stopPropagation(); updateSelectedOption(item)\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <span class=\"placeholderColor textTruncate\">{{\r\n multiSelectConfig.placeholder\r\n }}</span>\r\n }\r\n @if (multiSelectConfig.chipLimit < selectedOptions.length) {\r\n <div class=\"view-more\">\r\n +{{ selectedOptions.length - multiSelectConfig.chipLimit }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <span class=\"arrow-icon\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </span>\r\n </div>\r\n @if (showDropdown) {\r\n <div class=\"cats-dropdown-list\" id=\"container_scroll\">\r\n @if (multiSelectConfig.enableSearch) {\r\n <div class=\"search-bar\">\r\n <div class=\"input-box\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n class=\"filter-search-box\"\r\n name=\"\"\r\n id=\"\"\r\n [placeholder]=\"\r\n multiSelectConfig.searchPlaceholder || 'Search here'\r\n \"\r\n [(ngModel)]=\"searchText\"\r\n />\r\n <img\r\n src=\"images/x.svg\"\r\n class=\"cross-icon\"\r\n alt=\"\"\r\n (click)=\"searchText = ''\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n <ul>\r\n @if (multiSelectConfig.selectAll && optionList.length > 0) {\r\n <li class=\"multiitem\" (click)=\"checkUncheckAll()\">\r\n <span class=\"checkbox-container\">\r\n <input type=\"checkbox\" [checked]=\"isSelectedAll\" />\r\n @if (isSelectedAll) {\r\n UnSelectAll\r\n } @else {\r\n SelectAll\r\n }\r\n </span>\r\n </li>\r\n }\r\n @for (option of filteredOptionsValue; track $index) {\r\n <li\r\n class=\"checkbox-container multiitem\"\r\n (click)=\"updateSelectedOption(option)\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n multiSelectConfig.disabledField &&\r\n option[multiSelectConfig.disabledField],\r\n }\"\r\n >\r\n <input type=\"checkbox\" [checked]=\"option.isSelected\" />\r\n <!-- COLOR BADGE -->\r\n @if (multiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': option[multiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (multiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"option[multiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\"\r\n >{{ option[multiSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n } @empty {\r\n <li class=\"no-data multiitem\">No Data Found.</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-wrapper{position:relative;width:100%;height:calc(4rem / var(--scale));min-height:calc(4rem / var(--scale))}.cats-main-wrapper:has(#container_scroll) .display-div{border-color:var(--border-interaction-focus)}.cats-main-wrapper:has(#container_scroll) .display-div.disable-input{border-color:var(--border-core-muted)}.cats-main-wrapper:has(#container_scroll) .display-div.invalid{border-color:var(--semantics-error-default)}.cats-main-wrapper:has(#container_scroll) .display-div.selected-disable{border-color:var(--border-core-muted)}.cats-main-wrapper .display-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));width:100%;height:calc(4rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.cats-main-wrapper .display-div .left-details{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.cats-main-wrapper .display-div .left-details .multi-label-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more,.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-wrap:nowrap}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text span{max-width:calc(16.6666666667rem / var(--scale));font-weight:400}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.8}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .input-text .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .view-more{margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-wrapper .display-div .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-secondary)}.cats-main-wrapper .display-div .left-details .predefine-label{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(.6666666667rem / var(--scale));border:none;height:calc(3.8333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-subtle);color:var(--text-body-primary);border-top-left-radius:calc(.5833333333rem / var(--scale));border-bottom-left-radius:calc(.5833333333rem / var(--scale));margin:0 calc(1rem / var(--scale)) 0 calc(-1rem / var(--scale))}.cats-main-wrapper .display-div .left-details .predefine-label .predefine-label-text{margin-bottom:0;max-width:calc(12.0833333333rem / var(--scale))}.cats-main-wrapper .display-div .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-wrapper .display-div.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div.disable-input::selection{background-color:transparent}.cats-main-wrapper .display-div.disable-input .left-details .predefine-label,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .placeholderColor{color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .input-text .cross-icon,.cats-main-wrapper .display-div.disable-input .left-details .multi-label-wrapper .view-more .cross-icon,.cats-main-wrapper .display-div.disable-input .arrow-icon img{opacity:.2}.cats-main-wrapper .display-div.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-wrapper .display-div.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-wrapper .display-div:has(.view-more) .arrow-icon{margin-left:calc(.8333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list{position:absolute;width:100%;z-index:10;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(4.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar{position:relative;padding:calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));overflow:hidden}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box img{opacity:.8;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box{flex-grow:1;border:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);padding:0;min-width:0}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .filter-search-box::placeholder{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-wrapper .cats-dropdown-list .search-bar .input-box .cross-icon{cursor:pointer}.cats-main-wrapper .cats-dropdown-list ul{list-style-type:none;padding:0;margin:calc(.6666666667rem / var(--scale)) 0;max-height:calc(23.4166666667rem / var(--scale));overflow:auto}.cats-main-wrapper .cats-dropdown-list ul li.multiitem{padding:calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.no-data:hover{background-color:unset;cursor:default}.cats-main-wrapper .cats-dropdown-list ul li.multiitem:hover{background-color:var(--surface-background-blue)}.cats-main-wrapper .cats-dropdown-list ul li.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-wrapper .cats-dropdown-list ul li.multiitem .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
708
708
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { optionList: [{
|
|
709
709
|
type: Input
|
|
710
710
|
}], multiSelectConfig: [{
|
|
@@ -860,7 +860,7 @@ class AutoCompleteSingleSelectComponent {
|
|
|
860
860
|
onTouchedCallback = noop;
|
|
861
861
|
onChangeCallback = noop;
|
|
862
862
|
ngOnChanges(_changes) {
|
|
863
|
-
if (!_changes['
|
|
863
|
+
if (!_changes['optionsList']?.currentValue) {
|
|
864
864
|
}
|
|
865
865
|
else {
|
|
866
866
|
this.writeValue(this.control?.value);
|
|
@@ -909,14 +909,6 @@ class AutoCompleteSingleSelectComponent {
|
|
|
909
909
|
}
|
|
910
910
|
validate(control) {
|
|
911
911
|
this.control = control;
|
|
912
|
-
if (!this.autoSingleSelectConfig.required)
|
|
913
|
-
return null;
|
|
914
|
-
const val = control.value;
|
|
915
|
-
const isEmpty = val === null ||
|
|
916
|
-
val === undefined ||
|
|
917
|
-
val === '' ||
|
|
918
|
-
(typeof val === 'object' && Object.keys(val).length === 0);
|
|
919
|
-
return isEmpty ? { required: true } : null;
|
|
920
912
|
}
|
|
921
913
|
// ---------- Helpers ----------
|
|
922
914
|
syncSelectionWithValue(value) {
|
|
@@ -951,10 +943,20 @@ class AutoCompleteSingleSelectComponent {
|
|
|
951
943
|
}
|
|
952
944
|
else {
|
|
953
945
|
if (this.isObject(this.optionsList?.[0])) {
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
946
|
+
// Try to find existing option
|
|
947
|
+
const matchedOption = this.optionsList.find((o) => o[this.autoSingleSelectConfig.textField]?.toLowerCase()?.trim() ===
|
|
948
|
+
this.inputValue.toLowerCase().trim());
|
|
949
|
+
if (matchedOption) {
|
|
950
|
+
//Use existing object (keeps ID)
|
|
951
|
+
data = matchedOption;
|
|
952
|
+
}
|
|
953
|
+
else {
|
|
954
|
+
// New custom value
|
|
955
|
+
data = {
|
|
956
|
+
[this.autoSingleSelectConfig.idField]: null,
|
|
957
|
+
[this.autoSingleSelectConfig.textField]: this.inputValue,
|
|
958
|
+
};
|
|
959
|
+
}
|
|
958
960
|
}
|
|
959
961
|
else {
|
|
960
962
|
data = this.inputValue;
|
|
@@ -1024,7 +1026,7 @@ class AutoCompleteSingleSelectComponent {
|
|
|
1024
1026
|
multi: true,
|
|
1025
1027
|
},
|
|
1026
1028
|
DROPDOWN_CONTROL_VALUE_VALIDATOR,
|
|
1027
|
-
], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"cats-main-container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n>\r\n <div\r\n class=\"input-container\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedItem && disableControl,\r\n 'selected-disable': selectedItem && disableControl,\r\n }\"\r\n >\r\n <div class=\"input-box\">\r\n @if (selectedItem && autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': selectedItem[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n @if (selectedItem && autoSingleSelectConfig.iconField) {\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"selectedItem[autoSingleSelectConfig.iconField]\"\r\n />\r\n }\r\n <input\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n class=\"textTruncate input-text\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list-single-auto-select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (\r\n item[autoSingleSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"item\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n >\r\n <!-- COLOR BADGE -->\r\n @if (autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n <!-- ICON -->\r\n @if (autoSingleSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoSingleSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == \"\") {\r\n <li\r\n class=\"item\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul></ng-container\r\n >\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container{border-color:var(--border-interaction-focus)}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container.selected-disable{border-color:var(--border-core-muted)}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer;height:inherit}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .input-box .input-text{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .input-text::placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon{opacity:.2}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .input-box{width:calc(100% - 2rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-main-container .input-container .input-box .input-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);width:100%;height:100%;border:none;outline:none;padding:0;background-color:transparent}.cats-main-container .input-container .input-box .input-text::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-container .input-container .input-box .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .input-container .input-box .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .input-container .input-box .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select{position:absolute;width:100%;z-index:2;background: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);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.cats-main-container .dropdown-list-single-auto-select ul li.item{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-container .dropdown-list-single-auto-select ul li.item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-single-auto-select ul li.item:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
|
|
1029
|
+
], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"cats-main-container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n>\r\n <div\r\n class=\"input-container\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedItem && disableControl,\r\n 'selected-disable': selectedItem && disableControl,\r\n }\"\r\n >\r\n <div class=\"input-box\">\r\n @if (selectedItem && autoSingleSelectConfig.colorField && inputValue) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': selectedItem[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n @if (selectedItem && autoSingleSelectConfig.iconField && inputValue) {\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"selectedItem[autoSingleSelectConfig.iconField]\"\r\n />\r\n }\r\n <input\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n class=\"textTruncate input-text\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list-single-auto-select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (\r\n item[autoSingleSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"item\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n >\r\n <!-- COLOR BADGE -->\r\n @if (autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n <!-- ICON -->\r\n @if (autoSingleSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoSingleSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == \"\") {\r\n <li\r\n class=\"item\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul></ng-container\r\n >\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container{border-color:var(--border-interaction-focus)}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container.selected-disable{border-color:var(--border-core-muted)}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer;height:inherit}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .input-box .input-text{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .input-text::placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon{opacity:.2}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .input-box{width:calc(100% - 2rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-main-container .input-container .input-box .input-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);width:100%;height:100%;border:none;outline:none;padding:0;background-color:transparent}.cats-main-container .input-container .input-box .input-text::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-container .input-container .input-box .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .input-container .input-box .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .input-container .input-box .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select{position:absolute;width:100%;z-index:2;background: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);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.cats-main-container .dropdown-list-single-auto-select ul li.item{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-container .dropdown-list-single-auto-select ul li.item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-single-auto-select ul li.item:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
|
|
1028
1030
|
}
|
|
1029
1031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteSingleSelectComponent, decorators: [{
|
|
1030
1032
|
type: Component,
|
|
@@ -1035,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1035
1037
|
multi: true,
|
|
1036
1038
|
},
|
|
1037
1039
|
DROPDOWN_CONTROL_VALUE_VALIDATOR,
|
|
1038
|
-
], host: { tabindex: '0' }, template: "<div\r\n class=\"cats-main-container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n>\r\n <div\r\n class=\"input-container\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedItem && disableControl,\r\n 'selected-disable': selectedItem && disableControl,\r\n }\"\r\n >\r\n <div class=\"input-box\">\r\n @if (selectedItem && autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': selectedItem[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n @if (selectedItem && autoSingleSelectConfig.iconField) {\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"selectedItem[autoSingleSelectConfig.iconField]\"\r\n />\r\n }\r\n <input\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n class=\"textTruncate input-text\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list-single-auto-select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (\r\n item[autoSingleSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"item\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n >\r\n <!-- COLOR BADGE -->\r\n @if (autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n <!-- ICON -->\r\n @if (autoSingleSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoSingleSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == \"\") {\r\n <li\r\n class=\"item\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul></ng-container\r\n >\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container{border-color:var(--border-interaction-focus)}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container.selected-disable{border-color:var(--border-core-muted)}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer;height:inherit}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .input-box .input-text{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .input-text::placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon{opacity:.2}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .input-box{width:calc(100% - 2rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-main-container .input-container .input-box .input-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);width:100%;height:100%;border:none;outline:none;padding:0;background-color:transparent}.cats-main-container .input-container .input-box .input-text::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-container .input-container .input-box .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .input-container .input-box .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .input-container .input-box .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select{position:absolute;width:100%;z-index:2;background: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);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.cats-main-container .dropdown-list-single-auto-select ul li.item{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-container .dropdown-list-single-auto-select ul li.item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-single-auto-select ul li.item:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
1040
|
+
], host: { tabindex: '0' }, template: "<div\r\n class=\"cats-main-container\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n>\r\n <div\r\n class=\"input-container\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedItem && disableControl,\r\n 'selected-disable': selectedItem && disableControl,\r\n }\"\r\n >\r\n <div class=\"input-box\">\r\n @if (selectedItem && autoSingleSelectConfig.colorField && inputValue) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color': selectedItem[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n @if (selectedItem && autoSingleSelectConfig.iconField && inputValue) {\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"selectedItem[autoSingleSelectConfig.iconField]\"\r\n />\r\n }\r\n <input\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n class=\"textTruncate input-text\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n (keyup.enter)=\"onClickEnter(inputValue)\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (input)=\"updateDropdownStatus()\"\r\n [placeholder]=\"autoSingleSelectConfig.placeholder\"\r\n />\r\n </div>\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n alt=\"up-arrow\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n alt=\"down-arrow\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-list-single-auto-select\">\r\n <!-- if optionList is an array of object-->\r\n @if (isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (\r\n item[autoSingleSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"item\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n >\r\n <!-- COLOR BADGE -->\r\n @if (autoSingleSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoSingleSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n <!-- ICON -->\r\n @if (autoSingleSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoSingleSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">\r\n {{ item[autoSingleSelectConfig.textField] }}\r\n </span>\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul>\r\n </ng-container>\r\n }\r\n\r\n <!-- if optionList is an array of string-->\r\n @if (!isObject(optionsList[0])) {\r\n <ng-container>\r\n <ul>\r\n @for (item of optionsList; track $index) {\r\n <ng-container>\r\n @if (item.includes(inputValue) || inputValue == \"\") {\r\n <li\r\n class=\"item\"\r\n [ngClass]=\"\r\n autoSingleSelectConfig.disabledField &&\r\n item[autoSingleSelectConfig.disabledField]\r\n ? 'disabled-option'\r\n : ''\r\n \"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n {{ item }}\r\n </li>\r\n }\r\n </ng-container>\r\n }\r\n </ul></ng-container\r\n >\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container{border-color:var(--border-interaction-focus)}.cats-main-container:has(.dropdown-list-single-auto-select) .input-container.selected-disable{border-color:var(--border-core-muted)}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer;height:inherit}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .input-box .input-text{background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .input-text::placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon{opacity:.2}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .input-box{width:calc(100% - 2rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-main-container .input-container .input-box .input-text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);width:100%;height:100%;border:none;outline:none;padding:0;background-color:transparent}.cats-main-container .input-container .input-box .input-text::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-secondary)}.cats-main-container .input-container .input-box .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .input-container .input-box .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .input-container .input-box .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select{position:absolute;width:100%;z-index:2;background: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);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));top:calc(4.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-single-auto-select ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.6666666667rem / var(--scale)) 0}.cats-main-container .dropdown-list-single-auto-select ul li.item{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));cursor:pointer;margin:0}.cats-main-container .dropdown-list-single-auto-select ul li.item.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-single-auto-select ul li.item:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-single-auto-select ul li.item .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
1039
1041
|
}], ctorParameters: () => [], propDecorators: { autoSingleSelectConfig: [{
|
|
1040
1042
|
type: Input
|
|
1041
1043
|
}], placeholder: [{
|
|
@@ -1116,7 +1118,6 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1116
1118
|
: v === opt);
|
|
1117
1119
|
});
|
|
1118
1120
|
this.onChange(this.selectedOptions);
|
|
1119
|
-
this.onTouched();
|
|
1120
1121
|
this.updateSelectAllState();
|
|
1121
1122
|
}
|
|
1122
1123
|
}
|
|
@@ -1131,19 +1132,14 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1131
1132
|
}
|
|
1132
1133
|
validate(control) {
|
|
1133
1134
|
this.control = control;
|
|
1134
|
-
if (!this.autoCompleteMultiSelectConfig.required)
|
|
1135
|
-
return null;
|
|
1136
|
-
const val = control.value;
|
|
1137
|
-
const isEmpty = val === null ||
|
|
1138
|
-
val === undefined ||
|
|
1139
|
-
val === '' ||
|
|
1140
|
-
(typeof val === 'object' && Object.keys(val).length === 0);
|
|
1141
|
-
return isEmpty ? { required: true } : null;
|
|
1142
1135
|
}
|
|
1143
1136
|
onInput(event) {
|
|
1144
1137
|
const target = event.target;
|
|
1145
1138
|
this.inputValue = target.value;
|
|
1146
1139
|
}
|
|
1140
|
+
handleBlur() {
|
|
1141
|
+
this.onTouched();
|
|
1142
|
+
}
|
|
1147
1143
|
/**
|
|
1148
1144
|
* @description method to update selected item
|
|
1149
1145
|
* @author Shiva Kant
|
|
@@ -1192,7 +1188,6 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1192
1188
|
// keep select all state consistent
|
|
1193
1189
|
this.updateSelectAllState();
|
|
1194
1190
|
this.onChange(this.selectedOptions);
|
|
1195
|
-
this.onTouched();
|
|
1196
1191
|
this.onItemSelection.emit(this.selectedOptions);
|
|
1197
1192
|
}
|
|
1198
1193
|
/**
|
|
@@ -1217,7 +1212,6 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1217
1212
|
const selectedOptionItems = this.optionsList.filter((opt) => opt.isSelected);
|
|
1218
1213
|
this.selectedOptions = [...customChips, ...selectedOptionItems];
|
|
1219
1214
|
this.onChange(this.selectedOptions);
|
|
1220
|
-
this.onTouched();
|
|
1221
1215
|
this.onItemSelection.emit(this.selectedOptions);
|
|
1222
1216
|
}
|
|
1223
1217
|
/**
|
|
@@ -1251,7 +1245,6 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1251
1245
|
// update select all state & emit
|
|
1252
1246
|
this.updateSelectAllState();
|
|
1253
1247
|
this.onChange(this.selectedOptions); // 🔥 THIS updates formControl
|
|
1254
|
-
this.onTouched();
|
|
1255
1248
|
this.onItemSelection.emit(this.selectedOptions);
|
|
1256
1249
|
}
|
|
1257
1250
|
/**
|
|
@@ -1367,7 +1360,7 @@ class AutoCompleteMultiSelectComponent {
|
|
|
1367
1360
|
useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
|
|
1368
1361
|
multi: true,
|
|
1369
1362
|
},
|
|
1370
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-main-container\">\r\n <div\r\n class=\"input-container\"\r\n [class.active]=\"showDropdown\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && isDisabled,\r\n 'selected-disable': selectedOptions && isDisabled,\r\n }\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips-wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) {\r\n @if ($index < autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <!-- <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span> -->\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (\r\n isObject(item) ? item?.isSelected : selectedOptions.includes(item)\r\n ) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x-circle.svg\"\r\n class=\"cross-icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n }\r\n }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view-more\">\r\n +{{\r\n selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit\r\n }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div\r\n class=\"input-box\"\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"multi-select-input\"\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n />\r\n @if (selectedOptions.length === 0 && !inputValue) {\r\n <div class=\"fake-placeholder\" [innerHTML]=\"safePlaceholder\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list-multi-auto-select\"\r\n id=\"container_scroll\"\r\n (click)=\"onDivScroll($event)\"\r\n >\r\n @if (\r\n autoCompleteMultiSelectConfig.infoText ||\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n ) {\r\n <div class=\"headerRow\">\r\n @if (autoCompleteMultiSelectConfig.infoText) {\r\n <span class=\"infoText\">\r\n {{ autoCompleteMultiSelectConfig.infoText }}\r\n </span>\r\n }\r\n\r\n @if (autoCompleteMultiSelectConfig.selectionLimit) {\r\n <span class=\"countText\">\r\n {{ selectedOptions.length }}/{{\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n }}\r\n are Selected\r\n </span>\r\n }\r\n </div>\r\n }\r\n <ul class=\"ul-multi-select\">\r\n <!-- infotext -->\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox-container select-all-item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item[autoCompleteMultiSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField],\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'object')\r\n \"\r\n />\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item.toLowerCase().includes(inputValue.toLowerCase()) ||\r\n inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'string')\r\n \"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));background-color:var(--surface-background-canvas);cursor:pointer;height:inherit;width:100%;box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.cats-main-container .input-container.active{border-color:var(--border-interaction-focus)}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .chips-wrapper .chip,.cats-main-container .input-container .chips-wrapper .view-more{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));text-wrap:nowrap;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .input-container .chips-wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .view-more{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .chip-text{max-width:calc(16.6666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-main-container .input-container .chips-wrapper .chip .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-container .input-container .chips-wrapper .chip .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .input-box{width:auto;height:100%;display:flex;flex:1}.cats-main-container .input-container .input-box .multi-select-input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary);flex:1;border:none;outline:none;padding:0;height:auto;background-color:transparent}.cats-main-container .input-container .input-box .multi-select-input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-body-secondary);pointer-events:none;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale));opacity:.8}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .chips-wrapper .chip{border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .chip-text{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .cross-icon{opacity:.2}.cats-main-container .input-container.disable-input .chips-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .multi-select-input,.cats-main-container .input-container.disable-input .input-box .fake-placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon img{opacity:.2}.cats-main-container .dropdown-list-multi-auto-select{position:absolute;top:calc(4.3333333333rem / var(--scale));width:100%;z-index:2;background:var(--surface-background-canvas);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow),0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow .infoText{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .headerRow .countText{color:var(--text-body-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select{list-style-type:none;max-height:calc(20rem / var(--scale));overflow:auto}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));margin:0;cursor:pointer}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
|
|
1363
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-main-container\">\r\n <div\r\n class=\"input-container\"\r\n [class.active]=\"showDropdown\"\r\n [ngClass]=\"{\r\n invalid: control?.touched && control?.invalid && control?.errors,\r\n 'disable-input': !selectedOptions && isDisabled,\r\n 'selected-disable': selectedOptions && isDisabled,\r\n }\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips-wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) {\r\n @if ($index < autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <!-- <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span> -->\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (\r\n isObject(item) ? item.isSelected : selectedOptions.includes(item)\r\n ) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x-circle.svg\"\r\n class=\"cross-icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n }\r\n }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view-more\">\r\n +{{\r\n selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit\r\n }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div\r\n class=\"input-box\"\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"multi-select-input\"\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (blur)=\"handleBlur()\"\r\n />\r\n @if (selectedOptions.length === 0 && !inputValue) {\r\n <div class=\"fake-placeholder\" [innerHTML]=\"safePlaceholder\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list-multi-auto-select\"\r\n id=\"container_scroll\"\r\n (click)=\"onDivScroll($event)\"\r\n >\r\n @if (\r\n autoCompleteMultiSelectConfig.infoText ||\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n ) {\r\n <div class=\"headerRow\">\r\n @if (autoCompleteMultiSelectConfig.infoText) {\r\n <span class=\"infoText\">\r\n {{ autoCompleteMultiSelectConfig.infoText }}\r\n </span>\r\n }\r\n\r\n @if (autoCompleteMultiSelectConfig.selectionLimit) {\r\n <span class=\"countText\">\r\n {{ selectedOptions.length }}/{{\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n }}\r\n are Selected\r\n </span>\r\n }\r\n </div>\r\n }\r\n <ul class=\"ul-multi-select\">\r\n <!-- infotext -->\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox-container select-all-item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item[autoCompleteMultiSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField],\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'object')\r\n \"\r\n />\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item.toLowerCase().includes(inputValue.toLowerCase()) ||\r\n inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'string')\r\n \"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));background-color:var(--surface-background-canvas);cursor:pointer;height:inherit;width:100%;box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.cats-main-container .input-container.active{border-color:var(--border-interaction-focus)}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .chips-wrapper .chip,.cats-main-container .input-container .chips-wrapper .view-more{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));text-wrap:nowrap;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .input-container .chips-wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .view-more{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .chip-text{max-width:calc(16.6666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-main-container .input-container .chips-wrapper .chip .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-container .input-container .chips-wrapper .chip .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .input-box{width:auto;height:100%;display:flex;flex:1}.cats-main-container .input-container .input-box .multi-select-input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary);flex:1;border:none;outline:none;padding:0;height:auto;background-color:transparent}.cats-main-container .input-container .input-box .multi-select-input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-body-secondary);pointer-events:none;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale));opacity:.8}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .chips-wrapper .chip{border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .chip-text{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .cross-icon{opacity:.2}.cats-main-container .input-container.disable-input .chips-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .multi-select-input,.cats-main-container .input-container.disable-input .input-box .fake-placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon img{opacity:.2}.cats-main-container .dropdown-list-multi-auto-select{position:absolute;top:calc(4.3333333333rem / var(--scale));width:100%;z-index:2;background:var(--surface-background-canvas);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow),0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow .infoText{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .headerRow .countText{color:var(--text-body-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select{list-style-type:none;max-height:calc(20rem / var(--scale));overflow:auto}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));margin:0;cursor:pointer}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: OutsideClickDirective, selector: "[catsOutsideClick]", outputs: ["clickOutSide"] }] });
|
|
1371
1364
|
}
|
|
1372
1365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AutoCompleteMultiSelectComponent, decorators: [{
|
|
1373
1366
|
type: Component,
|
|
@@ -1382,7 +1375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1382
1375
|
useExisting: forwardRef(() => AutoCompleteMultiSelectComponent),
|
|
1383
1376
|
multi: true,
|
|
1384
1377
|
},
|
|
1385
|
-
], host: { tabindex: '0' }, template: "<div class=\"cats-main-container\">\r\n <div\r\n class=\"input-container\"\r\n [class.active]=\"showDropdown\"\r\n [ngClass]=\"{\r\n invalid:\r\n (control?.touched || control?.dirty) &&\r\n control?.invalid &&\r\n control?.errors,\r\n 'disable-input': !selectedOptions && isDisabled,\r\n 'selected-disable': selectedOptions && isDisabled,\r\n }\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips-wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) {\r\n @if ($index < autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <!-- <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span> -->\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (\r\n isObject(item) ? item?.isSelected : selectedOptions.includes(item)\r\n ) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x-circle.svg\"\r\n class=\"cross-icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n }\r\n }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view-more\">\r\n +{{\r\n selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit\r\n }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div\r\n class=\"input-box\"\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"multi-select-input\"\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n />\r\n @if (selectedOptions.length === 0 && !inputValue) {\r\n <div class=\"fake-placeholder\" [innerHTML]=\"safePlaceholder\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list-multi-auto-select\"\r\n id=\"container_scroll\"\r\n (click)=\"onDivScroll($event)\"\r\n >\r\n @if (\r\n autoCompleteMultiSelectConfig.infoText ||\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n ) {\r\n <div class=\"headerRow\">\r\n @if (autoCompleteMultiSelectConfig.infoText) {\r\n <span class=\"infoText\">\r\n {{ autoCompleteMultiSelectConfig.infoText }}\r\n </span>\r\n }\r\n\r\n @if (autoCompleteMultiSelectConfig.selectionLimit) {\r\n <span class=\"countText\">\r\n {{ selectedOptions.length }}/{{\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n }}\r\n are Selected\r\n </span>\r\n }\r\n </div>\r\n }\r\n <ul class=\"ul-multi-select\">\r\n <!-- infotext -->\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox-container select-all-item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item[autoCompleteMultiSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField],\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'object')\r\n \"\r\n />\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item.toLowerCase().includes(inputValue.toLowerCase()) ||\r\n inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'string')\r\n \"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));background-color:var(--surface-background-canvas);cursor:pointer;height:inherit;width:100%;box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.cats-main-container .input-container.active{border-color:var(--border-interaction-focus)}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .chips-wrapper .chip,.cats-main-container .input-container .chips-wrapper .view-more{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));text-wrap:nowrap;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .input-container .chips-wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .view-more{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .chip-text{max-width:calc(16.6666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-main-container .input-container .chips-wrapper .chip .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-container .input-container .chips-wrapper .chip .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .input-box{width:auto;height:100%;display:flex;flex:1}.cats-main-container .input-container .input-box .multi-select-input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary);flex:1;border:none;outline:none;padding:0;height:auto;background-color:transparent}.cats-main-container .input-container .input-box .multi-select-input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-body-secondary);pointer-events:none;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale));opacity:.8}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .chips-wrapper .chip{border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .chip-text{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .cross-icon{opacity:.2}.cats-main-container .input-container.disable-input .chips-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .multi-select-input,.cats-main-container .input-container.disable-input .input-box .fake-placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon img{opacity:.2}.cats-main-container .dropdown-list-multi-auto-select{position:absolute;top:calc(4.3333333333rem / var(--scale));width:100%;z-index:2;background:var(--surface-background-canvas);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow),0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow .infoText{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .headerRow .countText{color:var(--text-body-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select{list-style-type:none;max-height:calc(20rem / var(--scale));overflow:auto}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));margin:0;cursor:pointer}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
1378
|
+
], host: { tabindex: '0' }, template: "<div class=\"cats-main-container\">\r\n <div\r\n class=\"input-container\"\r\n [class.active]=\"showDropdown\"\r\n [ngClass]=\"{\r\n invalid: control?.touched && control?.invalid && control?.errors,\r\n 'disable-input': !selectedOptions && isDisabled,\r\n 'selected-disable': selectedOptions && isDisabled,\r\n }\"\r\n catsOutsideClick\r\n (clickOutSide)=\"outsideClicked()\"\r\n >\r\n <div class=\"chips-wrapper\">\r\n <!-- Chips -->\r\n @for (item of selectedOptions; track $index) {\r\n @if ($index < autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"chip\" (click)=\"$event.stopPropagation()\">\r\n <!-- <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span> -->\r\n <!-- SHOW ONLY WHEN SELECTED -->\r\n @if (\r\n isObject(item) ? item.isSelected : selectedOptions.includes(item)\r\n ) {\r\n <ng-container>\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span>\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- TEXT -->\r\n <span class=\"textTruncate chip-text\">\r\n {{\r\n isObject(item)\r\n ? item[autoCompleteMultiSelectConfig.textField]\r\n : item\r\n }}\r\n </span>\r\n <img\r\n src=\"images/x-circle.svg\"\r\n class=\"cross-icon\"\r\n (click)=\"$event.stopPropagation(); removeChip(item)\"\r\n />\r\n </div>\r\n }\r\n }\r\n <!-- +N counter -->\r\n @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {\r\n <div class=\"view-more\">\r\n +{{\r\n selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit\r\n }}\r\n </div>\r\n }\r\n <!-- Input Box (always available) -->\r\n <div\r\n class=\"input-box\"\r\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"multi-select-input\"\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($event)\"\r\n (keyup.enter)=\"onClickEnter()\"\r\n (keyup)=\"updateDropdownStatus()\"\r\n (blur)=\"handleBlur()\"\r\n />\r\n @if (selectedOptions.length === 0 && !inputValue) {\r\n <div class=\"fake-placeholder\" [innerHTML]=\"safePlaceholder\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown toggle -->\r\n <div class=\"arrow-icon\" (click)=\"toggleDropdown()\">\r\n <img\r\n src=\"images/chevron-up.svg\"\r\n [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n />\r\n <img\r\n src=\"images/chevron-down.svg\"\r\n [ngClass]=\"{ 'd-none': showDropdown }\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n @if (showDropdown) {\r\n <div\r\n class=\"dropdown-list-multi-auto-select\"\r\n id=\"container_scroll\"\r\n (click)=\"onDivScroll($event)\"\r\n >\r\n @if (\r\n autoCompleteMultiSelectConfig.infoText ||\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n ) {\r\n <div class=\"headerRow\">\r\n @if (autoCompleteMultiSelectConfig.infoText) {\r\n <span class=\"infoText\">\r\n {{ autoCompleteMultiSelectConfig.infoText }}\r\n </span>\r\n }\r\n\r\n @if (autoCompleteMultiSelectConfig.selectionLimit) {\r\n <span class=\"countText\">\r\n {{ selectedOptions.length }}/{{\r\n autoCompleteMultiSelectConfig.selectionLimit\r\n }}\r\n are Selected\r\n </span>\r\n }\r\n </div>\r\n }\r\n <ul class=\"ul-multi-select\">\r\n <!-- infotext -->\r\n <!-- Select All -->\r\n @if (autoCompleteMultiSelectConfig.selectAll) {\r\n <li\r\n class=\"checkbox-container select-all-item\"\r\n (click)=\"checkUncheckAll($event)\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"isSelectedAll\"\r\n (click)=\"$event.stopPropagation(); checkUncheckAll($event)\"\r\n />\r\n <span>{{ isSelectedAll ? \"Unselect All\" : \"Select All\" }}</span>\r\n </li>\r\n }\r\n\r\n <!-- Object Options -->\r\n @if (isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item[autoCompleteMultiSelectConfig.textField]\r\n .toLowerCase()\r\n .includes(inputValue.toLowerCase()) || inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n [ngClass]=\"{\r\n 'disabled-option':\r\n autoCompleteMultiSelectConfig.disabledField &&\r\n item[autoCompleteMultiSelectConfig.disabledField],\r\n }\"\r\n (click)=\"updateSelectedItem(item, 'object')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"item.isSelected\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'object')\r\n \"\r\n />\r\n <!-- COLOR BADGE -->\r\n @if (autoCompleteMultiSelectConfig.colorField) {\r\n <span\r\n class=\"cats-color-badge\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n item[autoCompleteMultiSelectConfig.colorField],\r\n }\"\r\n ></span>\r\n }\r\n\r\n <!-- ICON -->\r\n @if (autoCompleteMultiSelectConfig.iconField) {\r\n <span class=\"cats-icon-wrapper\">\r\n <img\r\n class=\"cats-option-icon\"\r\n [src]=\"item[autoCompleteMultiSelectConfig.iconField]\"\r\n alt=\"icon\"\r\n />\r\n </span>\r\n }\r\n <span class=\"textTruncate\">{{\r\n item[autoCompleteMultiSelectConfig.textField]\r\n }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n\r\n <!-- String Options -->\r\n @if (!isObject(optionsList[0])) {\r\n @for (item of optionsList; track $index) {\r\n @if (\r\n item.toLowerCase().includes(inputValue.toLowerCase()) ||\r\n inputValue == \"\"\r\n ) {\r\n <li\r\n class=\"checkbox-container\"\r\n (click)=\"updateSelectedItem(item, 'string')\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"input-checkbox\"\r\n [checked]=\"selectedOptions.includes(item)\"\r\n (click)=\"\r\n $event.stopPropagation(); updateSelectedItem(item, 'string')\r\n \"\r\n />\r\n <span class=\"textTruncate\">{{ item }}</span>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-main-container{position:relative;width:100%;height:calc(4rem / var(--scale))}.cats-main-container .input-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale));background-color:var(--surface-background-canvas);cursor:pointer;height:inherit;width:100%;box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.cats-main-container .input-container.active{border-color:var(--border-interaction-focus)}.cats-main-container .input-container.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.cats-main-container .input-container.selected-disable{pointer-events:none;background-color:var(--surface-background-default);color:var(--text-body-primary);border-color:var(--border-core-muted)}.cats-main-container .input-container.selected-disable::selection{background-color:transparent}.cats-main-container .input-container .chips-wrapper .chip,.cats-main-container .input-container .chips-wrapper .view-more{height:calc(2.3333333333rem / var(--scale));background-color:var(--surface-background-default);color:var(--text-body-primary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(3rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));text-wrap:nowrap;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .input-container .chips-wrapper{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));width:calc(100% - 2rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .view-more{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;text-align:center;max-width:calc(4.1666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .chip-text{max-width:calc(16.6666666667rem / var(--scale))}.cats-main-container .input-container .chips-wrapper .chip .cross-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-main-container .input-container .chips-wrapper .chip .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;display:inline-block}.cats-main-container .input-container .chips-wrapper .chip .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}.cats-main-container .input-container .input-box{width:auto;height:100%;display:flex;flex:1}.cats-main-container .input-container .input-box .multi-select-input{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary);flex:1;border:none;outline:none;padding:0;height:auto;background-color:transparent}.cats-main-container .input-container .input-box .multi-select-input::placeholder{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-body-secondary);pointer-events:none;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .input-container .input-box .fake-placeholder img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-main-container .input-container .arrow-icon img{max-width:calc(2rem / var(--scale));opacity:.8}.cats-main-container .input-container.disable-input{pointer-events:none;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input::selection{background-color:transparent}.cats-main-container .input-container.disable-input .chips-wrapper .chip{border-color:var(--border-core-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .chip-text{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .chips-wrapper .chip .cross-icon{opacity:.2}.cats-main-container .input-container.disable-input .chips-wrapper .view-more{border-color:var(--border-core-muted);color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .input-box .multi-select-input,.cats-main-container .input-container.disable-input .input-box .fake-placeholder{color:var(--text-body-muted)}.cats-main-container .input-container.disable-input .arrow-icon img{opacity:.2}.cats-main-container .dropdown-list-multi-auto-select{position:absolute;top:calc(4.3333333333rem / var(--scale));width:100%;z-index:2;background:var(--surface-background-canvas);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow),0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.cats-main-container .dropdown-list-multi-auto-select .headerRow .infoText{color:var(--text-body-secondary);font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .headerRow .countText{color:var(--text-body-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select{list-style-type:none;max-height:calc(20rem / var(--scale));overflow:auto}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container{height:calc(3.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));margin:0;cursor:pointer}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container:hover{background-color:var(--surface-background-blue)}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-color-badge{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));display:inline-block;border-radius:50%}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-icon-wrapper{display:inline-flex;align-items:center}.cats-main-container .dropdown-list-multi-auto-select .ul-multi-select .checkbox-container .cats-option-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));object-fit:contain}\n"] }]
|
|
1386
1379
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { autoCompleteMultiSelectConfig: [{
|
|
1387
1380
|
type: Input
|
|
1388
1381
|
}], selectedItem: [{
|
|
@@ -1985,7 +1978,6 @@ class CustomDatePickerComponent {
|
|
|
1985
1978
|
onTouched = () => { };
|
|
1986
1979
|
// ─── State ────────────────────────────────────────────────────────────────
|
|
1987
1980
|
isOpen = false;
|
|
1988
|
-
control;
|
|
1989
1981
|
// Single / DateTime
|
|
1990
1982
|
selectedDate = null;
|
|
1991
1983
|
tempDate = null;
|
|
@@ -2211,9 +2203,6 @@ class CustomDatePickerComponent {
|
|
|
2211
2203
|
registerOnTouched(fn) {
|
|
2212
2204
|
this.onTouched = fn;
|
|
2213
2205
|
}
|
|
2214
|
-
validate(control) {
|
|
2215
|
-
this.control = control;
|
|
2216
|
-
}
|
|
2217
2206
|
// ─── Toggle ───────────────────────────────────────────────────────────────
|
|
2218
2207
|
toggleCalendar() {
|
|
2219
2208
|
this.isOpen = true;
|
|
@@ -2756,7 +2745,7 @@ class CustomDatePickerComponent {
|
|
|
2756
2745
|
useExisting: forwardRef(() => CustomDatePickerComponent),
|
|
2757
2746
|
multi: true,
|
|
2758
2747
|
},
|
|
2759
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-wrapper\" id=\"custom-date\">\r\n <!-- Label -->\r\n @if (label) {\r\n <label class=\"date-label\">{{ label }}</label>\r\n }\r\n\r\n <!-- Input Trigger -->\r\n @if (showTrigger) {\r\n <div\r\n class=\"date-input\"\r\n [class.is-open]=\"isOpen\"\r\n [class.has-value]=\"displayValue\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <svg\r\n class=\"calendar-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n\r\n <span class=\"date-input__text\" [class.placeholder]=\"!displayValue\">\r\n {{ displayValue || config.placeholder || \"Select date\" }}\r\n </span>\r\n\r\n @if (displayValue) {\r\n <span class=\"clear-btn\" (click)=\"$event.stopPropagation(); clearDate()\">\r\n <img src=\"images/x.svg\" alt=\"\" />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Calendar Dropdown -->\r\n @if (!showTrigger || isOpen) {\r\n <div\r\n class=\"calendar-dropdown sp-16 br-8\"\r\n [ngClass]=\"{ 'month-year-view': calenderView != 'day' }\"\r\n >\r\n <div class=\"calendar-header sm-b-12\">\r\n <div class=\"nav-btn br-4\" (click)=\"prevMonth()\" type=\"button\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"month-year body-medium\">\r\n @if (mode === \"dual\") {\r\n @if (calenderView == \"day\" || activeCalendar != \"secondary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('primary', 'month')\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('primary', 'year')\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n\r\n @if (calenderView == \"day\" || activeCalendar != \"primary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('secondary', 'month')\">{{\r\n monthNames[currentMonth2]\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('secondary', 'year')\">{{\r\n currentYear2\r\n }}</span>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"calenderView = 'month'\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"calenderView = 'year'\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"nav-btn br-4\" (click)=\"nextMonth()\" type=\"button\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n @if (calenderView == \"month\") {\r\n <div class=\"month-grid\">\r\n @for (month of monthNames; track month) {\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month)\"\r\n [ngClass]=\"{ selected: month == activeMonthName }\"\r\n >{{ month }}</span\r\n >\r\n }\r\n </div>\r\n } @else if (calenderView == \"year\") {\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for (year of yearRange; track year) {\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == activeYearValue }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <!-- Weekday Headers -->\r\n <div class=\"day_wrapper\">\r\n @if (mode === \"dual\") {\r\n <div class=\"dual-calendar\">\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth2\"\r\n [year]=\"currentYear2\"\r\n [calendarDays]=\"calendarDays2\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'secondary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n </div>\r\n } @else {\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div\r\n class=\"calendar-footer sm-b-16\"\r\n [ngClass]=\"{ 'dual-calendar': config.mode === 'dual' }\"\r\n >\r\n <!-- SINGLE MODE footer -->\r\n @if (mode === \"single\" && showDateLabel) {\r\n <div class=\"calendar-footer-wrapper\">\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">Date</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempDisplayValue\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('single')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"singleTimeInSeconds\"\r\n (timeChange)=\"onSingleTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n }\r\n\r\n <!-- RANGE MODE footer -->\r\n @if (mode === \"range\" || mode === \"dual\") {\r\n <div\r\n class=\"calendar-footer-wrapper\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">From</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempFromDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('from')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"fromTimeInSeconds\"\r\n (timeChange)=\"onFromTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n <div\r\n class=\"dual-calendar-border-top\"\r\n [ngClass]=\"{ 'calendar-footer-wrapper': time, 'sp-t-12': time }\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\" [class.muted]=\"!tempTo\">\r\n <span class=\"footer-label body-large sp-x-12\">To</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempToDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('to')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"toTimeInSeconds\"\r\n (timeChange)=\"onToTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- Action Buttons -->\r\n <div class=\"footer-actions\">\r\n <button\r\n class=\"btn-cancel footer-btn body-medium\"\r\n (click)=\"onCancel()\"\r\n type=\"button\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn-apply footer-btn body-medium\"\r\n (click)=\"onApply()\"\r\n type=\"button\"\r\n [disabled]=\"!canApply\"\r\n >\r\n Apply\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-wrapper{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));font-family:Inter,-apple-system,sans-serif}.date-picker-wrapper .date-label{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:#6b7280}.date-picker-wrapper .date-input{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1rem / var(--scale));width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.4166666667rem / var(--scale));background:var(--surface-background-canvas);cursor:pointer;min-width:calc(16.6666666667rem / var(--scale));transition:border-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}.date-picker-wrapper .date-input.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.date-picker-wrapper .date-input:hover{border-color:var(--border-interaction-focus)}.date-picker-wrapper .date-input .calendar-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));color:#9ca3af;flex-shrink:0}.date-picker-wrapper .date-input__text{flex:1;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas)}.date-picker-wrapper .date-input__text.placeholder{color:#9ca3af;font-weight:400;background-color:transparent}.date-picker-wrapper .date-input .clear-btn{cursor:pointer;padding:calc(.1666666667rem / var(--scale)) calc(.4166666667rem / var(--scale));transition:background .15s}.date-picker-wrapper .date-input .clear-btn:hover{background:#f3f4f6}.date-picker-wrapper .calendar-dropdown{min-width:calc(30.6666666667rem / var(--scale));max-width:calc(60.6666666667rem / var(--scale));min-height:calc(34.5rem / var(--scale));position:absolute;bottom:calc(100% + .0833333333rem / var(--scale));left:0;z-index:1000;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) var(--canvas-shadow);overflow:hidden;animation:dropIn .15s ease}.date-picker-wrapper .calendar-dropdown.month-year-view{width:calc(30.8333333333rem / var(--scale));min-height:calc(34.5rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;flex:1;margin:0 calc(7.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper{width:calc(7.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .month{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .year{color:var(--text-body-secondary)}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow);background-color:var(--surface-background-canvas);transition:background .15s,color .15s}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn i-feather,.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.4166666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector .year-grid{flex:1;border-top:none;padding-top:0;height:calc(27.25rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid,.date-picker-wrapper .calendar-dropdown .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.25rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(28.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month,.date-picker-wrapper .calendar-dropdown .year-grid .year,.date-picker-wrapper .calendar-dropdown .month-grid .month,.date-picker-wrapper .calendar-dropdown .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month:hover,.date-picker-wrapper .calendar-dropdown .year-grid .month.selected,.date-picker-wrapper .calendar-dropdown .year-grid .year:hover,.date-picker-wrapper .calendar-dropdown .year-grid .year.selected,.date-picker-wrapper .calendar-dropdown .month-grid .month:hover,.date-picker-wrapper .calendar-dropdown .month-grid .month.selected,.date-picker-wrapper .calendar-dropdown .month-grid .year:hover,.date-picker-wrapper .calendar-dropdown .month-grid .year.selected{color:var(--text-heading-inverse);background-color:var(--surface-action-default);transition:ease-in-out .2s}.date-picker-wrapper .calendar-dropdown .day_wrapper .dual-calendar{display:grid;grid-template-columns:1fr 1fr;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .day_wrapper .calendar-panel{display:flex;flex-direction:column}.date-picker-wrapper .calendar-dropdown .calendar-footer{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .calendar-footer-wrapper{border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%;padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));width:100%;height:calc(4rem / var(--scale));overflow:hidden}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted{background:#f9fafb}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted .footer-value{color:#9ca3af}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-label{color:var(--text-heading-primary);height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;min-width:calc(5rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);background:var(--surface-background-default)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));flex:1}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper .footer-value{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper img{cursor:pointer}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar .dual-calendar-border-top{display:flex;flex-direction:column;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions .footer-btn{width:calc(7.5rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-background-canvas);color:var(--text-body-primary);cursor:pointer;transition:border-color .15s,background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel:hover{border-color:#d1d5db;background:#f9fafb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply{border:calc(.0833333333rem / var(--scale)) solid transparent;border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-action-default);color:var(--text-heading-inverse);cursor:pointer;transition:background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:hover:not(:disabled){background:#2563eb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:disabled{background:#bfdbfe}.date-picker-wrapper .calendar-dropdown:has(.dual-calendar):after{content:\"\";position:absolute;top:calc(1.3333333333rem / var(--scale));left:calc(30.3333333333rem / var(--scale));width:calc(.0833333333rem / var(--scale));height:83%;background-color:var(--border-core-default)}button{min-width:unset;height:unset}@keyframes dropIn{0%{opacity:0;transform:translateY(calc(-.5rem / var(--scale)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalendarGridComponent, selector: "custom-calendar-grid", inputs: ["month", "year", "calendarDays", "weekDays", "parent"], outputs: ["daySelected"] }, { kind: "component", type: TimeInputComponent, selector: "cats-time-input", outputs: ["timeChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
|
|
2748
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-wrapper\" id=\"custom-date\">\r\n <!-- Label -->\r\n @if (label) {\r\n <label class=\"date-label\">{{ label }}</label>\r\n }\r\n\r\n <!-- Input Trigger -->\r\n @if (showTrigger) {\r\n <div\r\n class=\"date-input\"\r\n [class.is-open]=\"isOpen\"\r\n [class.has-value]=\"displayValue\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <svg\r\n class=\"calendar-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n\r\n <span class=\"date-input__text\" [class.placeholder]=\"!displayValue\">\r\n {{ displayValue || config.placeholder || \"Select date\" }}\r\n </span>\r\n\r\n @if (displayValue) {\r\n <span class=\"clear-btn\" (click)=\"$event.stopPropagation(); clearDate()\">\r\n <img src=\"images/x.svg\" alt=\"\" />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Calendar Dropdown -->\r\n @if (!showTrigger || isOpen) {\r\n <div\r\n class=\"calendar-dropdown sp-16 br-8\"\r\n [ngClass]=\"{ 'month-year-view': calenderView != 'day' }\"\r\n >\r\n <div class=\"calendar-header sm-b-12\">\r\n <div class=\"nav-btn br-4\" (click)=\"prevMonth()\" type=\"button\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"month-year body-medium\">\r\n @if (mode === \"dual\") {\r\n @if (calenderView == \"day\" || activeCalendar != \"secondary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('primary', 'month')\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('primary', 'year')\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n\r\n @if (calenderView == \"day\" || activeCalendar != \"primary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('secondary', 'month')\">{{\r\n monthNames[currentMonth2]\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('secondary', 'year')\">{{\r\n currentYear2\r\n }}</span>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"calenderView = 'month'\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"calenderView = 'year'\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"nav-btn br-4\" (click)=\"nextMonth()\" type=\"button\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n @if (calenderView == \"month\") {\r\n <div class=\"month-grid\">\r\n @for (month of monthNames; track month) {\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month)\"\r\n [ngClass]=\"{ selected: month == activeMonthName }\"\r\n >{{ month }}</span\r\n >\r\n }\r\n </div>\r\n } @else if (calenderView == \"year\") {\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for (year of yearRange; track year) {\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == activeYearValue }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <!-- Weekday Headers -->\r\n <div class=\"day_wrapper\">\r\n @if (mode === \"dual\") {\r\n <div class=\"dual-calendar\">\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth2\"\r\n [year]=\"currentYear2\"\r\n [calendarDays]=\"calendarDays2\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'secondary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n </div>\r\n } @else {\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div\r\n class=\"calendar-footer sm-b-16\"\r\n [ngClass]=\"{ 'dual-calendar': config.mode === 'dual' }\"\r\n >\r\n <!-- SINGLE MODE footer -->\r\n @if (mode === \"single\" && showDateLabel) {\r\n <div class=\"calendar-footer-wrapper\">\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">Date</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempDisplayValue\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('single')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"singleTimeInSeconds\"\r\n (timeChange)=\"onSingleTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n }\r\n\r\n <!-- RANGE MODE footer -->\r\n @if (mode === \"range\" || mode === \"dual\") {\r\n <div\r\n class=\"calendar-footer-wrapper\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">From</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempFromDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('from')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"fromTimeInSeconds\"\r\n (timeChange)=\"onFromTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n <div\r\n class=\"dual-calendar-border-top\"\r\n [ngClass]=\"{ 'calendar-footer-wrapper': time, 'sp-t-12': time }\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\" [class.muted]=\"!tempTo\">\r\n <span class=\"footer-label body-large sp-x-12\">To</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempToDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('to')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"toTimeInSeconds\"\r\n (timeChange)=\"onToTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- Action Buttons -->\r\n <div class=\"footer-actions\">\r\n <button\r\n class=\"btn-cancel footer-btn body-medium\"\r\n (click)=\"onCancel()\"\r\n type=\"button\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn-apply footer-btn body-medium\"\r\n (click)=\"onApply()\"\r\n type=\"button\"\r\n [disabled]=\"!canApply\"\r\n >\r\n Apply\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-wrapper{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));font-family:Inter,-apple-system,sans-serif}.date-picker-wrapper .date-label{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:#6b7280}.date-picker-wrapper .date-input{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1rem / var(--scale));width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.4166666667rem / var(--scale));background:var(--surface-background-canvas);cursor:pointer;min-width:calc(16.6666666667rem / var(--scale));transition:border-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}.date-picker-wrapper .date-input:hover{border-color:var(--border-interaction-focus)}.date-picker-wrapper .date-input .calendar-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));color:#9ca3af;flex-shrink:0}.date-picker-wrapper .date-input__text{flex:1;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas)}.date-picker-wrapper .date-input__text.placeholder{color:#9ca3af;font-weight:400}.date-picker-wrapper .date-input .clear-btn{cursor:pointer;padding:calc(.1666666667rem / var(--scale)) calc(.4166666667rem / var(--scale));transition:background .15s}.date-picker-wrapper .date-input .clear-btn:hover{background:#f3f4f6}.date-picker-wrapper .calendar-dropdown{min-width:calc(30.6666666667rem / var(--scale));max-width:calc(60.6666666667rem / var(--scale));min-height:calc(34.5rem / var(--scale));position:absolute;bottom:calc(100% + .0833333333rem / var(--scale));left:0;z-index:1000;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) var(--canvas-shadow);overflow:hidden;animation:dropIn .15s ease}.date-picker-wrapper .calendar-dropdown.month-year-view{width:calc(30.8333333333rem / var(--scale));min-height:calc(34.5rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;flex:1;margin:0 calc(7.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper{width:calc(7.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .month{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .year{color:var(--text-body-secondary)}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow);background-color:var(--surface-background-canvas);transition:background .15s,color .15s}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn i-feather,.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.4166666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector .year-grid{flex:1;border-top:none;padding-top:0;height:calc(27.25rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid,.date-picker-wrapper .calendar-dropdown .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.25rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(28.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month,.date-picker-wrapper .calendar-dropdown .year-grid .year,.date-picker-wrapper .calendar-dropdown .month-grid .month,.date-picker-wrapper .calendar-dropdown .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month:hover,.date-picker-wrapper .calendar-dropdown .year-grid .month.selected,.date-picker-wrapper .calendar-dropdown .year-grid .year:hover,.date-picker-wrapper .calendar-dropdown .year-grid .year.selected,.date-picker-wrapper .calendar-dropdown .month-grid .month:hover,.date-picker-wrapper .calendar-dropdown .month-grid .month.selected,.date-picker-wrapper .calendar-dropdown .month-grid .year:hover,.date-picker-wrapper .calendar-dropdown .month-grid .year.selected{color:var(--text-heading-inverse);background-color:var(--surface-action-default);transition:ease-in-out .2s}.date-picker-wrapper .calendar-dropdown .day_wrapper .dual-calendar{display:grid;grid-template-columns:1fr 1fr;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .day_wrapper .calendar-panel{display:flex;flex-direction:column}.date-picker-wrapper .calendar-dropdown .calendar-footer{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .calendar-footer-wrapper{border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%;padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));width:100%;height:calc(4rem / var(--scale));overflow:hidden}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted{background:#f9fafb}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted .footer-value{color:#9ca3af}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-label{color:var(--text-heading-primary);height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;min-width:calc(5rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);background:var(--surface-background-default)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));flex:1}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper .footer-value{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper img{cursor:pointer}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar .dual-calendar-border-top{display:flex;flex-direction:column;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions .footer-btn{width:calc(7.5rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-background-canvas);color:var(--text-body-primary);cursor:pointer;transition:border-color .15s,background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel:hover{border-color:#d1d5db;background:#f9fafb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply{border:calc(.0833333333rem / var(--scale)) solid transparent;border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-action-default);color:var(--text-heading-inverse);cursor:pointer;transition:background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:hover:not(:disabled){background:#2563eb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:disabled{background:#bfdbfe}.date-picker-wrapper .calendar-dropdown:has(.dual-calendar):after{content:\"\";position:absolute;top:calc(1.3333333333rem / var(--scale));left:calc(30.3333333333rem / var(--scale));width:calc(.0833333333rem / var(--scale));height:83%;background-color:var(--border-core-default)}button{min-width:unset;height:unset}@keyframes dropIn{0%{opacity:0;transform:translateY(calc(-.5rem / var(--scale)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalendarGridComponent, selector: "custom-calendar-grid", inputs: ["month", "year", "calendarDays", "weekDays", "parent"], outputs: ["daySelected"] }, { kind: "component", type: TimeInputComponent, selector: "cats-time-input", outputs: ["timeChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
|
|
2760
2749
|
}
|
|
2761
2750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CustomDatePickerComponent, decorators: [{
|
|
2762
2751
|
type: Component,
|
|
@@ -2771,7 +2760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2771
2760
|
CalendarGridComponent,
|
|
2772
2761
|
TimeInputComponent,
|
|
2773
2762
|
FormsModule,
|
|
2774
|
-
], template: "<div class=\"date-picker-wrapper\" id=\"custom-date\">\r\n <!-- Label -->\r\n @if (label) {\r\n <label class=\"date-label\">{{ label }}</label>\r\n }\r\n\r\n <!-- Input Trigger -->\r\n @if (showTrigger) {\r\n <div\r\n class=\"date-input\"\r\n [class.is-open]=\"isOpen\"\r\n [class.has-value]=\"displayValue\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <svg\r\n class=\"calendar-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n\r\n <span class=\"date-input__text\" [class.placeholder]=\"!displayValue\">\r\n {{ displayValue || config.placeholder || \"Select date\" }}\r\n </span>\r\n\r\n @if (displayValue) {\r\n <span class=\"clear-btn\" (click)=\"$event.stopPropagation(); clearDate()\">\r\n <img src=\"images/x.svg\" alt=\"\" />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Calendar Dropdown -->\r\n @if (!showTrigger || isOpen) {\r\n <div\r\n class=\"calendar-dropdown sp-16 br-8\"\r\n [ngClass]=\"{ 'month-year-view': calenderView != 'day' }\"\r\n >\r\n <div class=\"calendar-header sm-b-12\">\r\n <div class=\"nav-btn br-4\" (click)=\"prevMonth()\" type=\"button\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"month-year body-medium\">\r\n @if (mode === \"dual\") {\r\n @if (calenderView == \"day\" || activeCalendar != \"secondary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('primary', 'month')\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('primary', 'year')\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n\r\n @if (calenderView == \"day\" || activeCalendar != \"primary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('secondary', 'month')\">{{\r\n monthNames[currentMonth2]\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('secondary', 'year')\">{{\r\n currentYear2\r\n }}</span>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"calenderView = 'month'\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"calenderView = 'year'\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"nav-btn br-4\" (click)=\"nextMonth()\" type=\"button\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n @if (calenderView == \"month\") {\r\n <div class=\"month-grid\">\r\n @for (month of monthNames; track month) {\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month)\"\r\n [ngClass]=\"{ selected: month == activeMonthName }\"\r\n >{{ month }}</span\r\n >\r\n }\r\n </div>\r\n } @else if (calenderView == \"year\") {\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for (year of yearRange; track year) {\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == activeYearValue }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <!-- Weekday Headers -->\r\n <div class=\"day_wrapper\">\r\n @if (mode === \"dual\") {\r\n <div class=\"dual-calendar\">\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth2\"\r\n [year]=\"currentYear2\"\r\n [calendarDays]=\"calendarDays2\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'secondary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n </div>\r\n } @else {\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div\r\n class=\"calendar-footer sm-b-16\"\r\n [ngClass]=\"{ 'dual-calendar': config.mode === 'dual' }\"\r\n >\r\n <!-- SINGLE MODE footer -->\r\n @if (mode === \"single\" && showDateLabel) {\r\n <div class=\"calendar-footer-wrapper\">\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">Date</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempDisplayValue\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('single')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"singleTimeInSeconds\"\r\n (timeChange)=\"onSingleTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n }\r\n\r\n <!-- RANGE MODE footer -->\r\n @if (mode === \"range\" || mode === \"dual\") {\r\n <div\r\n class=\"calendar-footer-wrapper\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">From</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempFromDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('from')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"fromTimeInSeconds\"\r\n (timeChange)=\"onFromTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n <div\r\n class=\"dual-calendar-border-top\"\r\n [ngClass]=\"{ 'calendar-footer-wrapper': time, 'sp-t-12': time }\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\" [class.muted]=\"!tempTo\">\r\n <span class=\"footer-label body-large sp-x-12\">To</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempToDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('to')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"toTimeInSeconds\"\r\n (timeChange)=\"onToTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- Action Buttons -->\r\n <div class=\"footer-actions\">\r\n <button\r\n class=\"btn-cancel footer-btn body-medium\"\r\n (click)=\"onCancel()\"\r\n type=\"button\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn-apply footer-btn body-medium\"\r\n (click)=\"onApply()\"\r\n type=\"button\"\r\n [disabled]=\"!canApply\"\r\n >\r\n Apply\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-wrapper{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));font-family:Inter,-apple-system,sans-serif}.date-picker-wrapper .date-label{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:#6b7280}.date-picker-wrapper .date-input{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1rem / var(--scale));width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.4166666667rem / var(--scale));background:var(--surface-background-canvas);cursor:pointer;min-width:calc(16.6666666667rem / var(--scale));transition:border-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}.date-picker-wrapper .date-input.invalid{border-color:var(--semantics-error-default);background-color:var(--surface-contextual-red)}.date-picker-wrapper .date-input:hover{border-color:var(--border-interaction-focus)}.date-picker-wrapper .date-input .calendar-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));color:#9ca3af;flex-shrink:0}.date-picker-wrapper .date-input__text{flex:1;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas)}.date-picker-wrapper .date-input__text.placeholder{color:#9ca3af;font-weight:400;background-color:transparent}.date-picker-wrapper .date-input .clear-btn{cursor:pointer;padding:calc(.1666666667rem / var(--scale)) calc(.4166666667rem / var(--scale));transition:background .15s}.date-picker-wrapper .date-input .clear-btn:hover{background:#f3f4f6}.date-picker-wrapper .calendar-dropdown{min-width:calc(30.6666666667rem / var(--scale));max-width:calc(60.6666666667rem / var(--scale));min-height:calc(34.5rem / var(--scale));position:absolute;bottom:calc(100% + .0833333333rem / var(--scale));left:0;z-index:1000;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) var(--canvas-shadow);overflow:hidden;animation:dropIn .15s ease}.date-picker-wrapper .calendar-dropdown.month-year-view{width:calc(30.8333333333rem / var(--scale));min-height:calc(34.5rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;flex:1;margin:0 calc(7.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper{width:calc(7.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .month{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .year{color:var(--text-body-secondary)}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow);background-color:var(--surface-background-canvas);transition:background .15s,color .15s}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn i-feather,.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.4166666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector .year-grid{flex:1;border-top:none;padding-top:0;height:calc(27.25rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid,.date-picker-wrapper .calendar-dropdown .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.25rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(28.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month,.date-picker-wrapper .calendar-dropdown .year-grid .year,.date-picker-wrapper .calendar-dropdown .month-grid .month,.date-picker-wrapper .calendar-dropdown .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month:hover,.date-picker-wrapper .calendar-dropdown .year-grid .month.selected,.date-picker-wrapper .calendar-dropdown .year-grid .year:hover,.date-picker-wrapper .calendar-dropdown .year-grid .year.selected,.date-picker-wrapper .calendar-dropdown .month-grid .month:hover,.date-picker-wrapper .calendar-dropdown .month-grid .month.selected,.date-picker-wrapper .calendar-dropdown .month-grid .year:hover,.date-picker-wrapper .calendar-dropdown .month-grid .year.selected{color:var(--text-heading-inverse);background-color:var(--surface-action-default);transition:ease-in-out .2s}.date-picker-wrapper .calendar-dropdown .day_wrapper .dual-calendar{display:grid;grid-template-columns:1fr 1fr;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .day_wrapper .calendar-panel{display:flex;flex-direction:column}.date-picker-wrapper .calendar-dropdown .calendar-footer{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .calendar-footer-wrapper{border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%;padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));width:100%;height:calc(4rem / var(--scale));overflow:hidden}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted{background:#f9fafb}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted .footer-value{color:#9ca3af}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-label{color:var(--text-heading-primary);height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;min-width:calc(5rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);background:var(--surface-background-default)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));flex:1}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper .footer-value{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper img{cursor:pointer}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar .dual-calendar-border-top{display:flex;flex-direction:column;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions .footer-btn{width:calc(7.5rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-background-canvas);color:var(--text-body-primary);cursor:pointer;transition:border-color .15s,background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel:hover{border-color:#d1d5db;background:#f9fafb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply{border:calc(.0833333333rem / var(--scale)) solid transparent;border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-action-default);color:var(--text-heading-inverse);cursor:pointer;transition:background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:hover:not(:disabled){background:#2563eb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:disabled{background:#bfdbfe}.date-picker-wrapper .calendar-dropdown:has(.dual-calendar):after{content:\"\";position:absolute;top:calc(1.3333333333rem / var(--scale));left:calc(30.3333333333rem / var(--scale));width:calc(.0833333333rem / var(--scale));height:83%;background-color:var(--border-core-default)}button{min-width:unset;height:unset}@keyframes dropIn{0%{opacity:0;transform:translateY(calc(-.5rem / var(--scale)))}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2763
|
+
], template: "<div class=\"date-picker-wrapper\" id=\"custom-date\">\r\n <!-- Label -->\r\n @if (label) {\r\n <label class=\"date-label\">{{ label }}</label>\r\n }\r\n\r\n <!-- Input Trigger -->\r\n @if (showTrigger) {\r\n <div\r\n class=\"date-input\"\r\n [class.is-open]=\"isOpen\"\r\n [class.has-value]=\"displayValue\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <svg\r\n class=\"calendar-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n\r\n <span class=\"date-input__text\" [class.placeholder]=\"!displayValue\">\r\n {{ displayValue || config.placeholder || \"Select date\" }}\r\n </span>\r\n\r\n @if (displayValue) {\r\n <span class=\"clear-btn\" (click)=\"$event.stopPropagation(); clearDate()\">\r\n <img src=\"images/x.svg\" alt=\"\" />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Calendar Dropdown -->\r\n @if (!showTrigger || isOpen) {\r\n <div\r\n class=\"calendar-dropdown sp-16 br-8\"\r\n [ngClass]=\"{ 'month-year-view': calenderView != 'day' }\"\r\n >\r\n <div class=\"calendar-header sm-b-12\">\r\n <div class=\"nav-btn br-4\" (click)=\"prevMonth()\" type=\"button\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"month-year body-medium\">\r\n @if (mode === \"dual\") {\r\n @if (calenderView == \"day\" || activeCalendar != \"secondary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('primary', 'month')\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('primary', 'year')\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n\r\n @if (calenderView == \"day\" || activeCalendar != \"primary\") {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"openView('secondary', 'month')\">{{\r\n monthNames[currentMonth2]\r\n }}</span>\r\n <span class=\"year\" (click)=\"openView('secondary', 'year')\">{{\r\n currentYear2\r\n }}</span>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"month-year-wrapper\">\r\n <span class=\"month\" (click)=\"calenderView = 'month'\">{{\r\n currentMonthName\r\n }}</span>\r\n <span class=\"year\" (click)=\"calenderView = 'year'\">{{\r\n currentYear\r\n }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"nav-btn br-4\" (click)=\"nextMonth()\" type=\"button\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n @if (calenderView == \"month\") {\r\n <div class=\"month-grid\">\r\n @for (month of monthNames; track month) {\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month)\"\r\n [ngClass]=\"{ selected: month == activeMonthName }\"\r\n >{{ month }}</span\r\n >\r\n }\r\n </div>\r\n } @else if (calenderView == \"year\") {\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for (year of yearRange; track year) {\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == activeYearValue }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <!-- Weekday Headers -->\r\n <div class=\"day_wrapper\">\r\n @if (mode === \"dual\") {\r\n <div class=\"dual-calendar\">\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n\r\n <div class=\"calendar-panel\">\r\n <custom-calendar-grid\r\n [month]=\"currentMonth2\"\r\n [year]=\"currentYear2\"\r\n [calendarDays]=\"calendarDays2\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'secondary')\"\r\n ></custom-calendar-grid>\r\n </div>\r\n </div>\r\n } @else {\r\n <custom-calendar-grid\r\n [month]=\"currentMonth\"\r\n [year]=\"currentYear\"\r\n [calendarDays]=\"calendarDays\"\r\n [weekDays]=\"weekDays\"\r\n [parent]=\"this\"\r\n (daySelected)=\"onDaySelected($event, 'primary')\"\r\n ></custom-calendar-grid>\r\n }\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div\r\n class=\"calendar-footer sm-b-16\"\r\n [ngClass]=\"{ 'dual-calendar': config.mode === 'dual' }\"\r\n >\r\n <!-- SINGLE MODE footer -->\r\n @if (mode === \"single\" && showDateLabel) {\r\n <div class=\"calendar-footer-wrapper\">\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">Date</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempDisplayValue\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('single')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"singleTimeInSeconds\"\r\n (timeChange)=\"onSingleTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n }\r\n\r\n <!-- RANGE MODE footer -->\r\n @if (mode === \"range\" || mode === \"dual\") {\r\n <div\r\n class=\"calendar-footer-wrapper\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\">\r\n <span class=\"footer-label body-large sp-x-12\">From</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempFromDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('from')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"fromTimeInSeconds\"\r\n (timeChange)=\"onFromTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n <div\r\n class=\"dual-calendar-border-top\"\r\n [ngClass]=\"{ 'calendar-footer-wrapper': time, 'sp-t-12': time }\"\r\n [ngStyle]=\"{ width: mode === 'dual' ? '50%' : '100%' }\"\r\n >\r\n <div class=\"footer-row label-row\" [class.muted]=\"!tempTo\">\r\n <span class=\"footer-label body-large sp-x-12\">To</span>\r\n <div class=\"footer-value-wrapper sp-x-12\">\r\n <span class=\"footer-value body-large\">{{\r\n tempToDisplay\r\n }}</span>\r\n <img\r\n (click)=\"cancelDate('to')\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n @if (time) {\r\n <cats-time-input\r\n [(ngModel)]=\"toTimeInSeconds\"\r\n (timeChange)=\"onToTimeChange($event)\"\r\n ></cats-time-input>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- Action Buttons -->\r\n <div class=\"footer-actions\">\r\n <button\r\n class=\"btn-cancel footer-btn body-medium\"\r\n (click)=\"onCancel()\"\r\n type=\"button\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn-apply footer-btn body-medium\"\r\n (click)=\"onApply()\"\r\n type=\"button\"\r\n [disabled]=\"!canApply\"\r\n >\r\n Apply\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.date-picker-wrapper{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));font-family:Inter,-apple-system,sans-serif}.date-picker-wrapper .date-label{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:#6b7280}.date-picker-wrapper .date-input{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1rem / var(--scale));width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.4166666667rem / var(--scale));background:var(--surface-background-canvas);cursor:pointer;min-width:calc(16.6666666667rem / var(--scale));transition:border-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}.date-picker-wrapper .date-input:hover{border-color:var(--border-interaction-focus)}.date-picker-wrapper .date-input .calendar-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));color:#9ca3af;flex-shrink:0}.date-picker-wrapper .date-input__text{flex:1;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas)}.date-picker-wrapper .date-input__text.placeholder{color:#9ca3af;font-weight:400}.date-picker-wrapper .date-input .clear-btn{cursor:pointer;padding:calc(.1666666667rem / var(--scale)) calc(.4166666667rem / var(--scale));transition:background .15s}.date-picker-wrapper .date-input .clear-btn:hover{background:#f3f4f6}.date-picker-wrapper .calendar-dropdown{min-width:calc(30.6666666667rem / var(--scale));max-width:calc(60.6666666667rem / var(--scale));min-height:calc(34.5rem / var(--scale));position:absolute;bottom:calc(100% + .0833333333rem / var(--scale));left:0;z-index:1000;background:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) var(--canvas-shadow);overflow:hidden;animation:dropIn .15s ease}.date-picker-wrapper .calendar-dropdown.month-year-view{width:calc(30.8333333333rem / var(--scale));min-height:calc(34.5rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;flex:1;margin:0 calc(7.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper{width:calc(7.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .month{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-header .month-year .month-year-wrapper .year{color:var(--text-body-secondary)}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow);background-color:var(--surface-background-canvas);transition:background .15s,color .15s}.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn i-feather,.date-picker-wrapper .calendar-dropdown .calendar-header .nav-btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.4166666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-selector .year-grid{flex:1;border-top:none;padding-top:0;height:calc(27.25rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid,.date-picker-wrapper .calendar-dropdown .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.25rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(28.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(1rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month,.date-picker-wrapper .calendar-dropdown .year-grid .year,.date-picker-wrapper .calendar-dropdown .month-grid .month,.date-picker-wrapper .calendar-dropdown .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .year-grid .month:hover,.date-picker-wrapper .calendar-dropdown .year-grid .month.selected,.date-picker-wrapper .calendar-dropdown .year-grid .year:hover,.date-picker-wrapper .calendar-dropdown .year-grid .year.selected,.date-picker-wrapper .calendar-dropdown .month-grid .month:hover,.date-picker-wrapper .calendar-dropdown .month-grid .month.selected,.date-picker-wrapper .calendar-dropdown .month-grid .year:hover,.date-picker-wrapper .calendar-dropdown .month-grid .year.selected{color:var(--text-heading-inverse);background-color:var(--surface-action-default);transition:ease-in-out .2s}.date-picker-wrapper .calendar-dropdown .day_wrapper .dual-calendar{display:grid;grid-template-columns:1fr 1fr;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .day_wrapper .calendar-panel{display:flex;flex-direction:column}.date-picker-wrapper .calendar-dropdown .calendar-footer{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .calendar-footer-wrapper{border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%;padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));width:100%;height:calc(4rem / var(--scale));overflow:hidden}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted{background:#f9fafb}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row.label-row.muted .footer-value{color:#9ca3af}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-label{color:var(--text-heading-primary);height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;min-width:calc(5rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);background:var(--surface-background-default)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));flex:1}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper .footer-value{color:var(--text-heading-primary)}.date-picker-wrapper .calendar-dropdown .calendar-footer .footer-row .footer-value-wrapper img{cursor:pointer}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(2rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .calendar-footer.dual-calendar .dual-calendar-border-top{display:flex;flex-direction:column;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-top:calc(.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(2.6666666667rem / var(--scale))}.date-picker-wrapper .calendar-dropdown .footer-actions .footer-btn{width:calc(7.5rem / var(--scale));height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-background-canvas);color:var(--text-body-primary);cursor:pointer;transition:border-color .15s,background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-cancel:hover{border-color:#d1d5db;background:#f9fafb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply{border:calc(.0833333333rem / var(--scale)) solid transparent;border-radius:calc(.3333333333rem / var(--scale));background:var(--surface-action-default);color:var(--text-heading-inverse);cursor:pointer;transition:background .15s}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:hover:not(:disabled){background:#2563eb}.date-picker-wrapper .calendar-dropdown .footer-actions .btn-apply:disabled{background:#bfdbfe}.date-picker-wrapper .calendar-dropdown:has(.dual-calendar):after{content:\"\";position:absolute;top:calc(1.3333333333rem / var(--scale));left:calc(30.3333333333rem / var(--scale));width:calc(.0833333333rem / var(--scale));height:83%;background-color:var(--border-core-default)}button{min-width:unset;height:unset}@keyframes dropIn{0%{opacity:0;transform:translateY(calc(-.5rem / var(--scale)))}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2775
2764
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
|
|
2776
2765
|
type: Input
|
|
2777
2766
|
}], label: [{
|
|
@@ -3763,11 +3752,11 @@ class WizardComponent {
|
|
|
3763
3752
|
this.closed.emit();
|
|
3764
3753
|
}
|
|
3765
3754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WizardComponent, deps: [{ token: WizardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3766
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: WizardComponent, isStandalone: true, selector: "cats-ui-wizard", inputs: { wizardId: "wizardId", title: "title", showProgressBar: "showProgressBar", showStepBadge: "showStepBadge" }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscPressed()" } }, queries: [{ propertyName: "stepTemplates", predicate: WizardStepDirective }], ngImport: i0, template: "<div class=\"cats-modal-overlay\" (click)=\"closeModal()\">\r\n <!-- Stop closing when clicking inside modal -->\r\n <div\r\n class=\"cats-modal\"\r\n [class.expanded]=\"isExpanded\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- PROGRESS BAR (TOP STRIP) -->\r\n @if (showProgressBar) {\r\n <div class=\"cats-modal-progress-bar\">\r\n @for (step of wizardSteps; track $index) {\r\n <div\r\n class=\"cats-progress-step\"\r\n [class.progres-done]=\"step.state === 'done'\"\r\n [class.progress-active]=\"step.state === 'active'\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n <!-- Title -->\r\n\r\n <!-- HEADER -->\r\n <div class=\"cats-modal-header\">\r\n <div class=\"cats-header-left\">\r\n <span class=\"cats-title textTruncate\">{{ title }}</span>\r\n @if (showStepBadge && currentStepNumber) {\r\n <span class=\"cats-step textTruncate\">\r\n Step {{ currentStepNumber }}: {{ currentStepLabel }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"cats-header-right\">\r\n @if (expandable) {\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"toggleExpand()\"\r\n [src]=\"\r\n isExpanded ? 'images/minimize-expand.svg' : 'images/expand.svg'\r\n \"\r\n alt=\"\"\r\n />\r\n }\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"closeModal()\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div\r\n class=\"cats-modal-body\"\r\n [class.collapsed]=\"!isExpanded && expandable\"\r\n >\r\n @if (currentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"currentTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-modal-overlay{position:fixed;top:0;left:0;background:#040d17b2;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;z-index:10}.cats-modal-overlay .cats-modal{width:calc(100% - 8rem / var(--scale));height:calc(100% - 4rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;box-shadow:0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow) 0 calc(1.6666666667rem / var(--scale)) calc(2rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);overflow:hidden;transition:all .3s ease}.cats-modal-overlay .cats-modal.expanded{width:100%;height:100%;border-radius:0}.cats-modal-overlay .cats-modal .cats-modal-progress-bar{display:flex;height:calc(.6666666667rem / var(--scale));background:var(--surface-background-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step{flex:1;background:var(--surface-background-default);transition:all .3s ease}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progres-done{background:var(--surface-action-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progress-active{background:var(--surface-action-default);border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(1.3333333333rem / var(--scale)) calc(2.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(3.3333333333rem / var(--scale)) 0 var(--canvas-shadow)}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-title{font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--text-heading-primary);max-width:calc(58.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-step{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;color:var(--text-link-hover);background:var(--surface-decorative-blue);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-default);border-radius:calc(3rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right .cats-icon-btn{border:none;cursor:pointer;width:calc(2.3333333333rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-body{height:calc(100% - 64px);flex:1;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
3755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: WizardComponent, isStandalone: true, selector: "cats-ui-wizard", inputs: { wizardId: "wizardId", title: "title", showProgressBar: "showProgressBar", showStepBadge: "showStepBadge" }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscPressed()" } }, queries: [{ propertyName: "stepTemplates", predicate: WizardStepDirective }], ngImport: i0, template: "<div class=\"cats-modal-overlay\">\r\n <!-- Stop closing when clicking inside modal -->\r\n <div class=\"cats-modal\" [class.expanded]=\"isExpanded\">\r\n <!-- PROGRESS BAR (TOP STRIP) -->\r\n @if (showProgressBar) {\r\n <div class=\"cats-modal-progress-bar\">\r\n @for (step of wizardSteps; track $index) {\r\n <div\r\n class=\"cats-progress-step\"\r\n [class.progres-done]=\"step.state === 'done'\"\r\n [class.progress-active]=\"step.state === 'active'\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n <!-- Title -->\r\n\r\n <!-- HEADER -->\r\n <div class=\"cats-modal-header\">\r\n <div class=\"cats-header-left\">\r\n <span class=\"cats-title textTruncate\">{{ title }}</span>\r\n @if (showStepBadge && currentStepNumber) {\r\n <span class=\"cats-step textTruncate\">\r\n Step {{ currentStepNumber }}: {{ currentStepLabel }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"cats-header-right\">\r\n @if (expandable) {\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"toggleExpand()\"\r\n [src]=\"\r\n isExpanded ? 'images/minimize-expand.svg' : 'images/expand.svg'\r\n \"\r\n alt=\"\"\r\n />\r\n }\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"closeModal()\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"cats-modal-body\" [class.collapsed]=\"!isExpanded && expandable\">\r\n @if (currentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"currentTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-modal-overlay{position:fixed;top:0;left:0;background:#040d17b2;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;z-index:10}.cats-modal-overlay .cats-modal{width:calc(100% - 8rem / var(--scale));height:calc(100% - 4rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;box-shadow:0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow) 0 calc(1.6666666667rem / var(--scale)) calc(2rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);overflow:hidden;transition:all .3s ease}.cats-modal-overlay .cats-modal.expanded{width:100%;height:100%;border-radius:0}.cats-modal-overlay .cats-modal .cats-modal-progress-bar{display:flex;height:calc(.6666666667rem / var(--scale));background:var(--surface-background-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step{flex:1;background:var(--surface-background-default);transition:all .3s ease}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progres-done{background:var(--surface-action-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progress-active{background:var(--surface-action-default);border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(1.3333333333rem / var(--scale)) calc(2.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(3.3333333333rem / var(--scale)) 0 var(--canvas-shadow)}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-title{font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--text-heading-primary);max-width:calc(58.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-step{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;color:var(--text-link-hover);background:var(--surface-decorative-blue);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-default);border-radius:calc(3rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right .cats-icon-btn{border:none;cursor:pointer;width:calc(2.3333333333rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-body{height:calc(100% - 64px);flex:1;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
3767
3756
|
}
|
|
3768
3757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WizardComponent, decorators: [{
|
|
3769
3758
|
type: Component,
|
|
3770
|
-
args: [{ selector: 'cats-ui-wizard', imports: [CommonModule], template: "<div class=\"cats-modal-overlay\" (click)=\"closeModal()\">\r\n <!-- Stop closing when clicking inside modal -->\r\n <div\r\n class=\"cats-modal\"\r\n [class.expanded]=\"isExpanded\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- PROGRESS BAR (TOP STRIP) -->\r\n @if (showProgressBar) {\r\n <div class=\"cats-modal-progress-bar\">\r\n @for (step of wizardSteps; track $index) {\r\n <div\r\n class=\"cats-progress-step\"\r\n [class.progres-done]=\"step.state === 'done'\"\r\n [class.progress-active]=\"step.state === 'active'\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n <!-- Title -->\r\n\r\n <!-- HEADER -->\r\n <div class=\"cats-modal-header\">\r\n <div class=\"cats-header-left\">\r\n <span class=\"cats-title textTruncate\">{{ title }}</span>\r\n @if (showStepBadge && currentStepNumber) {\r\n <span class=\"cats-step textTruncate\">\r\n Step {{ currentStepNumber }}: {{ currentStepLabel }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"cats-header-right\">\r\n @if (expandable) {\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"toggleExpand()\"\r\n [src]=\"\r\n isExpanded ? 'images/minimize-expand.svg' : 'images/expand.svg'\r\n \"\r\n alt=\"\"\r\n />\r\n }\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"closeModal()\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div\r\n class=\"cats-modal-body\"\r\n [class.collapsed]=\"!isExpanded && expandable\"\r\n >\r\n @if (currentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"currentTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-modal-overlay{position:fixed;top:0;left:0;background:#040d17b2;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;z-index:10}.cats-modal-overlay .cats-modal{width:calc(100% - 8rem / var(--scale));height:calc(100% - 4rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;box-shadow:0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow) 0 calc(1.6666666667rem / var(--scale)) calc(2rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);overflow:hidden;transition:all .3s ease}.cats-modal-overlay .cats-modal.expanded{width:100%;height:100%;border-radius:0}.cats-modal-overlay .cats-modal .cats-modal-progress-bar{display:flex;height:calc(.6666666667rem / var(--scale));background:var(--surface-background-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step{flex:1;background:var(--surface-background-default);transition:all .3s ease}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progres-done{background:var(--surface-action-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progress-active{background:var(--surface-action-default);border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(1.3333333333rem / var(--scale)) calc(2.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(3.3333333333rem / var(--scale)) 0 var(--canvas-shadow)}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-title{font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--text-heading-primary);max-width:calc(58.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-step{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;color:var(--text-link-hover);background:var(--surface-decorative-blue);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-default);border-radius:calc(3rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right .cats-icon-btn{border:none;cursor:pointer;width:calc(2.3333333333rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-body{height:calc(100% - 64px);flex:1;position:relative}\n"] }]
|
|
3759
|
+
args: [{ selector: 'cats-ui-wizard', imports: [CommonModule], template: "<div class=\"cats-modal-overlay\">\r\n <!-- Stop closing when clicking inside modal -->\r\n <div class=\"cats-modal\" [class.expanded]=\"isExpanded\">\r\n <!-- PROGRESS BAR (TOP STRIP) -->\r\n @if (showProgressBar) {\r\n <div class=\"cats-modal-progress-bar\">\r\n @for (step of wizardSteps; track $index) {\r\n <div\r\n class=\"cats-progress-step\"\r\n [class.progres-done]=\"step.state === 'done'\"\r\n [class.progress-active]=\"step.state === 'active'\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n <!-- Title -->\r\n\r\n <!-- HEADER -->\r\n <div class=\"cats-modal-header\">\r\n <div class=\"cats-header-left\">\r\n <span class=\"cats-title textTruncate\">{{ title }}</span>\r\n @if (showStepBadge && currentStepNumber) {\r\n <span class=\"cats-step textTruncate\">\r\n Step {{ currentStepNumber }}: {{ currentStepLabel }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"cats-header-right\">\r\n @if (expandable) {\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"toggleExpand()\"\r\n [src]=\"\r\n isExpanded ? 'images/minimize-expand.svg' : 'images/expand.svg'\r\n \"\r\n alt=\"\"\r\n />\r\n }\r\n <img\r\n class=\"cats-icon-btn\"\r\n (click)=\"closeModal()\"\r\n src=\"images/x-cancel-btn.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"cats-modal-body\" [class.collapsed]=\"!isExpanded && expandable\">\r\n @if (currentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"currentTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-700: #1c60af;--blue-600: #2680ea;--blue-400: #92bff4;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-200: #dfecfc;--blue-50: #f7fafe;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #2a6a2d;--green-400: #9bc69d;--green-600: #388e3c;--green-700: rgba(42, 106, 45, 1);--red: #ff0000;--red-50: #fdf7f7;--red-100: #f0c9c9;--red-200: #f7dfdf;--red-300: #f2f2f2;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff5e6;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-400: #fff9e7;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1208;--box-shadow-100: #0000001f;--box-shadow-200: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa;--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:0 calc(2.3333333333rem / var(--scale));height:calc(4.6666666667rem / var(--scale));min-width:calc(11.8333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-18);line-height:\"\";font-weight:600;cursor:pointer}button.cats-btn:focus-visible{outline:none;border:0}button.cats-btn i-feather.icon{display:flex}button.cats-btn.primary_btn{background-color:var(--blue-600);color:var(--white)}button.cats-btn.secondary_btn{background-color:var(--neutral-100);color:var(--neutral-500)}button.cats-btn.outline_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-300)}button.cats-btn.disable{pointer-events:none;opacity:.6}button.cats-btn.fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-600)}button.cats-btn.disable_fill_lightBlue_btn{background-color:var(--blue-50);color:var(--blue-300);pointer-events:none}button.cats-btn.bg_logic_btn{background-color:var(--white);color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}button.cats-btn.no_outline_btn{background-color:var(--blue-50);color:var(--blue-600);outline:none}button.cats-btn .close_outline_btn{background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--blue-50);color:var(--blue-600)}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--white);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--neutral-500);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-top:0;border-left:0}.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))}.checkbox-container,.item,.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)}.checkbox-container.disabled-option,.item.disabled-option,.multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.checkbox-container.disabled-option input[type=checkbox]:checked,.item.disabled-option input[type=checkbox]:checked,.multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.checkbox-container.disabled-option input[type=checkbox]:checked:after,.item.disabled-option input[type=checkbox]:checked:after,.multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.checkbox-container.disabled-option::selection,.item.disabled-option::selection,.multiitem.disabled-option::selection{background-color:transparent}.checkbox-container input[type=checkbox],.item input[type=checkbox],.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}.checkbox-container input[type=checkbox]:after,.item input[type=checkbox]:after,.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}.checkbox-container input[type=checkbox]:checked,.item input[type=checkbox]:checked,.multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.checkbox-container input[type=checkbox]:checked:after,.item input[type=checkbox]:checked:after,.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))}.checkbox-container input[type=checkbox]:indeterminate,.item input[type=checkbox]:indeterminate,.multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.checkbox-container input[type=checkbox]:indeterminate:after,.item input[type=checkbox]:indeterminate:after,.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))}.checkbox-container input[type=checkbox]:disabled,.item input[type=checkbox]:disabled,.multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:disabled+span,.item input[type=checkbox]:disabled+span,.multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.checkbox-container input[type=checkbox]:checked:disabled,.item input[type=checkbox]:checked:disabled,.multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.checkbox-container input[type=checkbox]:checked:disabled:after,.item input[type=checkbox]:checked:disabled:after,.multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.cats-modal-overlay{position:fixed;top:0;left:0;background:#040d17b2;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;z-index:10}.cats-modal-overlay .cats-modal{width:calc(100% - 8rem / var(--scale));height:calc(100% - 4rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;box-shadow:0 calc(.6666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow) 0 calc(1.6666666667rem / var(--scale)) calc(2rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);overflow:hidden;transition:all .3s ease}.cats-modal-overlay .cats-modal.expanded{width:100%;height:100%;border-radius:0}.cats-modal-overlay .cats-modal .cats-modal-progress-bar{display:flex;height:calc(.6666666667rem / var(--scale));background:var(--surface-background-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step{flex:1;background:var(--surface-background-default);transition:all .3s ease}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progres-done{background:var(--surface-action-default)}.cats-modal-overlay .cats-modal .cats-modal-progress-bar .cats-progress-step.progress-active{background:var(--surface-action-default);border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(1.3333333333rem / var(--scale)) calc(2.6666666667rem / var(--scale));height:calc(4.6666666667rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(3.3333333333rem / var(--scale)) 0 var(--canvas-shadow)}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-title{font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--text-heading-primary);max-width:calc(58.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-left .cats-step{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;color:var(--text-link-hover);background:var(--surface-decorative-blue);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-default);border-radius:calc(3rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-header .cats-header-right .cats-icon-btn{border:none;cursor:pointer;width:calc(2.3333333333rem / var(--scale));height:calc(2.3333333333rem / var(--scale))}.cats-modal-overlay .cats-modal .cats-modal-body{height:calc(100% - 64px);flex:1;position:relative}\n"] }]
|
|
3771
3760
|
}], ctorParameters: () => [{ type: WizardService }], propDecorators: { wizardId: [{
|
|
3772
3761
|
type: Input
|
|
3773
3762
|
}], title: [{
|
|
@@ -4005,11 +3994,11 @@ class HeaderComponent {
|
|
|
4005
3994
|
this.menuOpen = false;
|
|
4006
3995
|
}
|
|
4007
3996
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4008
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HeaderComponent, isStandalone: true, selector: "cats-ui-header", ngImport: i0, template: "<header class=\"app-header\">\r\n <!-- Left Section -->\r\n <div class=\"header-left\">\r\n <!-- <button class=\"app-launcher\" aria-label=\"App Launcher\">\r\n <span class=\"grid-icon\"></span>\r\n </button> -->\r\n <img src=\"images/Waffle.svg\" alt=\"\" />\r\n <img src=\"images/brand-Logo.svg\" alt=\"Brand Logo\" class=\"brand-logo\" />\r\n\r\n <img\r\n src=\"images/product-logo.svg\"\r\n alt=\"Product Logo\"\r\n class=\"product-logo\"\r\n />\r\n </div>\r\n\r\n <!-- Right Section -->\r\n <div class=\"header-right\">\r\n <img src=\"images/global-logo.svg\" alt=\"\" class=\"icon-btn global-icon\" />\r\n <img src=\"images/nodification.svg\" alt=\"\" class=\"icon-btn notification\" />\r\n\r\n <div class=\"dropdown control-panel\">\r\n <
|
|
3997
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HeaderComponent, isStandalone: true, selector: "cats-ui-header", ngImport: i0, template: "<header class=\"app-header\">\r\n <!-- Left Section -->\r\n <div class=\"header-left\">\r\n <!-- <button class=\"app-launcher\" aria-label=\"App Launcher\">\r\n <span class=\"grid-icon\"></span>\r\n </button> -->\r\n <img src=\"images/Waffle.svg\" alt=\"\" />\r\n <img src=\"images/brand-Logo.svg\" alt=\"Brand Logo\" class=\"brand-logo\" />\r\n\r\n <img\r\n src=\"images/product-logo.svg\"\r\n alt=\"Product Logo\"\r\n class=\"product-logo\"\r\n />\r\n </div>\r\n\r\n <!-- Right Section -->\r\n <div class=\"header-right\">\r\n <img src=\"images/global-logo.svg\" alt=\"\" class=\"icon-btn global-icon\" />\r\n <img src=\"images/nodification.svg\" alt=\"\" class=\"icon-btn notification\" />\r\n\r\n <div class=\"dropdown control-panel\">\r\n <button class=\"dropdown-trigger\">Control Panel \u2304</button>\r\n </div>\r\n\r\n <button class=\"ai-agent-btn\">\u2B50 AI Agent</button>\r\n\r\n <div class=\"profile\">\r\n <img src=\"avatar.jpg\" alt=\"User\" />\r\n <div class=\"profile-info\">\r\n <span class=\"name\">Maximillian Th.</span>\r\n <span class=\"role\">Super Admin User</span>\r\n </div>\r\n </div>\r\n </div>\r\n</header>\r\n", styles: [".app-header{display:flex;justify-content:space-between;align-items:center;padding-right:16px;height:64px;background:#0b1220;color:#fff}.app-header .header-left,.app-header .header-right{display:flex;align-items:center;gap:16px}.app-header .dropdown .dropdown-trigger{height:36px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;cursor:pointer;font-size:13px}.app-header .dropdown .dropdown-trigger:hover{background:#ffffff14}.app-header .ai-agent-btn{height:36px;padding:0 12px;border-radius:8px;background:#1f2937;color:#facc15;border:1px solid rgba(255,255,255,.2);font-size:13px;cursor:pointer}.app-header .ai-agent-btn:hover{background:#374151}.app-header .profile{display:flex;align-items:center;gap:10px;padding:4px 8px;border-radius:8px;cursor:pointer}.app-header .profile:hover{background:#ffffff14}.app-header .profile img{width:32px;height:32px;border-radius:50%}.app-header .profile .profile-info{display:flex;flex-direction:column}.app-header .profile .profile-info .name{font-size:13px;font-weight:500}.app-header .profile .profile-info .role{font-size:11px;color:#9ca3af}\n"] });
|
|
4009
3998
|
}
|
|
4010
3999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
4011
4000
|
type: Component,
|
|
4012
|
-
args: [{ selector: 'cats-ui-header', imports: [
|
|
4001
|
+
args: [{ selector: 'cats-ui-header', imports: [], template: "<header class=\"app-header\">\r\n <!-- Left Section -->\r\n <div class=\"header-left\">\r\n <!-- <button class=\"app-launcher\" aria-label=\"App Launcher\">\r\n <span class=\"grid-icon\"></span>\r\n </button> -->\r\n <img src=\"images/Waffle.svg\" alt=\"\" />\r\n <img src=\"images/brand-Logo.svg\" alt=\"Brand Logo\" class=\"brand-logo\" />\r\n\r\n <img\r\n src=\"images/product-logo.svg\"\r\n alt=\"Product Logo\"\r\n class=\"product-logo\"\r\n />\r\n </div>\r\n\r\n <!-- Right Section -->\r\n <div class=\"header-right\">\r\n <img src=\"images/global-logo.svg\" alt=\"\" class=\"icon-btn global-icon\" />\r\n <img src=\"images/nodification.svg\" alt=\"\" class=\"icon-btn notification\" />\r\n\r\n <div class=\"dropdown control-panel\">\r\n <button class=\"dropdown-trigger\">Control Panel \u2304</button>\r\n </div>\r\n\r\n <button class=\"ai-agent-btn\">\u2B50 AI Agent</button>\r\n\r\n <div class=\"profile\">\r\n <img src=\"avatar.jpg\" alt=\"User\" />\r\n <div class=\"profile-info\">\r\n <span class=\"name\">Maximillian Th.</span>\r\n <span class=\"role\">Super Admin User</span>\r\n </div>\r\n </div>\r\n </div>\r\n</header>\r\n", styles: [".app-header{display:flex;justify-content:space-between;align-items:center;padding-right:16px;height:64px;background:#0b1220;color:#fff}.app-header .header-left,.app-header .header-right{display:flex;align-items:center;gap:16px}.app-header .dropdown .dropdown-trigger{height:36px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;cursor:pointer;font-size:13px}.app-header .dropdown .dropdown-trigger:hover{background:#ffffff14}.app-header .ai-agent-btn{height:36px;padding:0 12px;border-radius:8px;background:#1f2937;color:#facc15;border:1px solid rgba(255,255,255,.2);font-size:13px;cursor:pointer}.app-header .ai-agent-btn:hover{background:#374151}.app-header .profile{display:flex;align-items:center;gap:10px;padding:4px 8px;border-radius:8px;cursor:pointer}.app-header .profile:hover{background:#ffffff14}.app-header .profile img{width:32px;height:32px;border-radius:50%}.app-header .profile .profile-info{display:flex;flex-direction:column}.app-header .profile .profile-info .name{font-size:13px;font-weight:500}.app-header .profile .profile-info .role{font-size:11px;color:#9ca3af}\n"] }]
|
|
4013
4002
|
}] });
|
|
4014
4003
|
|
|
4015
4004
|
/*
|