mis-crystal-design-system 18.1.0-signal-test-1 → 18.1.0

package/async-search-dropdown/async-dropdown.component.d.ts

@@ -13,7 +13,7 @@ export declare class AsyncDropdownComponent {
     width: import("@angular/core").InputSignal<string>;
     size: import("@angular/core").InputSignal<"md" | "sm">;
     httpStream: import("@angular/core").InputSignal<(searchKey: string) => any>;
-    displayKey: import("@angular/core").InputSignal<string>;
+    displayKey: import("@angular/core").InputSignal<any>;
     secondaryDisplayKey: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
     debounceTime: import("@angular/core").InputSignal<number>;
@@ -28,7 +28,7 @@ export declare class AsyncDropdownComponent {
     dropdownListPosition: import("@angular/core").InputSignal<"Left" | "Right">;
     customPlaceholderIcon: import("@angular/core").InputSignal<string>;
     selections: import("@angular/core").InputSignal<Map<string, any>>;
-    searchValue: import("@angular/core").InputSignal<string>;
+    searchValue: import("@angular/core").InputSignal<any>;
     onSelect: import("@angular/core").OutputEmitterRef<any>;
     searchQueryChange: import("@angular/core").OutputEmitterRef<string>;
     clear: import("@angular/core").OutputEmitterRef<boolean>;
@@ -64,6 +64,6 @@ export declare class AsyncDropdownComponent {
     removeInputValue(): void;
     defaultCall(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AsyncDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AsyncDropdownComponent, "mis-async-search-dropdown", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "httpStream": { "alias": "httpStream"; "required": true; "isSignal": true; }; "displayKey": { "alias": "displayKey"; "required": true; "isSignal": true; }; "secondaryDisplayKey": { "alias": "secondaryDisplayKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "minInputLength": { "alias": "minInputLength"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "uniqueKey": { "alias": "uniqueKey"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disableCopyPaste": { "alias": "disableCopyPaste"; "required": false; "isSignal": true; }; "dropdownListWidth": { "alias": "dropdownListWidth"; "required": false; "isSignal": true; }; "dropdownListPosition": { "alias": "dropdownListPosition"; "required": false; "isSignal": true; }; "customPlaceholderIcon": { "alias": "customPlaceholderIcon"; "required": false; "isSignal": true; }; "selections": { "alias": "selections"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; "searchQueryChange": "searchQueryChange"; "clear": "clear"; "itemSelected": "itemSelected"; "itemRemoved": "itemRemoved"; }, ["customItem", "customLoader"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AsyncDropdownComponent, "mis-async-search-dropdown", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "httpStream": { "alias": "httpStream"; "required": true; "isSignal": true; }; "displayKey": { "alias": "displayKey"; "required": false; "isSignal": true; }; "secondaryDisplayKey": { "alias": "secondaryDisplayKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "minInputLength": { "alias": "minInputLength"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "uniqueKey": { "alias": "uniqueKey"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disableCopyPaste": { "alias": "disableCopyPaste"; "required": false; "isSignal": true; }; "dropdownListWidth": { "alias": "dropdownListWidth"; "required": false; "isSignal": true; }; "dropdownListPosition": { "alias": "dropdownListPosition"; "required": false; "isSignal": true; }; "customPlaceholderIcon": { "alias": "customPlaceholderIcon"; "required": false; "isSignal": true; }; "selections": { "alias": "selections"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; "searchQueryChange": "searchQueryChange"; "clear": "clear"; "itemSelected": "itemSelected"; "itemRemoved": "itemRemoved"; }, ["customItem", "customLoader"], never, false, never>;
 }
 export {};

package/button/button.component.d.ts

@@ -33,8 +33,6 @@ export declare class ButtonComponent implements OnInit {
     readonly showLeftIcon: import("@angular/core").Signal<boolean>;
     readonly showRightIcon: import("@angular/core").Signal<boolean>;
     readonly showSpinner: import("@angular/core").Signal<boolean>;
-    readonly isDisabled: import("@angular/core").Signal<boolean>;
-    hostDisabled: boolean;
     click: EventEmitter<any>;
     constructor();
     ngOnInit(): void;

package/button/button.directive.scss

@@ -0,0 +1,71 @@
+@import '../styles/mis-color-constants.scss';
+
+.mis-btn {
+  background: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  vertical-align: middle;
+  text-align: center;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  justify-content: center;
+
+  span,
+  img {
+    margin-right: 8px;
+  }
+
+  padding: 10px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  &.mis-btn-lg {
+    padding: 16px;
+    font-weight: bold;
+  }
+  &.mis-btn-sm {
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  background-color: transparent;
+  color: var(--brand-primary, $pmry_500);
+  &:hover {
+    background-color: var(--brand-primary-hover, $tr_hover);
+  }
+  &:focus {
+    background-color: var(--brand-primary-active, $tr_pressed);
+  }
+  &:disabled {
+    color: var(--text-tertiary, $text-disabled);
+    pointer-events: none;
+  }
+
+  &.mis-outline {
+    border: 1px solid var(--brand-primary, $pmry_500);
+
+    &:disabled {
+      color: var(--text-tertiary, $text-disabled);
+      border-color: var(--text-tertiary, $text-disabled);
+    }
+  }
+
+  &.mis-primary {
+    background-color: var(--brand-primary, $pmry_500);
+    color: var(--bg-primary, $text_white);
+    &:hover {
+      background-color: var(--brand-primary-dark, $pmry_600);
+    }
+    &:focus {
+      background-color: var(--brand-primary-darker, $pmry_700);
+    }
+    &:disabled {
+      background-color: var(--border-primary, $grey_seperators);
+      color: var(--text-tertiary, $text-disabled);
+    }
+  }
+}

package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts

@@ -6,6 +6,10 @@ export declare class TzDpContainerComponent implements OnInit {
     private toast;
     data: IDatePickerData;
     private parseZoneInstance;
+    /**
+     * Parse date string using configured format with fallback
+     */
+    private parseDateWithMultipleFormats;
     private rawWeekDays;
     private readonly weekDaysSignal;
     private readonly currentMonthNumberSignal;

package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts

@@ -3,10 +3,15 @@ import { ICurrentMonth, ICurrentMonthDates, IDatePickerData, IWeekDay, ISelected
 import { ToastService } from "mis-crystal-design-system/toast";
 import * as i0 from "@angular/core";
 export declare class TzDrpContainerComponent implements OnInit {
+    private injectedData;
     private toast;
     private readonly CUSTOM_RANGE_LABEL;
-    data: IDatePickerData;
+    readonly data: import("@angular/core").WritableSignal<IDatePickerData>;
     private dayjsInstance;
+    /**
+     * Parse date string using configured format with fallback
+     */
+    private parseDateWithMultipleFormats;
     private rawWeekDays;
     private readonly weekDaysSignal;
     private readonly currentMonthNumberSignal;
@@ -35,17 +40,17 @@ export declare class TzDrpContainerComponent implements OnInit {
     currentMonthNumber: import("@angular/core").Signal<number>;
     currentMonth: import("@angular/core").Signal<ICurrentMonth>;
     currentYearNumber: import("@angular/core").Signal<number>;
-    currentMonthDates: import("@angular/core").Signal<ICurrentMonthDates[]>;
     nextMonthNumber: import("@angular/core").Signal<number>;
     nextMonth: import("@angular/core").Signal<ICurrentMonth>;
     nextYearNumber: import("@angular/core").Signal<number>;
-    nextMonthDates: import("@angular/core").Signal<ICurrentMonthDates[]>;
     isPreviousMonthDisabled: import("@angular/core").Signal<boolean>;
     isNextMonthDisabled: import("@angular/core").Signal<boolean>;
     selectionStarted: import("@angular/core").Signal<boolean>;
     localSelectedDates: import("@angular/core").Signal<ISelectedDatesConfig>;
     isDatesValid: import("@angular/core").Signal<boolean>;
     selectedItemLabel: import("@angular/core").Signal<string>;
+    currentMonthDates: import("@angular/core").Signal<ICurrentMonthDates[]>;
+    nextMonthDates: import("@angular/core").Signal<ICurrentMonthDates[]>;
     startHour: import("@angular/core").Signal<number>;
     startMinute: import("@angular/core").Signal<number>;
     startAmPm: import("@angular/core").Signal<string>;
@@ -54,11 +59,10 @@ export declare class TzDrpContainerComponent implements OnInit {
     endAmPm: import("@angular/core").Signal<string>;
     startHour24: import("@angular/core").Signal<number>;
     endHour24: import("@angular/core").Signal<number>;
-    constructor(data: IDatePickerData, toast: ToastService);
+    constructor(injectedData: IDatePickerData, toast: ToastService);
     ngOnInit(): void;
     retractDayMonth(day: any, month: any, year: any): any;
     closeOnEsc(): void;
-    private currentDateInstance;
     private calculateMinMaxDays;
     navigateMonth(direction: "NEXT" | "PREVIOUS"): void;
     private generateDates;

package/drawer/drawer.scss

@@ -0,0 +1,20 @@
+.mis-drawer {
+  display: block;
+  transition: all 300ms ease-out;
+}
+.mis-drawer-overlay {
+  background: var(--bg-overlay-light, rgba(0, 0, 0, 0.12));
+}
+mis-datepicker-container {
+  z-index: 2100;
+}
+
+mis-loader {
+  z-index: 3000;
+}
+
+@keyframes slideOut {
+  to {
+    transform: translateX(100%);
+  }
+}

package/dropdown/dropdown.component.d.ts

@@ -7,7 +7,7 @@ export declare class DropdownComponent {
     private overlay;
     private viewContainerRef;
     private cdr;
-    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    isOpen: import("@angular/core").WritableSignal<boolean>;
     readonly loading: import("@angular/core").WritableSignal<boolean>;
     readonly isSearchInputFocused: import("@angular/core").WritableSignal<boolean>;
     readonly searchInput: import("@angular/core").WritableSignal<string>;

package/dynamic-theme/branding.types.d.ts

@@ -0,0 +1,84 @@
+export declare namespace BrandingTypes {
+    interface ThemeColors {
+        brandPrimary: string;
+        brandPrimaryLight: string;
+        brandPrimaryDark: string;
+        brandPrimaryDarker: string;
+        brandPrimaryLighter: string;
+        brandPrimaryLightest: string;
+        brandPrimaryHover: string;
+        brandPrimaryActive: string;
+        brandSecondary: string;
+        brandSecondaryLight: string;
+        brandSecondaryDark: string;
+        brandSecondaryLighter: string;
+        brandAccent: string;
+        brandAccentLight: string;
+        brandAccentDark: string;
+        brandAccentLighter: string;
+        brandSuccess: string;
+        brandSuccessLight: string;
+        brandSuccessDark: string;
+        brandSuccessLighter: string;
+        brandSuccessLightest: string;
+        brandError: string;
+        brandErrorLight: string;
+        brandErrorDark: string;
+        brandErrorLighter: string;
+        brandErrorLightest: string;
+        brandWarning: string;
+        brandWarningLight: string;
+        brandWarningDark: string;
+        brandWarningLighter: string;
+        brandWarningLightest: string;
+        brandInfo: string;
+        brandInfoLight: string;
+        brandInfoDark: string;
+        brandInfoLighter: string;
+        textPrimary: string;
+        textSecondary: string;
+        textTertiary: string;
+        textDisabled: string;
+        textPrimary87: string;
+        textPrimary60: string;
+        textPrimary38: string;
+        textPrimary12: string;
+        bgPrimary: string;
+        bgSecondary: string;
+        bgTertiary: string;
+        bgOverlay: string;
+        bgOverlayLight: string;
+        bgOverlayLighter: string;
+        bgOverlayLightest: string;
+        borderPrimary: string;
+        borderSecondary: string;
+        borderTertiary: string;
+        borderLight: string;
+        borderPrimary12: string;
+        borderPrimary08: string;
+        borderPrimary06: string;
+        shadowPrimary: string;
+        shadowSecondary: string;
+        shadowTertiary: string;
+        shadowLight: string;
+        statusAvailable: string;
+        statusUnavailable: string;
+        statusHotseat: string;
+        statusMultiteam: string;
+        statusSelected: string;
+        statusUpcoming: string;
+        statusRoom: string;
+        statusRoomBooked: string;
+        statusRoomUnavailable: string;
+        teamColor1: string;
+        teamColor2: string;
+        teamColor3: string;
+        teamColor4: string;
+        teamColor5: string;
+        teamColor6: string;
+        teamColor7: string;
+        teamColor8: string;
+        teamColor9: string;
+    }
+    const defaultTheme: ThemeColors;
+}

package/dynamic-theme/dynamic-theme.module.d.ts

@@ -0,0 +1,9 @@
+import { DynamicThemeService } from './dynamic-theme.service';
+import * as i0 from "@angular/core";
+export declare class DynamicThemeModule {
+    private themeService;
+    constructor(themeService: DynamicThemeService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicThemeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicThemeModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DynamicThemeModule>;
+}

package/dynamic-theme/dynamic-theme.service.d.ts

@@ -0,0 +1,89 @@
+import { Observable } from 'rxjs';
+import { BrandingTypes } from './branding.types';
+import * as i0 from "@angular/core";
+export declare class DynamicThemeService {
+    private currentThemeSubject;
+    currentTheme$: Observable<BrandingTypes.ThemeColors>;
+    constructor();
+    /**
+     * Apply a complete theme configuration to the root element
+     * @param theme - ThemeColors object containing all color values
+     */
+    applyTheme(theme: BrandingTypes.ThemeColors): void;
+    /**
+     * Apply partial theme updates (only specified colors will be updated)
+     * @param partialTheme - Partial ThemeColors object with only the colors to update
+     */
+    applyPartialTheme(partialTheme: Partial<BrandingTypes.ThemeColors>): void;
+    /**
+     * Set a single color property
+     * @param colorKey - The camelCase key of the color property
+     * @param colorValue - The color value (hex, rgb, rgba, etc.)
+     */
+    setColorProperty(colorKey: keyof BrandingTypes.ThemeColors, colorValue: string): void;
+    /**
+     * Get the current theme colors
+     * @returns Current ThemeColors object
+     */
+    getCurrentTheme(): BrandingTypes.ThemeColors;
+    /**
+     * Get a specific color value from the current theme
+     * @param colorKey - The camelCase key of the color property
+     * @returns The color value as string
+     */
+    getColorProperty(colorKey: keyof BrandingTypes.ThemeColors): string;
+    /**
+     * Reset theme to default values
+     */
+    resetToDefault(): void;
+    /**
+     * Remove a specific CSS custom property from the root element
+     * @param colorKey - The camelCase key of the color property to remove
+     */
+    removeColorProperty(colorKey: keyof BrandingTypes.ThemeColors): void;
+    /**
+     * Get all CSS custom properties currently set on the root element
+     * @returns Object with CSS variable names as keys and their values
+     */
+    getAllCSSVariables(): Record<string, string>;
+    /**
+     * Apply theme with validation
+     * @param theme - ThemeColors object to validate and apply
+     * @returns boolean indicating if the theme was successfully applied
+     */
+    applyThemeWithValidation(theme: BrandingTypes.ThemeColors): boolean;
+    /**
+     * Convert camelCase to kebab-case for CSS custom properties
+     * @param camelCase - The camelCase string to convert
+     * @returns kebab-case string
+     */
+    private camelToKebabCase;
+    /**
+     * Convert kebab-case to camelCase
+     * @param kebabCase - The kebab-case string to convert
+     * @returns camelCase string
+     */
+    private kebabToCamelCase;
+    /**
+     * Create a theme preset from current applied theme
+     * @param presetName - Name for the theme preset
+     * @returns Theme preset object
+     */
+    createThemePreset(presetName: string): {
+        name: string;
+        theme: BrandingTypes.ThemeColors;
+    };
+    /**
+     * Export current theme as JSON string
+     * @returns JSON string representation of current theme
+     */
+    exportThemeAsJSON(): string;
+    /**
+     * Import theme from JSON string
+     * @param jsonString - JSON string representation of theme
+     * @returns boolean indicating success
+     */
+    importThemeFromJSON(jsonString: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicThemeService>;
+}

package/dynamic-theme/index.d.ts

@@ -0,0 +1 @@
+export * from "./public_api";

package/dynamic-theme/public_api.d.ts

@@ -0,0 +1,3 @@
+export { BrandingTypes } from './branding.types';
+export { DynamicThemeService } from './dynamic-theme.service';
+export { DynamicThemeModule } from './dynamic-theme.module';

package/esm2022/action-list/action-list.component.mjs

@@ -367,11 +367,11 @@ export class ActionListComponent {
             i0.ɵɵproperty("ngIf", ((tmp_7_0 = ctx.selectedItems()) == null ? null : tmp_7_0.length) > 1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c5, ctx.isOpen() ? "rotate(180deg)" : "rotate(0deg)"));
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.CheckboxComponent], styles: [".main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:hover, .main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%]{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%]{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]{cursor:not-allowed}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]:focus-visible{background-color:transparent;outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{color:#929dab;-webkit-user-select:none;user-select:none}"] }); }
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.CheckboxComponent], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:hover, .main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%]{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%]{width:24px;height:24px;background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]{cursor:not-allowed}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]:focus-visible{background-color:transparent;outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item-disabled[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{color:var(--text-tertiary, #929DAB);-webkit-user-select:none;user-select:none}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionListComponent, [{
         type: Component,
-        args: [{ selector: "mis-action-list", template: "<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height().length > 0 ? height() : '',\n    width: width().length > 0 ? width() : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen() ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ internalLabel() }}\n      </p>\n      <p *ngIf=\"selectedItems()?.length > 1\" class=\"count\">+{{ selectedItems()?.length - 1 }}</p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen() ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight(),\n      width: dropdownListWidth()\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        #singleItem\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n        (mouseenter)=\"onHover(item, true, singleItem)\"\n        *ngFor=\"let item of internalData()\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n          <span>{{ item?.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item?.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"internalData().length === 0\">\n        {{ noDataMessage() || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight(),\n      width: dropdownListWidth()\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"!item.disabled && selectItem(item)\"\n        *ngFor=\"let item of subItems()\"\n      >\n        <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n          <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n        </div>\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n          <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n            <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"internalData().length === 0\">\n        {{ noDataMessage() || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #tickIcon>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n      fill=\"#181F33\"\n    />\n  </svg>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;user-select:none}\n"] }]
+        args: [{ selector: "mis-action-list", template: "<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height().length > 0 ? height() : '',\n    width: width().length > 0 ? width() : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen() ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ internalLabel() }}\n      </p>\n      <p *ngIf=\"selectedItems()?.length > 1\" class=\"count\">+{{ selectedItems()?.length - 1 }}</p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen() ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight(),\n      width: dropdownListWidth()\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        #singleItem\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n        (mouseenter)=\"onHover(item, true, singleItem)\"\n        *ngFor=\"let item of internalData()\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n          <span>{{ item?.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item?.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"internalData().length === 0\">\n        {{ noDataMessage() || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight(),\n      width: dropdownListWidth()\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"!item.disabled && selectItem(item)\"\n        *ngFor=\"let item of subItems()\"\n      >\n        <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n          <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n        </div>\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n          <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n            <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"internalData().length === 0\">\n        {{ noDataMessage() || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #tickIcon>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n      fill=\"#181F33\"\n    />\n  </svg>\n</ng-template>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .label .count{width:24px;height:24px;background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:var(--text-tertiary, #929DAB);-webkit-user-select:none;user-select:none}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }], { selectElement: [{
             type: ViewChild,
             args: ["select", { static: false }]