@brickclay-org/ui 0.1.86 → 0.1.87

package/fesm2022/brickclay-org-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Output, Input, forwardRef, HostListener, ViewChild, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent, NgZone, ContentChild } from '@angular/core';
+import { Component, EventEmitter, Output, Input, forwardRef, HostListener, ViewChild, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, NgZone, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -14,7 +14,7 @@ import * as i3 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
-import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { toObservable } from '@angular/core/rxjs-interop';
 
 // Icon paths that will be resolved relative to the library's assets folder
@@ -6757,7 +6757,7 @@ class BkInput {
                 useExisting: forwardRef(() => BkInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply !pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
@@ -6768,7 +6768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply !pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -9457,37 +9457,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 // ─── Service ─────────────────────────────────────────────────────────────────
 let _toastId = 0;
+/**
+ * Renders through Angular CDK's Overlay (same primitive `bk-select` / `bk-dialog` / `bk-popover`
+ * already use), positioned with a `GlobalPositionStrategy` rather than a connected one — a toast
+ * has no trigger element to anchor to, it docks to a viewport corner, which is exactly what the
+ * global strategy is for (Angular Material's own snack bar is built the same way).
+ *
+ * The win over the old `document.body.appendChild()` approach isn't just consistency: CDK sets
+ * top/left/right/bottom as inline styles from JS at runtime, via its own prebuilt overlay CSS
+ * (`@angular/cdk/overlay-prebuilt.css`, already imported by consumers) — positioning no longer
+ * depends on this library's own Tailwind `@apply` classes surviving the build pipeline at all.
+ */
 class BkToastrService {
-    appRef;
-    injector;
+    overlay = inject(Overlay);
     _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
     toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
     _position = signal('top-right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
     position = computed(() => this._position(), ...(ngDevMode ? [{ debugName: "position" }] : []));
+    overlayRef = null;
     componentRef = null;
-    constructor(appRef, injector) {
-        this.appRef = appRef;
-        this.injector = injector;
+    buildPositionStrategy(position) {
+        const strategy = this.overlay.position().global();
+        const [vertical, horizontal] = position.split('-');
+        if (vertical === 'top')
+            strategy.top('1rem');
+        else
+            strategy.bottom('1rem');
+        if (horizontal === 'center')
+            strategy.centerHorizontally();
+        else if (horizontal === 'left')
+            strategy.left('1rem');
+        else
+            strategy.right('1rem');
+        return strategy;
     }
     initializeContainer() {
-        if (this.componentRef)
+        if (this.overlayRef)
             return;
-        // Check if we're in browser environment
-        if (typeof document === 'undefined' || !document.body) {
-            // If document.body doesn't exist yet, wait for it
-            setTimeout(() => this.initializeContainer(), 0);
+        // SSR / no document yet — nothing to attach an overlay into.
+        if (typeof document === 'undefined')
             return;
-        }
-        // Create component dynamically
-        this.componentRef = createComponent(BkToastr, {
-            environmentInjector: this.injector,
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.buildPositionStrategy(this._position()),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            panelClass: 'bk-toastr-panel',
         });
-        // Attach to DOM
-        document.body.appendChild(this.componentRef.location.nativeElement);
-        // Register for change detection
-        // Note: We don't call appRef.tick() here to avoid recursive tick calls
-        // Angular will automatically detect changes for the attached view
-        this.appRef.attachView(this.componentRef.hostView);
+        this.componentRef = this.overlayRef.attach(new ComponentPortal(BkToastr));
     }
     /** Show a toast with full config */
     show(config) {
@@ -9557,14 +9572,15 @@ class BkToastrService {
         // Initialize container if not already created
         this.initializeContainer();
         this._position.set(position);
+        this.overlayRef?.updatePositionStrategy(this.buildPositionStrategy(position));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
+        }] });
 
 class BkToastr {
     svc = inject(BkToastrService);
@@ -9580,11 +9596,11 @@ class BkToastr {
         t.actionCallback?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-item-inline]=\"toast.inline\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"toast-content flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-gray-500 border-gray-50;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-gray-500;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item:not(.toast-item-inline){display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-item-inline]=\"toast.inline\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"toast-content flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply flex flex-col gap-3 max-w-[100vw-2rem];pointer-events:none}.cdk-overlay-pane.bk-toastr-panel{z-index:2147483647!important}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-gray-500 border-gray-50;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-gray-500;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{align-items:center}.toast-item:not(.toast-item-inline){display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-item-inline]=\"toast.inline\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"toast-content flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-gray-500 border-gray-50;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-gray-500;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item:not(.toast-item-inline){display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
+            args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-item-inline]=\"toast.inline\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"toast-content flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply flex flex-col gap-3 max-w-[100vw-2rem];pointer-events:none}.cdk-overlay-pane.bk-toastr-panel{z-index:2147483647!important}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-gray-500 border-gray-50;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-gray-500;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{align-items:center}.toast-item:not(.toast-item-inline){display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
         }] });
 
 class ColumnFilterOption {