mis-crystal-design-system 18.0.21 → 18.0.22-test-dynamic-theme-2

package/button/button.directive.scss

@@ -31,39 +31,39 @@
   }
 
   background-color: transparent;
-  color: #0937b2;
+  color: var(--brand-primary, #0937B2);
   &:hover {
-    background-color: #f0f3fa;
+    background-color: var(--brand-primary-hover, #F0F3FA);
   }
   &:focus {
-    background-color: #dae1f3;
+    background-color: var(--brand-primary-active, #DAE1F3);
   }
   &:disabled {
-    color: #929dab;
+    color: var(--text-tertiary, #929DAB);
     pointer-events: none;
   }
 
   &.mis-outline {
-    border: 1px solid #0937b2;
+    border: 1px solid var(--brand-primary, #0937B2);
 
     &:disabled {
-      color: #929dab;
-      border-color: #929dab;
+      color: var(--text-tertiary, #929DAB);
+      border-color: var(--text-tertiary, #929DAB);
     }
   }
 
   &.mis-primary {
-    background-color: #0937b2;
-    color: #ffffff;
+    background-color: var(--brand-primary, #0937B2);
+    color: var(--bg-primary, #FFFFFF);
     &:hover {
-      background-color: #062a99;
+      background-color: var(--brand-primary-dark, #062A99);
     }
     &:focus {
-      background-color: #041f80;
+      background-color: var(--brand-primary-darker, #041F80);
     }
     &:disabled {
-      background-color: #e0e0e0;
-      color: #929dab;
+      background-color: var(--border-primary, #E0E0E0);
+      color: var(--text-tertiary, #929DAB);
     }
   }
 }

package/drawer/drawer.scss

@@ -3,7 +3,7 @@
   transition: all 300ms ease-out;
 }
 .mis-drawer-overlay {
-  background: rgba(0, 0, 0, 0.12);
+  background: var(--bg-overlay-light, rgba(0, 0, 0, 0.12));
 }
 mis-datepicker-container {
   z-index: 2100;

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

@@ -324,11 +324,11 @@ export class ActionListComponent {
             i0.ɵɵproperty("ngIf", (ctx.selectedItems == null ? null : ctx.selectedItems.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: [".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        {{ label }}\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 data\"\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=\"data.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=\"data.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        {{ label }}\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 data\"\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=\"data.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=\"data.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 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 }], { data: [{
             type: Input
         }], height: [{

package/esm2022/async-search-dropdown/async-dropdown.component.mjs

@@ -458,11 +458,11 @@ export class AsyncDropdownComponent {
             i0.ɵɵproperty("ngIf", ctx.disableCopyPaste)("ngIfElse", enableCopyPaste_r13);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.searchInput == null ? null : ctx.searchInput.value == null ? null : ctx.searchInput.value.length);
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: [".dd-wrapper[_ngcontent-%COMP%]{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:#f5f5f5}.dd-wrapper[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%]   .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%]   .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{color:#6a737d!important;pointer-events:none}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover:not(.disabled){background:#f5f7fc}.dd-list[_ngcontent-%COMP%]   .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:#e0e0e0;overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:#181f33}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{text-align:center}  #spinner{position:relative!important}"] }); }
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: [".dd-wrapper[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%]   .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%]   .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list[_ngcontent-%COMP%]   .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{text-align:center}  #spinner{position:relative!important}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AsyncDropdownComponent, [{
         type: Component,
-        args: [{ selector: "mis-async-search-dropdown", template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" [style.width]=\"width\" #ddBtn>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n      <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" [ngStyle]=\"{ 'margin-right': '4px'}\">{{item[displayKey]}}</span>\n      <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" tabindex=\"0\" (keyup.enter)=\"removeItem(item)\" [ngStyle]=\"{\n        'cursor': 'pointer',\n        'font-size': size === 'sm' ? '12px' : '14px'\n      }\" class=\"icon-ic-navigation-cancel-24\"></span>\n    </div>\n  </div>\n  <div class=\"search-input\">\n    <div *ngIf=\"customPlaceholderIcon; else defaultSearchIcon\" class=\"custom-icon\">\n      <img [src]=\"customPlaceholderIcon\" alt=\"customIcon\" />\n    </div>\n    <ng-template #defaultSearchIcon>\n      <span class=\"icon-ic-action-search-24\"></span>\n    </ng-template>\n    <input *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\" />\n    </ng-template>\n    <div class=\"icon-ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" tabindex=\"0\" (click)=\"removeInputValue()\" (keyup.enter)=\"removeInputValue()\"></div>\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" [ngStyle]=\"{'max-height':height, 'width': dropdownListWidth}\"  [ngClass]=\"{'dd-list-pd':data.length === 0}\" tabindex=\"0\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"openPopUpOnTab\">\n    <ng-container *ngIf=\"loading\">\n      <ng-container\n        *ngIf=\"customLoader; else defaultLoader\"\n        [ngTemplateOutlet]=\"customLoader\"\n      ></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"error\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br> Please try again later.</p>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!loading && !error && data.length > 0\">\n      <ng-container *ngFor=\"let item of data\">\n        <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\"> \n          <div tabindex=\"-1\" cdkFocusInitial></div>  \n          <div\n          [tabindex]=\"openPopUpOnTab ? 0 : -1\"\n          *ngIf=\"customItem; else standardItem\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-container>\n        </div>\n          <ng-template #standardItem>\n            <div tabindex=\"-1\" cdkFocusInitial></div>  \n            <div class=\"item\" (click)=\"selectData(item, false)\" [tabindex]=\"openPopUpOnTab ? 0 : -1\" (keyup.enter)=\"selectData(item, false)\">\n              <div class=\"value\">\n                <div class=\"primary\">\n                  {{ item[displayKey] }}\n                </div>\n                <div class=\"secondary\">\n                  {{ item[secondaryDisplayKey] }}\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n  </div>\n  </div>\n</ng-template>\n", styles: [".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:#e0e0e0;overflow-wrap:anywhere;cursor:default}.chip span{color:#181f33}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
+        args: [{ selector: "mis-async-search-dropdown", template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" [style.width]=\"width\" #ddBtn>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n      <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" [ngStyle]=\"{ 'margin-right': '4px'}\">{{item[displayKey]}}</span>\n      <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" tabindex=\"0\" (keyup.enter)=\"removeItem(item)\" [ngStyle]=\"{\n        'cursor': 'pointer',\n        'font-size': size === 'sm' ? '12px' : '14px'\n      }\" class=\"icon-ic-navigation-cancel-24\"></span>\n    </div>\n  </div>\n  <div class=\"search-input\">\n    <div *ngIf=\"customPlaceholderIcon; else defaultSearchIcon\" class=\"custom-icon\">\n      <img [src]=\"customPlaceholderIcon\" alt=\"customIcon\" />\n    </div>\n    <ng-template #defaultSearchIcon>\n      <span class=\"icon-ic-action-search-24\"></span>\n    </ng-template>\n    <input *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\" />\n    </ng-template>\n    <div class=\"icon-ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" tabindex=\"0\" (click)=\"removeInputValue()\" (keyup.enter)=\"removeInputValue()\"></div>\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" [ngStyle]=\"{'max-height':height, 'width': dropdownListWidth}\"  [ngClass]=\"{'dd-list-pd':data.length === 0}\" tabindex=\"0\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"openPopUpOnTab\">\n    <ng-container *ngIf=\"loading\">\n      <ng-container\n        *ngIf=\"customLoader; else defaultLoader\"\n        [ngTemplateOutlet]=\"customLoader\"\n      ></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"error\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br> Please try again later.</p>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!loading && !error && data.length > 0\">\n      <ng-container *ngFor=\"let item of data\">\n        <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\"> \n          <div tabindex=\"-1\" cdkFocusInitial></div>  \n          <div\n          [tabindex]=\"openPopUpOnTab ? 0 : -1\"\n          *ngIf=\"customItem; else standardItem\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-container>\n        </div>\n          <ng-template #standardItem>\n            <div tabindex=\"-1\" cdkFocusInitial></div>  \n            <div class=\"item\" (click)=\"selectData(item, false)\" [tabindex]=\"openPopUpOnTab ? 0 : -1\" (keyup.enter)=\"selectData(item, false)\">\n              <div class=\"value\">\n                <div class=\"primary\">\n                  {{ item[displayKey] }}\n                </div>\n                <div class=\"secondary\">\n                  {{ item[secondaryDisplayKey] }}\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n  </div>\n  </div>\n</ng-template>\n", styles: [".dd-wrapper{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list .item:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip span{color:var(--text-primary, #181F33)}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
     }], () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }], { height: [{
             type: Input
         }], width: [{

package/esm2022/button/button.component.mjs

@@ -68,11 +68,11 @@ export class ButtonComponent {
             i0.ɵɵtextInterpolate(ctx.name);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showIcon && ctx.iconPosition === "Right");
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle], styles: ["button[_ngcontent-%COMP%]{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid[_ngcontent-%COMP%]{color:#fff;background:#0937b2}.solid[_ngcontent-%COMP%]:hover:enabled{background:#062a99}.solid[_ngcontent-%COMP%]:active:enabled{background:#041f80}.solid[_ngcontent-%COMP%]:disabled{color:#929dab;background:#f5f5f5}.outline[_ngcontent-%COMP%]{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline[_ngcontent-%COMP%]:hover:enabled{background:#f0f3fa}.outline[_ngcontent-%COMP%]:active:enabled{background:#dae1f3}.outline[_ngcontent-%COMP%]:disabled{color:#929dab;border:1px solid #929dab}.text[_ngcontent-%COMP%]{color:#181f33;background:#fff}.text[_ngcontent-%COMP%]:hover:enabled{background:#f0f3fa}.text[_ngcontent-%COMP%]:active:enabled{background:#dae1f3}.text[_ngcontent-%COMP%]:disabled{color:#929dab}.large[_ngcontent-%COMP%]{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium[_ngcontent-%COMP%]{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small[_ngcontent-%COMP%]{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile[_ngcontent-%COMP%]{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}#left-icon[_ngcontent-%COMP%]{margin-right:8px}#right-icon[_ngcontent-%COMP%]{margin-left:8px}.loader[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.spinner[_ngcontent-%COMP%]{width:16px;height:16px;border:2px solid transparent;color:#0937b2;border-top:2px solid currentColor;border-radius:50%;animation:_ngcontent-%COMP%_spin 1s linear infinite}button.loading[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%]   #left-icon[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%]   #right-icon[_ngcontent-%COMP%]{visibility:hidden}button.loading[_ngcontent-%COMP%]   .loader[_ngcontent-%COMP%]{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading[_ngcontent-%COMP%]{position:relative}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle], styles: ["button[_ngcontent-%COMP%]{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary, #181F33);background-color:var(--bg-primary, #FFFFFF)}.solid[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF);background:var(--brand-primary, #0937B2)}.solid[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-dark, #062A99)}.solid[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-darker, #041F80)}.solid[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB);background:var(--bg-tertiary, #F5F5F5)}.outline[_ngcontent-%COMP%]{border:1px solid var(--brand-primary, #0937B2);color:var(--brand-primary, #0937B2);background:var(--bg-primary, #FFFFFF)}.outline[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.outline[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.outline[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB);border:1px solid var(--text-tertiary, #929DAB)}.text[_ngcontent-%COMP%]{color:var(--text-primary, #181F33);background:var(--bg-primary, #FFFFFF)}.text[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.text[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.text[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB)}.large[_ngcontent-%COMP%]{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium[_ngcontent-%COMP%]{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small[_ngcontent-%COMP%]{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile[_ngcontent-%COMP%]{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}#left-icon[_ngcontent-%COMP%]{margin-right:8px}#right-icon[_ngcontent-%COMP%]{margin-left:8px}.loader[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.spinner[_ngcontent-%COMP%]{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary, #0937B2);border-top:2px solid currentColor;border-radius:50%;animation:_ngcontent-%COMP%_spin 1s linear infinite}button.loading[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%]   #left-icon[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%]   #right-icon[_ngcontent-%COMP%]{visibility:hidden}button.loading[_ngcontent-%COMP%]   .loader[_ngcontent-%COMP%]{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading[_ngcontent-%COMP%]{position:relative}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
         type: Component,
-        args: [{ selector: "mis-button", template: "<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled || showLoader\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M',\n    loading: showLoader\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <div class=\"loader\" *ngIf=\"showLoader\">\n    <div class=\"spinner\"></div>\n  </div>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  <span class=\"button-text\">{{ name }}</span>\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n", styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}.loader{display:flex;justify-content:center;align-items:center}.spinner{width:16px;height:16px;border:2px solid transparent;color:#0937b2;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}button.loading .button-text,button.loading #left-icon,button.loading #right-icon{visibility:hidden}button.loading .loader{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading{position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        args: [{ selector: "mis-button", template: "<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled || showLoader\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M',\n    loading: showLoader\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <div class=\"loader\" *ngIf=\"showLoader\">\n    <div class=\"spinner\"></div>\n  </div>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  <span class=\"button-text\">{{ name }}</span>\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n", styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary, #181F33);background-color:var(--bg-primary, #FFFFFF)}.solid{color:var(--bg-primary, #FFFFFF);background:var(--brand-primary, #0937B2)}.solid:hover:enabled{background:var(--brand-primary-dark, #062A99)}.solid:active:enabled{background:var(--brand-primary-darker, #041F80)}.solid:disabled{color:var(--text-tertiary, #929DAB);background:var(--bg-tertiary, #F5F5F5)}.outline{border:1px solid var(--brand-primary, #0937B2);color:var(--brand-primary, #0937B2);background:var(--bg-primary, #FFFFFF)}.outline:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.outline:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.outline:disabled{color:var(--text-tertiary, #929DAB);border:1px solid var(--text-tertiary, #929DAB)}.text{color:var(--text-primary, #181F33);background:var(--bg-primary, #FFFFFF)}.text:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.text:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.text:disabled{color:var(--text-tertiary, #929DAB)}.large{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}.loader{display:flex;justify-content:center;align-items:center}.spinner{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary, #0937B2);border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}button.loading .button-text,button.loading #left-icon,button.loading #right-icon{visibility:hidden}button.loading .loader{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading{position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], () => [], { name: [{
             type: Input
         }], type: [{

package/esm2022/checkbox/checkbox.component.mjs

@@ -97,11 +97,11 @@ export class CheckboxComponent {
             i0.ɵɵproperty("ngIf", !ctx.isIndeterminate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isIndeterminate);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective], styles: [".checkbox-container[_ngcontent-%COMP%]{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark[_ngcontent-%COMP%]{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:#fff;border:solid 2px #6a737d;box-sizing:border-box}.checkmark[_ngcontent-%COMP%]:hover{border-color:#929dab}.checkmark[_ngcontent-%COMP%]:focus-within, .checkmark[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]{background-color:#0937b2;border-color:#0937b2}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark.disabled-checkbox[_ngcontent-%COMP%]{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]:after{top:1px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%]   .checkmark.indeterminate[_ngcontent-%COMP%]:after{top:2px;width:2px;height:0px;border:solid white;border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox[_ngcontent-%COMP%]{pointer-events:none;border-color:#c8cdd3}.error[_ngcontent-%COMP%]{border-color:#b00020}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .error.checkmark[_ngcontent-%COMP%]{border:#b00020!important;background:#b00020!important}.checkbox-container[_ngcontent-%COMP%]   .error.checkmark[_ngcontent-%COMP%]:after{top:3px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%]   .error.checkmark.indeterminate[_ngcontent-%COMP%]:after{top:4px;width:2px;height:0px;border:solid white;border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error[_ngcontent-%COMP%]:focus-within, .error[_ngcontent-%COMP%]:focus{box-shadow:none!important;outline:none}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective], styles: [".checkbox-container[_ngcontent-%COMP%]{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark[_ngcontent-%COMP%]{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary, #FFFFFF);border:solid 2px var(--text-secondary, #6A737D);box-sizing:border-box}.checkmark[_ngcontent-%COMP%]:hover{border-color:var(--text-tertiary, #929DAB)}.checkmark[_ngcontent-%COMP%]:focus-within, .checkmark[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .09em var(--bg-primary, #FFFFFF),0 0 .01em .2em var(--brand-primary, #0937B2);outline:none}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-color:var(--brand-primary, #0937B2)}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark.disabled-checkbox[_ngcontent-%COMP%]{background-color:var(--text-disabled, #C8CDD3);border-color:var(--text-disabled, #C8CDD3)}.checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%]   .checkmark.indeterminate[_ngcontent-%COMP%]:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox[_ngcontent-%COMP%]{pointer-events:none;border-color:var(--text-disabled, #C8CDD3)}.error[_ngcontent-%COMP%]{border-color:var(--brand-error, #B00020)}.checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .error.checkmark[_ngcontent-%COMP%]{border:var(--brand-error, #B00020)!important;background:var(--brand-error, #B00020)!important}.checkbox-container[_ngcontent-%COMP%]   .error.checkmark[_ngcontent-%COMP%]:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%]   .error.checkmark.indeterminate[_ngcontent-%COMP%]:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error[_ngcontent-%COMP%]:focus-within, .error[_ngcontent-%COMP%]:focus{box-shadow:none!important;outline:none}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
         type: Component,
-        args: [{ selector: "mis-checkbox", template: "<div\n  class=\"checkbox-container\"\n  [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n  (click)=\"!formControl.disabled && toggleState()\"\n  (keyup.enter)=\"!formControl.disabled && toggleState()\"\n>\n  <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n  <span\n    class=\"checkmark\"\n    *ngIf=\"!isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n  <span\n    class=\"checkmark indeterminate\"\n    tabindex=\"0\"\n    *ngIf=\"isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n</div>\n", styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:#fff;border:solid 2px #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus-within,.checkmark:focus{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0px;border:solid white;border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0px;border:solid white;border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus-within,.error:focus{box-shadow:none!important;outline:none}\n"] }]
+        args: [{ selector: "mis-checkbox", template: "<div\n  class=\"checkbox-container\"\n  [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n  (click)=\"!formControl.disabled && toggleState()\"\n  (keyup.enter)=\"!formControl.disabled && toggleState()\"\n>\n  <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n  <span\n    class=\"checkmark\"\n    *ngIf=\"!isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n  <span\n    class=\"checkmark indeterminate\"\n    tabindex=\"0\"\n    *ngIf=\"isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n</div>\n", styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary, #FFFFFF);border:solid 2px var(--text-secondary, #6A737D);box-sizing:border-box}.checkmark:hover{border-color:var(--text-tertiary, #929DAB)}.checkmark:focus-within,.checkmark:focus{box-shadow:0 0 0 .09em var(--bg-primary, #FFFFFF),0 0 .01em .2em var(--brand-primary, #0937B2);outline:none}.checkbox-container input:checked~.checkmark{background-color:var(--brand-primary, #0937B2);border-color:var(--brand-primary, #0937B2)}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:var(--text-disabled, #C8CDD3);border-color:var(--text-disabled, #C8CDD3)}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:var(--text-disabled, #C8CDD3)}.error{border-color:var(--brand-error, #B00020)}.checkbox-container input:checked~.error.checkmark{border:var(--brand-error, #B00020)!important;background:var(--brand-error, #B00020)!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus-within,.error:focus{box-shadow:none!important;outline:none}\n"] }]
     }], () => [], { inputBox: [{
             type: ViewChild,
             args: ["input"]

package/esm2022/chip/chip.component.mjs

@@ -58,11 +58,11 @@ export class ChipComponent {
             i0.ɵɵproperty("ngIf", ctx.count != null || ctx.count != undefined);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.dismissible);
-        } }, dependencies: [i1.NgClass, i1.NgIf], styles: ["#chip-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container[_ngcontent-%COMP%]:hover{background:#d7d9de}img[_ngcontent-%COMP%]{margin-right:4px}#close-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container[_ngcontent-%COMP%]{display:flex;height:100%;justify-content:center;align-items:center}#separator[_ngcontent-%COMP%]{height:100%;width:1px;background-color:#c8cdd3;margin:0 8px}#count-text[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.small[_ngcontent-%COMP%]{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:#181f33}.medium[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.small-m[_ngcontent-%COMP%]{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:#181f33}.medium-m[_ngcontent-%COMP%]{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:#181f33}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgIf], styles: ["#chip-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary, #E0E0E0);box-sizing:border-box;cursor:default}#chip-container[_ngcontent-%COMP%]:hover{background:var(--border-secondary, #D6DCE2)}img[_ngcontent-%COMP%]{margin-right:4px}#close-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container[_ngcontent-%COMP%]{display:flex;height:100%;justify-content:center;align-items:center}#separator[_ngcontent-%COMP%]{height:100%;width:1px;background-color:var(--text-disabled, #C8CDD3);margin:0 8px}#count-text[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.small[_ngcontent-%COMP%]{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary, #181F33)}.medium[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.small-m[_ngcontent-%COMP%]{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary, #181F33)}.medium-m[_ngcontent-%COMP%]{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary, #181F33)}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipComponent, [{
         type: Component,
-        args: [{ selector: "mis-chip", template: "<div\n  id=\"chip-container\"\n  tabindex=\"0\"\n  [ngClass]=\"{\n    small: size === 'Small',\n    medium: size === 'Medium',\n    'small-m': size === 'Small-M',\n    'medium-m': size === 'Medium-M'\n  }\"\n>\n  <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"chip icon\" />\n  <span tabindex=\"0\">{{ label }}</span>\n  <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n    <div id=\"separator\"></div>\n    <span id=\"count-text\">{{ count }}</span>\n  </div>\n  <span *ngIf=\"dismissible\" tabindex=\"0\" id=\"close-icon\" aria-label=\"remove chip\" (keyup.enter)=\"cancel.emit(value)\" (click)=\"cancel.emit(value)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </span>\n</div>\n", styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container:hover{background:#d7d9de}img{margin-right:4px}#close-icon{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container{display:flex;height:100%;justify-content:center;align-items:center}#separator{height:100%;width:1px;background-color:#c8cdd3;margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:#181f33}.medium{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:#181f33}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:#181f33}\n"] }]
+        args: [{ selector: "mis-chip", template: "<div\n  id=\"chip-container\"\n  tabindex=\"0\"\n  [ngClass]=\"{\n    small: size === 'Small',\n    medium: size === 'Medium',\n    'small-m': size === 'Small-M',\n    'medium-m': size === 'Medium-M'\n  }\"\n>\n  <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"chip icon\" />\n  <span tabindex=\"0\">{{ label }}</span>\n  <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n    <div id=\"separator\"></div>\n    <span id=\"count-text\">{{ count }}</span>\n  </div>\n  <span *ngIf=\"dismissible\" tabindex=\"0\" id=\"close-icon\" aria-label=\"remove chip\" (keyup.enter)=\"cancel.emit(value)\" (click)=\"cancel.emit(value)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </span>\n</div>\n", styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary, #E0E0E0);box-sizing:border-box;cursor:default}#chip-container:hover{background:var(--border-secondary, #D6DCE2)}img{margin-right:4px}#close-icon{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container{display:flex;height:100%;justify-content:center;align-items:center}#separator{height:100%;width:1px;background-color:var(--text-disabled, #C8CDD3);margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary, #181F33)}.medium{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary, #181F33)}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary, #181F33)}\n"] }]
     }], () => [], { label: [{
             type: Input
         }], value: [{