@brickclay-org/ui 0.1.90 → 0.1.91

package/fesm2022/brickclay-org-ui.mjs

@@ -7393,6 +7393,19 @@ class BkInput {
     // =================== Internal State ===================
     isFocused = false;
     inputValue = '';
+    /**
+     * What the template's `[value]` binding actually renders. Deliberately a separate property
+     * from `inputValue` (which still mirrors the live text for `isFilled`/bookkeeping on every
+     * keystroke): re-applying `[value]` to an element that already displays that exact text is a
+     * no-op on most inputs, but on `type="number"` it isn't - Chromium doesn't skip the write just
+     * because the string is unchanged, and since `type="number"` also refuses `setSelectionRange`
+     * (it throws), we have no way to put the caret back afterwards. So `displayValue` is only ever
+     * written by genuinely external changes (writeValue(), the phone country-prefix swap) - never
+     * from handleInput() or the "parent mutated the native value" resync, both of which are only
+     * echoing back text the DOM already has. That keeps every self-originated edit from re-touching
+     * `.value` at all, which is the only reliable fix here given number inputs can't be caret-restored.
+     */
+    displayValue = '';
     isDropdownOpen = false;
     pendingMaskedValue = null;
     isPropagatingViewValue = false;
@@ -7485,6 +7498,7 @@ class BkInput {
         this.value = str;
         if (!this.maskValue) {
             this.inputValue = str;
+            this.displayValue = str;
             this.pendingMaskedValue = null;
             return;
         }
@@ -7511,6 +7525,7 @@ class BkInput {
     ngOnInit() {
         if (this.value !== undefined && this.value !== null && this.value !== '') {
             this.inputValue = String(this.value);
+            this.displayValue = this.inputValue;
         }
         if (this.password && this.type !== 'password')
             this.type = 'password';
@@ -7547,7 +7562,14 @@ class BkInput {
     }
     handleInput(event) {
         const viewVal = event.target.value ?? '';
-        // Keep the displayed value masked.
+        // Track the live text for isFilled/bookkeeping, but deliberately do NOT touch
+        // `displayValue` (what `[value]` actually renders) here - the native element already
+        // shows `viewVal` (it's where we just read it from), or for a masked field ngx-mask has
+        // already written its reformatted text directly to the DOM itself. Re-pushing that same
+        // text through `[value]` would be a redundant echo, and on `type="number"` a redundant
+        // `.value` write isn't a no-op the way it is on other input types - see the `displayValue`
+        // field's own comment above for why that's exactly what jumps the caret to the start while
+        // editing a decimal.
         this.inputValue = viewVal;
         // Decide what to write to the model.
         const modelRaw = this.currency
@@ -7565,6 +7587,8 @@ class BkInput {
         this.input.emit(event);
         // If parent handlers mutate the underlying native input value (e.g. clamping/formatting),
         // resync our internal view-model from the real input to avoid visual "append" artifacts.
+        // Only `inputValue` (bookkeeping) - the parent already wrote the new text straight to the
+        // DOM itself, so, same as above, `displayValue` has nothing left to do here.
         queueMicrotask(() => {
             const nativeVal = this.inputField?.nativeElement?.value;
             if (nativeVal !== undefined && nativeVal !== null && nativeVal !== this.inputValue) {
@@ -7654,6 +7678,7 @@ class BkInput {
             newPhone = ''; // optionally: newPhone = country.prefix;
         }
         this.inputValue = newPhone;
+        this.displayValue = newPhone;
         this.value = newPhone;
         this.onChange(newPhone);
         setTimeout(() => {
@@ -7700,10 +7725,12 @@ class BkInput {
         this.pendingMaskedValue = value;
         if (!this.maskValue || !this.maskDirective || !this.inputField?.nativeElement) {
             this.inputValue = value;
+            this.displayValue = value;
             return;
         }
         await this.maskDirective.writeValue(value);
         this.inputValue = this.inputField.nativeElement.value ?? '';
+        this.displayValue = this.inputValue;
         this.pendingMaskedValue = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7714,7 +7741,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=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-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=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-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=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-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=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-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=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-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;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-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}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-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: i2.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: i2.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=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-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=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-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=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-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=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-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=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-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;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-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}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-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: i2.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: i2.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,
@@ -7725,7 +7752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-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=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-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=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-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=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-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=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-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;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-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}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-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=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-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=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-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=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-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=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-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;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-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}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -10459,6 +10486,15 @@ class BkToastrService {
             scrollStrategy: this.overlay.scrollStrategies.noop(),
             panelClass: 'bk-toastr-panel',
         });
+        // `panelClass` only reaches `.cdk-overlay-pane` — but every overlay in a consuming app
+        // (dialogs, selects, popovers, date/time pickers) shares the same `.cdk-overlay-container`,
+        // and their *wrappers* (`.cdk-global-overlay-wrapper` / `.cdk-overlay-connected-position-
+        // bounding-box`) all tie at z-index:1000 in CDK's prebuilt CSS. A tie falls back to DOM
+        // order, so whichever overlay attached most recently wins — meaning a dialog/dropdown opened
+        // after this toast container was first created would render on top of it no matter what
+        // z-index the pane has. `hostElement` is the actual wrapper competing in that stacking
+        // comparison, so it — not the pane — is what has to be pinned above everything else.
+        this.overlayRef.hostElement.style.zIndex = '2147483647';
         this.componentRef = this.overlayRef.attach(new ComponentPortal(BkToastr));
     }
     /** Show a toast with full config */
@@ -11733,10 +11769,13 @@ class BkMenu {
     }
     // Pop-up mode: open a parent's fly-out on hover (and close its siblings).
     onItemEnter(item, siblings, event, level, parent) {
-        // Hover only opens/switches fly-outs in hover mode. In click mode every
-        // open and switch must come from a real click, so hover does nothing —
-        // even while a sibling's panel is already open.
-        if (!this.isHoverTrigger || item.disabled || !this.hasChildren(item))
+        if (!this.isPopup || item.disabled || !this.hasChildren(item))
+            return;
+        // Click mode still follows the pointer once a panel at this level is open,
+        // the way a native menubar does — hovering a sibling switches without a
+        // second click. With nothing open, hover does nothing.
+        if (this.trigger === 'click'
+            && !siblings.some(sibling => sibling.id !== item.id && this.isOpen(sibling)))
             return;
         // Re-entering after crossing the gap: keep what's already up rather than
         // tearing it down and re-placing it.