@brickclay-org/ui 0.0.41 → 0.0.43

package/fesm2022/brickclay-org-ui.mjs

@@ -1,15 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import moment from 'moment';
-import { Subject } from 'rxjs';
+import { Subject, filter } from 'rxjs';
 import * as i2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { DIALOG_DATA as DIALOG_DATA$1, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 
 // Icon paths that will be resolved relative to the library's assets folder
 // When published to npm, users will need to configure their angular.json to include these assets
@@ -3031,15 +3035,18 @@ class BkSelect {
     notFoundText = input('No items found', ...(ngDevMode ? [{ debugName: "notFoundText" }] : []));
     loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
     clearAllText = input('Clear all', ...(ngDevMode ? [{ debugName: "clearAllText" }] : []));
+    groupBy = input('', ...(ngDevMode ? [{ debugName: "groupBy" }] : [])); // NEW
+    colorKey = input('', ...(ngDevMode ? [{ debugName: "colorKey" }] : [])); // e.g. "color"
     // iconSrc = input<string>('Clear all');
     iconAlt = 'icon';
-    label = 'Label';
+    label = '';
     required = false;
     iconSrc; // optional icon
     // Config
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     maxLabels = input(2, ...(ngDevMode ? [{ debugName: "maxLabels" }] : []));
     searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    allSelect = input(false, ...(ngDevMode ? [{ debugName: "allSelect" }] : []));
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -3136,7 +3143,16 @@ class BkSelect {
         // this.markedIndex.set(0);
         this.open.emit();
         this.focus.emit();
-        setTimeout(() => this.searchInput?.nativeElement.focus());
+        // this.markedIndex.set(0);
+        // setTimeout(() => this.searchInput?.nativeElement.focus());
+        setTimeout(() => {
+            if (this.searchable()) {
+                this.searchInput?.nativeElement.focus();
+            }
+            else {
+                this.controlWrapper?.nativeElement.focus();
+            }
+        });
     }
     closeDropdown() {
         if (!this.isOpen())
@@ -3241,7 +3257,7 @@ class BkSelect {
     handleClear(event) {
         event.stopPropagation();
         this.updateModel([]);
-        this.clear.emit();
+        this.clear.emit(null);
     }
     updateModel(items) {
         this.selectedOptions.set(items);
@@ -3249,14 +3265,14 @@ class BkSelect {
             const values = items.map(i => this.resolveValue(i));
             this._value = values;
             this.onChange(values);
-            this.change.emit(values);
+            this.change.emit(items);
         }
         else {
             const item = items[0] || null;
             const value = item ? this.resolveValue(item) : null;
             this._value = value;
             this.onChange(value);
-            this.change.emit(value);
+            this.change.emit(item);
         }
     }
     onSearchInput(event) {
@@ -3354,14 +3370,38 @@ class BkSelect {
         this.controlWrapper.nativeElement.focus();
         this.openDropdown();
     }
+    groupedItems = computed(() => {
+        const groupKey = this.groupBy();
+        const list = this.filteredItems();
+        if (!groupKey) {
+            return [{ group: null, items: list }];
+        }
+        const map = new Map();
+        list.forEach(item => {
+            const key = item[groupKey] ?? 'Others';
+            if (!map.has(key))
+                map.set(key, []);
+            map.get(key).push(item);
+        });
+        return Array.from(map.entries()).map(([group, items]) => ({
+            group,
+            items
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groupedItems" }] : []));
+    resolveColor(item) {
+        if (!item)
+            return null;
+        const key = this.colorKey();
+        return key && typeof item === 'object' ? item[key] : null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "window:scroll": "onWindowEvents()", "window:resize": "onWindowEvents()", "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "window:scroll": "onWindowEvents()", "window:resize": "onWindowEvents()", "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\" (click)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5 flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"ng-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\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\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\"/>\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"multi-badge-item\">\r\n              <span class=\"multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"multi-badge-item\"><span\r\n              class=\"multi-badge-item-text\">+{{ selectedOptions().length - maxLabels() }}</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.grouped]=\"groupBy()\"\r\n    >\r\n\r\n\r\n      @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"ng-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"ng-option\" (mousedown)=\"toggleSelectAll($event)\" [class.selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                    <polyline points=\"20 6 9 17 4 12\"/>\r\n                  </svg>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n\r\n            @if (group.group) {\r\n              <div class=\"ng-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                      <polyline points=\"20 6 9 17 4 12\"/>\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"ng-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];}.multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.grouped .ng-option{@apply ps-5;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.ng-options-list ::-webkit-scrollbar{width:10px}.ng-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.ng-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.ng-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.ng-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.ng-option-group:not(:first-child){@apply mt-4;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -3371,8 +3411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\" (click)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5 flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], iconAlt: [{
+                    ], template: "<div class=\"ng-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\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\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\"/>\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"multi-badge-item\">\r\n              <span class=\"multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"multi-badge-item\"><span\r\n              class=\"multi-badge-item-text\">+{{ selectedOptions().length - maxLabels() }}</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.grouped]=\"groupBy()\"\r\n    >\r\n\r\n\r\n      @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"ng-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"ng-option\" (mousedown)=\"toggleSelectAll($event)\" [class.selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                    <polyline points=\"20 6 9 17 4 12\"/>\r\n                  </svg>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n\r\n            @if (group.group) {\r\n              <div class=\"ng-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                      <polyline points=\"20 6 9 17 4 12\"/>\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"ng-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];}.multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.grouped .ng-option{@apply ps-5;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.ng-options-list ::-webkit-scrollbar{width:10px}.ng-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.ng-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.ng-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.ng-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.ng-option-group:not(:first-child){@apply mt-4;}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], iconAlt: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3380,7 +3420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], iconSrc: [{
                 type: Input
-            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabels", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }], change: [{ type: i0.Output, args: ["change"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], searchInput: [{
+            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabels", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelect", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }], change: [{ type: i0.Output, args: ["change"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
             }], optionsListContainer: [{
@@ -3749,7 +3789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-class BkChips {
+class BkInputChips {
     badgeInput;
     fieldWrapper;
     // --- Configuration Inputs ---
@@ -3928,21 +3968,21 @@ class BkChips {
         this.onChange([...this.badges]);
         this.blur.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkChips, isStandalone: true, selector: "bk-chips", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", readOnly: "readOnly", hasError: "hasError", errorMessage: "errorMessage" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInputChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInputChips, isStandalone: true, selector: "bk-input-chips", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", readOnly: "readOnly", hasError: "hasError", errorMessage: "errorMessage" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => BkChips),
+                useExisting: forwardRef(() => BkInputChips),
                 multi: true
             }
         ], viewQueries: [{ propertyName: "badgeInput", first: true, predicate: ["badgeInput"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkChips, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInputChips, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-chips', standalone: true, imports: [CommonModule, FormsModule], providers: [
+            args: [{ selector: 'bk-input-chips', standalone: true, imports: [CommonModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => BkChips),
+                            useExisting: forwardRef(() => BkInputChips),
                             multi: true
                         }
                     ], template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"] }]
@@ -4022,6 +4062,1202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Dialog Injection Tokens
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * • `DIALOG_DATA` — Re-exported from `@angular/cdk/dialog` so that
+ *   consumers import from our barrel and the token identity matches
+ *   exactly what CDK's `Dialog` service provides in the injector.
+ *   This means `@Inject(DIALOG_DATA)` works without any extra wiring.
+ *
+ * • `DIALOG_GLOBAL_CONFIG` — Optional app-level defaults, same pattern
+ *   as before.
+ *
+ * • `INTERNAL_DIALOG_CONFIG` — Internal-only token used to pass our
+ *   full `DialogConfig` (including animation fields) to the custom
+ *   `DialogContainerComponent`.  Not part of the public API.
+ */
+// ──── Public ─────────────────────────────────────────────────────────────
+/**
+ * Injection token used to pass arbitrary data into a dialog component.
+ *
+ * This is CDK's own `DIALOG_DATA` token — re-exported so that imports
+ * from our barrel (`shared/components/dialog`) resolve to the exact same
+ * token that CDK's `Dialog` service provides.
+ *
+ * Usage inside a dialog component:
+ * ```ts
+ * constructor(@Inject(DIALOG_DATA) public data: MyDataType) {}
+ * ```
+ */
+const DIALOG_DATA = DIALOG_DATA$1;
+/**
+ * Optional token for providing global dialog defaults at the
+ * application level.
+ *
+ * Usage in `app.config.ts` or a module's `providers` array:
+ * ```ts
+ * providers: [
+ *   { provide: DIALOG_GLOBAL_CONFIG, useValue: { animation: 'zoom', width: '600px' } }
+ * ]
+ * ```
+ */
+const DIALOG_GLOBAL_CONFIG = new InjectionToken('DIALOG_GLOBAL_CONFIG');
+// ──── Internal ───────────────────────────────────────────────────────────
+/**
+ * Internal token that carries our full `DialogConfig` (with animation
+ * settings, position offsets, etc.) into the `DialogContainerComponent`.
+ *
+ * @internal — not exported from the barrel; do not depend on it.
+ */
+const INTERNAL_DIALOG_CONFIG = new InjectionToken('INTERNAL_DIALOG_CONFIG');
+
+/**
+ * Dialog Animations
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Animations are implemented via the Web Animations API (WAAPI) instead of
+ * Angular's @angular/animations so that:
+ *  1. The dialog container stays truly standalone — no BrowserAnimationsModule
+ *     dependency is required.
+ *  2. We have full programmatic control over timing, easing, and cleanup.
+ *  3. Future presets can be added without touching the component template.
+ *
+ * Each preset exports an `enter` and `leave` keyframe array plus a
+ * recommended timing object. The DialogContainerComponent plays these
+ * via `element.animate()`.
+ */
+/**
+ * Build enter/leave WAAPI keyframes for the dialog **panel** element.
+ */
+function getDialogPanelAnimation(preset, enterDuration, leaveDuration) {
+    const easeEnter = 'cubic-bezier(0.0, 0.0, 0.2, 1)'; // decelerate
+    const easeLeave = 'cubic-bezier(0.4, 0.0, 1, 1)'; // accelerate
+    switch (preset) {
+        // ─── Fade ────────────────────────────────────────────────────
+        case 'fade':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'scale(0.95)' },
+                        { opacity: 1, transform: 'scale(1)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'scale(1)' },
+                        { opacity: 0, transform: 'scale(0.95)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Zoom ────────────────────────────────────────────────────
+        case 'zoom':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'scale(0.5)' },
+                        { opacity: 1, transform: 'scale(1)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'scale(1)' },
+                        { opacity: 0, transform: 'scale(0.5)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Top ───────────────────────────────────────────────
+        case 'slide-top':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateY(-40px)' },
+                        { opacity: 1, transform: 'translateY(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateY(0)' },
+                        { opacity: 0, transform: 'translateY(-40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Bottom ────────────────────────────────────────────
+        case 'slide-bottom':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateY(40px)' },
+                        { opacity: 1, transform: 'translateY(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateY(0)' },
+                        { opacity: 0, transform: 'translateY(40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Left ──────────────────────────────────────────────
+        case 'slide-left':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateX(-40px)' },
+                        { opacity: 1, transform: 'translateX(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateX(0)' },
+                        { opacity: 0, transform: 'translateX(-40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Right ─────────────────────────────────────────────
+        case 'slide-right':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateX(40px)' },
+                        { opacity: 1, transform: 'translateX(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateX(0)' },
+                        { opacity: 0, transform: 'translateX(40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── None ────────────────────────────────────────────────────
+        case 'none':
+        default:
+            return {
+                enter: {
+                    keyframes: [{ opacity: 1 }],
+                    options: { duration: 0, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [{ opacity: 0 }],
+                    options: { duration: 0, fill: 'forwards' },
+                },
+            };
+    }
+}
+/**
+ * Build enter/leave WAAPI keyframes for the **backdrop** element.
+ * The backdrop always uses a simple opacity fade regardless of the
+ * panel animation preset.
+ */
+function getDialogBackdropAnimation(enterDuration, leaveDuration) {
+    return {
+        enter: {
+            keyframes: [{ opacity: 0 }, { opacity: 1 }],
+            options: { duration: enterDuration, easing: 'ease-out', fill: 'forwards' },
+        },
+        leave: {
+            keyframes: [{ opacity: 1 }, { opacity: 0 }],
+            options: { duration: leaveDuration, easing: 'ease-in', fill: 'forwards' },
+        },
+    };
+}
+
+/**
+ * DialogContainerComponent
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Extends CDK's `CdkDialogContainer` — the headless base class that
+ * provides:
+ *   • Focus-trap management (tab key stays inside the dialog).
+ *   • Auto-focus / restore-focus behaviour.
+ *   • Portal outlet (`<ng-template cdkPortalOutlet />`) for dynamic
+ *     component projection.
+ *   • ARIA attribute management on the host element.
+ *
+ * We add:
+ *   • WAAPI enter / leave animations on the panel (host element) and
+ *     the CDK backdrop sibling.
+ *   • Flex-column styles on the dynamically created component host so
+ *     `.bk-dialog-content` scrolls and `.bk-dialog-actions` stays pinned.
+ *   • Position-offset application via CSS margin.
+ *
+ * This component is **never** used directly — it is created internally
+ * by `DialogService` via CDK's `Dialog.open()`.
+ */
+class DialogContainerComponent extends CdkDialogContainer {
+    /**
+     * Our full config (including animation fields).
+     * Provided by DialogService via the INTERNAL_DIALOG_CONFIG token.
+     */
+    _dialogConfig = inject(INTERNAL_DIALOG_CONFIG);
+    // ──── Opened promise ─────────────────────────────────────────────────
+    /**
+     * Resolves when the enter animation finishes (or immediately for 'none').
+     * `DialogService` subscribes via `.then()` to emit `afterOpened` on the
+     * `DialogRef`.
+     */
+    _resolveOpened;
+    opened = new Promise(resolve => {
+        this._resolveOpened = resolve;
+    });
+    // ──── Lifecycle ──────────────────────────────────────────────────────
+    ngOnInit() {
+        this._playEnterAnimation();
+        this._applyPositionOffsets();
+    }
+    // ──── Portal override ────────────────────────────────────────────────
+    /**
+     * Override the CDK base to apply flex-column layout on the dynamically
+     * created component's host element.
+     *
+     * Angular's emulated view encapsulation prevents scoped CSS from reaching
+     * dynamically-projected elements, so we set styles programmatically.
+     */
+    attachComponentPortal(portal) {
+        const ref = super.attachComponentPortal(portal);
+        const el = ref.location.nativeElement;
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.flex = '1 1 auto';
+        el.style.minHeight = '0';
+        el.style.overflow = 'hidden';
+        return ref;
+    }
+    // ──── WAAPI Animations ───────────────────────────────────────────────
+    /**
+     * Play the enter animation on the panel (host element) and backdrop.
+     * Resolves the `opened` promise when the panel animation finishes.
+     */
+    _playEnterAnimation() {
+        const preset = this._dialogConfig.animation ?? 'fade';
+        if (preset === 'none') {
+            this._resolveOpened();
+            return;
+        }
+        const enterDur = this._dialogConfig.animationDurationEnter ?? 200;
+        const leaveDur = this._dialogConfig.animationDurationLeave ?? 150;
+        // ── Panel animation ──
+        const panelAnim = getDialogPanelAnimation(preset, enterDur, leaveDur);
+        const anim = this._elementRef.nativeElement.animate(panelAnim.enter.keyframes, panelAnim.enter.options);
+        // ── Backdrop animation ──
+        const backdropEl = this._getBackdropElement();
+        if (backdropEl) {
+            // Override CDK's CSS transition so our WAAPI timing wins.
+            backdropEl.style.transition = 'none';
+            backdropEl.style.backgroundColor = 'var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5))';
+            const bdAnim = getDialogBackdropAnimation(enterDur, leaveDur);
+            backdropEl.animate(bdAnim.enter.keyframes, bdAnim.enter.options);
+        }
+        anim.onfinish = () => this._resolveOpened();
+    }
+    /**
+     * Play the leave animation.  Returns a Promise that resolves when done.
+     * Called by `DialogRef._runCloseSequence()` before CDK tears down the
+     * overlay.
+     */
+    playLeaveAnimation() {
+        const preset = this._dialogConfig.animation ?? 'fade';
+        if (preset === 'none')
+            return Promise.resolve();
+        const enterDur = this._dialogConfig.animationDurationEnter ?? 200;
+        const leaveDur = this._dialogConfig.animationDurationLeave ?? 150;
+        return new Promise(resolve => {
+            // ── Panel ──
+            const panelAnim = getDialogPanelAnimation(preset, enterDur, leaveDur);
+            const anim = this._elementRef.nativeElement.animate(panelAnim.leave.keyframes, panelAnim.leave.options);
+            // ── Backdrop ──
+            const backdropEl = this._getBackdropElement();
+            if (backdropEl) {
+                const bdAnim = getDialogBackdropAnimation(enterDur, leaveDur);
+                backdropEl.animate(bdAnim.leave.keyframes, bdAnim.leave.options);
+            }
+            anim.onfinish = () => resolve();
+            // Safety net — resolve even if onfinish never fires (SSR, etc.).
+            setTimeout(() => resolve(), leaveDur + 50);
+        });
+    }
+    // ──── Position Offsets ───────────────────────────────────────────────
+    /**
+     * Apply explicit position offsets via CSS margin.
+     * These are additive to CDK's `GlobalPositionStrategy` alignment.
+     */
+    _applyPositionOffsets() {
+        const pos = this._dialogConfig.position;
+        if (!pos)
+            return;
+        const el = this._elementRef.nativeElement;
+        if (pos.top)
+            el.style.marginTop = pos.top;
+        if (pos.bottom)
+            el.style.marginBottom = pos.bottom;
+        if (pos.left)
+            el.style.marginLeft = pos.left;
+        if (pos.right)
+            el.style.marginRight = pos.right;
+    }
+    // ──── Helpers ────────────────────────────────────────────────────────
+    /**
+     * CDK places the backdrop as a sibling of `.cdk-overlay-pane`.
+     * Walk up from our host → pane → wrapper, then query for the backdrop.
+     */
+    _getBackdropElement() {
+        const pane = this._elementRef.nativeElement.closest('.cdk-overlay-pane');
+        return pane?.parentElement?.querySelector('.cdk-overlay-backdrop') ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DialogContainerComponent, isStandalone: true, selector: "bk-dialog-container", host: { classAttribute: "bk-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-dialog-container', standalone: true, imports: [CdkPortalOutlet], host: {
+                        'class': 'bk-dialog-container',
+                    }, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"] }]
+        }] });
+
+/**
+ * DialogRef — Handle returned to callers by `DialogService.open()`.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Wraps CDK's `DialogRef` to add:
+ *  • WAAPI leave-animation before CDK tears down the overlay.
+ *  • Per-instance `afterOpened()` observable (CDK only has a service-level
+ *    `afterOpened` Subject).
+ *  • The same familiar API shape used by callers (`close`, `afterClosed`,
+ *    `backdropClick`, `keydownEvents`, `componentInstance`).
+ *
+ * CDK's `DialogRef<R, C>` has Result first, Component second.
+ * Ours keeps `<T, R>` (Component first, Result second) to match the
+ * convention consumers already use.
+ */
+class DialogRef {
+    _cdkRef;
+    /** Unique dialog identifier (managed by CDK). */
+    id;
+    /** Instance of the component rendered inside the dialog. */
+    componentInstance;
+    // ──── Internal wiring (set by DialogService) ──────────────────────────
+    /** @internal Container reference for leave animation. */
+    _containerInstance;
+    /** @internal Prevent double-close. */
+    _closing = false;
+    /** @internal Per-instance afterOpened Subject. */
+    _afterOpened$ = new Subject();
+    constructor(
+    /**
+     * @internal Wrapped CDK ref.
+     * Typed as `CdkDialogRef<any>` to avoid deep generic-variance issues
+     * that arise from CDK's `config.providers` callback signature.
+     * The public API (`afterClosed`, etc.) re-types the observables.
+     */
+    _cdkRef) {
+        this._cdkRef = _cdkRef;
+        this.id = _cdkRef.id;
+    }
+    // ──── Public API ──────────────────────────────────────────────────────
+    /**
+     * Close the dialog, optionally returning a result.
+     * Plays the WAAPI leave animation, then delegates to CDK for cleanup.
+     */
+    close(result) {
+        if (this._closing)
+            return;
+        this._closing = true;
+        this._runCloseSequence(result);
+    }
+    /**
+     * Observable that emits (and completes) once after the dialog has been
+     * removed from the DOM and all cleanup is done.
+     */
+    afterClosed() {
+        return this._cdkRef.closed;
+    }
+    /**
+     * Observable that emits (and completes) when the enter animation
+     * finishes and the dialog is fully visible.
+     */
+    afterOpened() {
+        return this._afterOpened$.asObservable();
+    }
+    /**
+     * Observable of backdrop / outside-pointer click events.
+     */
+    backdropClick() {
+        return this._cdkRef.outsidePointerEvents;
+    }
+    /**
+     * Observable of keyboard events dispatched while this dialog is open.
+     */
+    keydownEvents() {
+        return this._cdkRef.keydownEvents;
+    }
+    // ──── Internal helpers ────────────────────────────────────────────────
+    /** @internal Called by the container once the enter animation finishes. */
+    _emitOpened() {
+        this._afterOpened$.next();
+        this._afterOpened$.complete();
+    }
+    /** Play leave animation, then close via CDK. */
+    async _runCloseSequence(result) {
+        try {
+            await this._containerInstance.playLeaveAnimation();
+        }
+        catch {
+            // Animation may fail in SSR / test — proceed anyway.
+        }
+        this._cdkRef.close(result);
+    }
+}
+
+/**
+ * Dialog Configuration
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Our `DialogConfig` mirrors the fields from CDK's `DialogConfig` that we
+ * expose, plus adds custom animation properties powered by WAAPI.
+ *
+ * When `DialogService.open()` is called these values are:
+ *  1. Merged with global defaults and per-call overrides.
+ *  2. Mapped onto CDK's native `DialogConfig` for overlay, backdrop, scroll,
+ *     position, ARIA, and focus-trap management.
+ *  3. Passed to `DialogContainerComponent` via an internal token for
+ *     animation playback and position offsets.
+ *
+ * CDK handles: unique IDs, z-index stacking, scroll blocking, focus trap,
+ * backdrop rendering, overlay positioning, keyboard events.
+ * We handle: WAAPI animations, panel appearance, convenience config sugar.
+ */
+// ──── Defaults ───────────────────────────────────────────────────────────
+const DEFAULT_DIALOG_CONFIG = {
+    id: undefined,
+    width: undefined,
+    height: undefined,
+    minWidth: undefined,
+    minHeight: undefined,
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    disableClose: false,
+    closeOnBackdrop: true,
+    closeOnEsc: true,
+    hasBackdrop: true,
+    lockScroll: true,
+    panelClass: '',
+    backdropClass: '',
+    data: undefined,
+    animation: 'fade',
+    animationDurationEnter: 200,
+    animationDurationLeave: 150,
+    position: undefined,
+    role: 'dialog',
+    ariaLabel: undefined,
+    ariaLabelledBy: undefined,
+    ariaDescribedBy: undefined,
+    autoFocus: true,
+    restoreFocus: true,
+    scrollStrategy: undefined,
+};
+
+/**
+ * DialogService — The core engine of the custom dialog system.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Built on top of Angular CDK's `Dialog` service (the same foundation
+ * that `MatDialog` uses internally):
+ *
+ *  1. CDK creates the overlay, backdrop, scroll-blocking, focus-trap,
+ *     z-index stacking, and unique ID management — battle-tested infra
+ *     shared with every Angular Material dialog in the ecosystem.
+ *
+ *  2. We provide our own `DialogContainerComponent` (extending
+ *     `CdkDialogContainer`) for WAAPI animations and panel styling.
+ *
+ *  3. We wrap CDK's `DialogRef` in our own `DialogRef` to add the
+ *     leave-animation step before CDK tears down the overlay, and to
+ *     expose the same familiar API shape (`afterClosed()`, etc.).
+ *
+ *  4. Configuration is merged DEFAULT → GLOBAL → per-call, then mapped
+ *     to CDK's native config with our extras carried via an internal
+ *     injection token.
+ *
+ * What CDK handles for us (no custom code needed):
+ * ─────────────────────────────────────────────────
+ *   ✓ Unique dialog IDs (throws on collision)
+ *   ✓ Z-index stacking via `.cdk-overlay-container`
+ *   ✓ Focus trap (tab key stays inside dialog)
+ *   ✓ Auto-focus / restore-focus
+ *   ✓ Scroll blocking (BlockScrollStrategy)
+ *   ✓ Backdrop rendering and click detection
+ *   ✓ Keyboard event forwarding
+ *   ✓ Overlay DOM lifecycle (create → attach → detach → dispose)
+ *
+ * Memory safety:
+ * ─────────────
+ * CDK manages the full lifecycle: on close it detaches the overlay,
+ * destroys the container, and disposes the overlay ref.
+ * Our DialogRef subjects complete via CDK's `closed` observable,
+ * preventing lingering subscriptions.
+ */
+class DialogService {
+    _cdkDialog = inject(Dialog);
+    _overlay = inject(Overlay);
+    _globalConfig = inject(DIALOG_GLOBAL_CONFIG, { optional: true });
+    /** Stack of currently open dialog refs (most recent = last). */
+    _openDialogRefs = [];
+    // ════════════════════════════════════════════════════════════════════
+    //  Public API
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Open a dialog containing the given component.
+     *
+     * @param component  The component class to render inside the dialog.
+     * @param config     Optional per-dialog configuration (merged on top
+     *                   of global and default settings).
+     * @returns          A strongly-typed `DialogRef` to interact with.
+     *
+     * @example
+     * ```ts
+     * const ref = this.dialog.open(UserFormComponent, {
+     *   width: '500px',
+     *   data: { userId: 10 },
+     * });
+     * ref.afterClosed().subscribe(result => console.log(result));
+     * ```
+     */
+    open(component, config) {
+        // ── 1. Merge configs: DEFAULT ← GLOBAL ← per-call ──────────────
+        const mergedConfig = {
+            ...DEFAULT_DIALOG_CONFIG,
+            ...(this._globalConfig ?? {}),
+            ...(config ?? {}),
+        };
+        // ── 2. Prepare the return ref (set inside providers callback) ───
+        let ourRef;
+        // ── 3. Build CDK-native config ──────────────────────────────────
+        const cdkConfig = {
+            // Identity
+            id: mergedConfig.id,
+            // Sizing (applied on .cdk-overlay-pane)
+            width: mergedConfig.width,
+            height: mergedConfig.height,
+            minWidth: mergedConfig.minWidth,
+            minHeight: mergedConfig.minHeight,
+            maxWidth: mergedConfig.maxWidth ?? '90vw',
+            maxHeight: mergedConfig.maxHeight ?? '90vh',
+            // Backdrop
+            hasBackdrop: mergedConfig.hasBackdrop !== false,
+            backdropClass: mergedConfig.backdropClass || 'cdk-overlay-dark-backdrop',
+            // Panel class (always include our base class)
+            panelClass: this._buildPanelClasses(mergedConfig),
+            // Data (CDK provides this as DIALOG_DATA automatically)
+            data: mergedConfig.data,
+            // We manage close ourselves for fine-grained closeOnBackdrop / closeOnEsc.
+            disableClose: true,
+            // Accessibility
+            autoFocus: mergedConfig.autoFocus ?? true,
+            restoreFocus: mergedConfig.restoreFocus ?? true,
+            role: mergedConfig.role ?? 'dialog',
+            ariaLabel: mergedConfig.ariaLabel ?? null,
+            ariaLabelledBy: mergedConfig.ariaLabelledBy ?? null,
+            ariaDescribedBy: mergedConfig.ariaDescribedBy ?? null,
+            // Scroll strategy
+            scrollStrategy: mergedConfig.scrollStrategy ??
+                (mergedConfig.lockScroll !== false
+                    ? this._overlay.scrollStrategies.block()
+                    : this._overlay.scrollStrategies.noop()),
+            // Position strategy (centered by default, shifted by offsets)
+            positionStrategy: this._buildPositionStrategy(mergedConfig),
+            // ── Custom container ──────────────────────────────────────────
+            container: {
+                type: DialogContainerComponent,
+                providers: () => [
+                    { provide: INTERNAL_DIALOG_CONFIG, useValue: mergedConfig },
+                ],
+            },
+            // ── Provider callback ─────────────────────────────────────────
+            // Runs after the container is created but before the user
+            // component.  We create our `DialogRef` wrapper here and make
+            // it available for injection in the user component.
+            providers: (cdkRef, _cdkConfig, containerInstance) => {
+                ourRef = new DialogRef(cdkRef);
+                ourRef._containerInstance = containerInstance;
+                // Wire up afterOpened emission.
+                containerInstance.opened
+                    .then(() => ourRef._emitOpened());
+                return [
+                    { provide: DialogRef, useValue: ourRef },
+                ];
+            },
+        };
+        // ── 4. Open via CDK ─────────────────────────────────────────────
+        const cdkRef = this._cdkDialog.open(component, cdkConfig);
+        // ── 5. Link componentInstance ───────────────────────────────────
+        ourRef.componentInstance = cdkRef.componentInstance;
+        // ── 6. Set up close-on-backdrop / close-on-ESC ──────────────────
+        this._setupCloseListeners(ourRef, mergedConfig);
+        // ── 7. Track in stack ───────────────────────────────────────────
+        this._openDialogRefs.push(ourRef);
+        // ── 8. Cleanup on close ─────────────────────────────────────────
+        ourRef.afterClosed().subscribe(() => {
+            const idx = this._openDialogRefs.indexOf(ourRef);
+            if (idx !== -1)
+                this._openDialogRefs.splice(idx, 1);
+        });
+        return ourRef;
+    }
+    /**
+     * Close all currently open dialogs (most recent first).
+     */
+    closeAll() {
+        for (let i = this._openDialogRefs.length - 1; i >= 0; i--) {
+            this._openDialogRefs[i].close();
+        }
+    }
+    /**
+     * Returns the `DialogRef` of the most recently opened dialog,
+     * or `undefined` if none are open.
+     */
+    getTopDialog() {
+        return this._openDialogRefs[this._openDialogRefs.length - 1];
+    }
+    /**
+     * Get a dialog by its CDK-managed unique ID.
+     */
+    getDialogById(id) {
+        return this._openDialogRefs.find(r => r.id === id);
+    }
+    /**
+     * Number of currently open dialogs.
+     */
+    get openDialogCount() {
+        return this._openDialogRefs.length;
+    }
+    /**
+     * Read-only snapshot of currently open dialog refs.
+     * Used internally by content directives (`BkDialogTitle`, `BkDialogActions`,
+     * `BkDialogClose`) for the DOM-walk fallback when `DialogRef` is not
+     * available via injection (e.g. inside `<ng-template>`).
+     */
+    get openDialogsRef() {
+        return this._openDialogRefs;
+    }
+    // ════════════════════════════════════════════════════════════════════
+    //  Convenience Helpers
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Open a simple confirmation dialog.
+     * Resolves `true` if the user confirms, `false` otherwise.
+     *
+     * @example
+     * ```ts
+     * const ref = this.dialog.confirm({
+     *   message: 'Delete this item?',
+     *   component: ConfirmDialogComponent,
+     * });
+     * ref.afterClosed().subscribe(yes => { if (yes) ... });
+     * ```
+     */
+    confirm(options) {
+        return this.open(options.component, {
+            width: options.width ?? '400px',
+            disableClose: true,
+            closeOnBackdrop: false,
+            animation: 'fade',
+            data: {
+                title: options.title ?? 'Confirm',
+                message: options.message,
+                btnOkText: options.btnOkText ?? 'Yes',
+                btnCancelText: options.btnCancelText ?? 'No',
+            },
+        });
+    }
+    /**
+     * Open a simple alert dialog.
+     */
+    alert(options) {
+        return this.open(options.component, {
+            width: options.width ?? '400px',
+            disableClose: true,
+            closeOnBackdrop: false,
+            animation: 'fade',
+            data: {
+                title: options.title ?? 'Alert',
+                message: options.message,
+                btnOkText: options.btnOkText ?? 'OK',
+            },
+        });
+    }
+    // ════════════════════════════════════════════════════════════════════
+    //  Private
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Subscribe to backdrop-click and ESC events on the CDK ref,
+     * closing the dialog based on our config flags.
+     *
+     * We always set CDK `disableClose: true` so that CDK never auto-closes;
+     * this gives us fine-grained control over `closeOnBackdrop` and
+     * `closeOnEsc` independently.
+     */
+    _setupCloseListeners(ref, config) {
+        if (config.disableClose)
+            return;
+        // Backdrop click
+        if (config.closeOnBackdrop !== false) {
+            ref.backdropClick().subscribe(() => ref.close());
+        }
+        // ESC key
+        if (config.closeOnEsc !== false) {
+            ref.keydownEvents()
+                .pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
+                .subscribe((e) => {
+                e.preventDefault();
+                ref.close();
+            });
+        }
+    }
+    /**
+     * Build the CSS classes for the CDK overlay pane.
+     * Always includes our base class; adds user-provided classes on top.
+     */
+    _buildPanelClasses(config) {
+        const classes = ['bk-dialog-pane'];
+        if (config.panelClass) {
+            if (Array.isArray(config.panelClass)) {
+                classes.push(...config.panelClass);
+            }
+            else {
+                classes.push(config.panelClass);
+            }
+        }
+        return classes;
+    }
+    /**
+     * Build CDK's `GlobalPositionStrategy` from our position config.
+     * Falls back to centred (both axes) when no position is specified.
+     */
+    _buildPositionStrategy(config) {
+        const strategy = this._overlay.position().global();
+        if (config.position?.top) {
+            strategy.top(config.position.top);
+        }
+        else if (config.position?.bottom) {
+            strategy.bottom(config.position.bottom);
+        }
+        else {
+            strategy.centerVertically();
+        }
+        if (config.position?.left) {
+            strategy.left(config.position.left);
+        }
+        else if (config.position?.right) {
+            strategy.right(config.position.right);
+        }
+        else {
+            strategy.centerHorizontally();
+        }
+        return strategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Dialog Content Directives
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * These directives mirror Angular Material's dialog content directives:
+ *
+ *   MatDialogTitle    → BkDialogTitle
+ *   MatDialogContent  → BkDialogContent
+ *   MatDialogActions  → BkDialogActions
+ *   MatDialogClose    → BkDialogClose
+ *
+ * Each directive:
+ *  1. Applies the corresponding CSS host class (e.g. `bk-dialog-content`)
+ *     that is styled in `dialog-container.css` via `::ng-deep`.
+ *  2. Provides extra accessibility or behavioural features on top of the
+ *     plain CSS class.
+ *
+ * Consumers can still use the raw CSS classes directly (without importing
+ * these directives) for backward compatibility, but the directives are
+ * preferred because they add CdkScrollable, ARIA integration, and one-click
+ * close behaviour.
+ *
+ * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-content-directives.ts
+ */
+// ──── ID Generation ──────────────────────────────────────────────────────
+let nextTitleId = 0;
+// ──── Helper ─────────────────────────────────────────────────────────────
+/**
+ * Finds the closest `DialogRef` by walking up the DOM from the given
+ * element to the nearest `bk-dialog-container` host, then matching its
+ * `id` attribute against the currently open dialogs.
+ *
+ * This fallback is necessary when a directive lives inside an
+ * `<ng-template>` (TemplateRef), where the dialog's custom injector is
+ * not available.
+ *
+ * @see Material's `getClosestDialog` in `dialog-content-directives.ts`
+ */
+function getClosestDialog(element, openDialogs) {
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('bk-dialog-container')) {
+        parent = parent.parentElement;
+    }
+    return parent
+        ? openDialogs.find(ref => ref.id === parent.id) ?? null
+        : null;
+}
+// ──── Base for Title / Actions ───────────────────────────────────────────
+/**
+ * Shared abstract base that resolves the owning `DialogRef` (via DI or
+ * DOM walk) and invokes `_onAdd()` / `_onRemove()` lifecycle hooks.
+ *
+ * Same pattern as Material's internal `MatDialogLayoutSection`.
+ */
+class BkDialogLayoutSection {
+    _dialogRef = inject(DialogRef, { optional: true });
+    _elementRef = inject((ElementRef));
+    _dialogService = inject(DialogService);
+    ngOnInit() {
+        if (!this._dialogRef) {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
+        }
+        if (this._dialogRef) {
+            Promise.resolve().then(() => this._onAdd());
+        }
+    }
+    ngOnDestroy() {
+        if (this._dialogRef) {
+            Promise.resolve().then(() => this._onRemove());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogLayoutSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogLayoutSection, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogLayoutSection, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogTitle
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Marks an element as the dialog title.
+ *
+ * • Generates a unique `id` and binds it to the host element.
+ * • Registers the `id` with the CDK container's `aria-labelledby` queue
+ *   so screen readers announce the dialog title automatically.
+ *
+ * Usage:
+ * ```html
+ * <h2 bk-dialog-title>Edit User</h2>
+ * ```
+ */
+class BkDialogTitle extends BkDialogLayoutSection {
+    /** Unique element `id`. Auto-generated but can be overridden. */
+    id = `bk-dialog-title-${nextTitleId++}`;
+    _onAdd() {
+        // Register with the CdkDialogContainer's aria-labelledby queue.
+        // _containerInstance extends CdkDialogContainer which has _addAriaLabelledBy.
+        this._dialogRef?._containerInstance?._addAriaLabelledBy?.(this.id);
+    }
+    _onRemove() {
+        this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogTitle, isStandalone: true, selector: "[bk-dialog-title], [bkDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id" }, classAttribute: "bk-dialog-title" }, exportAs: ["bkDialogTitle"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-title], [bkDialogTitle]',
+                    standalone: true,
+                    exportAs: 'bkDialogTitle',
+                    host: {
+                        'class': 'bk-dialog-title',
+                        '[id]': 'id',
+                    },
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }] } });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogContent
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Scrollable content area of a dialog.
+ *
+ * • Applies the `bk-dialog-content` CSS class → `flex: 1 1 auto; overflow: auto`.
+ * • Composes CDK's `CdkScrollable` for scroll-position monitoring and
+ *   integration with CDK's scroll dispatcher.
+ *
+ * Usage (attribute):
+ * ```html
+ * <div bk-dialog-content>
+ *   <!-- body content — this area scrolls -->
+ * </div>
+ * ```
+ *
+ * Usage (element):
+ * ```html
+ * <bk-dialog-content>...</bk-dialog-content>
+ * ```
+ */
+class BkDialogContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-content], bk-dialog-content, [bkDialogContent]',
+                    standalone: true,
+                    exportAs: 'bkDialogContent',
+                    host: {
+                        'class': 'bk-dialog-content',
+                    },
+                    hostDirectives: [CdkScrollable],
+                }]
+        }] });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogActions
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Container for action buttons at the bottom of a dialog.
+ * Stays pinned when the content area scrolls.
+ *
+ * • Applies `bk-dialog-actions` class → `flex: 0 0 auto` (never shrinks).
+ * • Optional `align` input controls horizontal alignment.
+ *
+ * Usage:
+ * ```html
+ * <div bk-dialog-actions>
+ *   <button (click)="cancel()">Cancel</button>
+ *   <button (click)="save()">Save</button>
+ * </div>
+ *
+ * <!-- With alignment -->
+ * <div bk-dialog-actions align="center">...</div>
+ * ```
+ */
+class BkDialogActions extends BkDialogLayoutSection {
+    /** Horizontal alignment of action buttons. */
+    align;
+    _onAdd() {
+        // Future: notify container for action section count (like Material).
+    }
+    _onRemove() {
+        // No-op.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogActions, isStandalone: true, selector: "[bk-dialog-actions], bk-dialog-actions, [bkDialogActions]", inputs: { align: "align" }, host: { properties: { "class.bk-dialog-actions-align-start": "align === \"start\"", "class.bk-dialog-actions-align-center": "align === \"center\"", "class.bk-dialog-actions-align-end": "align === \"end\"" }, classAttribute: "bk-dialog-actions" }, exportAs: ["bkDialogActions"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-actions], bk-dialog-actions, [bkDialogActions]',
+                    standalone: true,
+                    exportAs: 'bkDialogActions',
+                    host: {
+                        'class': 'bk-dialog-actions',
+                        '[class.bk-dialog-actions-align-start]': 'align === "start"',
+                        '[class.bk-dialog-actions-align-center]': 'align === "center"',
+                        '[class.bk-dialog-actions-align-end]': 'align === "end"',
+                    },
+                }]
+        }], propDecorators: { align: [{
+                type: Input
+            }] } });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogClose
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Closes the dialog when the host element is clicked.
+ * Optionally returns a result value to the opener.
+ *
+ * • Sets `type="button"` by default to prevent accidental form submissions.
+ * • Supports an optional `aria-label` for screen readers.
+ *
+ * Usage:
+ * ```html
+ * <!-- Close with no result -->
+ * <button bk-dialog-close>Cancel</button>
+ *
+ * <!-- Close with a result value -->
+ * <button [bk-dialog-close]="'confirmed'">OK</button>
+ *
+ * <!-- Alternative camelCase binding -->
+ * <button [bkDialogClose]="myResult">Done</button>
+ * ```
+ */
+class BkDialogClose {
+    _dialogRef = inject(DialogRef, { optional: true });
+    _elementRef = inject((ElementRef));
+    _dialogService = inject(DialogService);
+    /** Screen-reader label for the button. */
+    ariaLabel;
+    /** Prevents accidental form submits. Default: `'button'`. */
+    type = 'button';
+    /** Dialog result — set via `[bk-dialog-close]="value"`. */
+    dialogResult;
+    /** Alternative camelCase binding: `[bkDialogClose]="value"`. */
+    _bkDialogClose;
+    ngOnInit() {
+        if (!this._dialogRef) {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
+        }
+    }
+    ngOnChanges(changes) {
+        const proxiedChange = changes['_bkDialogClose'] || changes['dialogResult'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    _onButtonClick(_event) {
+        this._dialogRef?.close(this.dialogResult);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogClose, isStandalone: true, selector: "[bk-dialog-close], [bkDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["bk-dialog-close", "dialogResult"], _bkDialogClose: ["bkDialogClose", "_bkDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["bkDialogClose"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-close], [bkDialogClose]',
+                    standalone: true,
+                    exportAs: 'bkDialogClose',
+                    host: {
+                        '(click)': '_onButtonClick($event)',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['bk-dialog-close']
+            }], _bkDialogClose: [{
+                type: Input,
+                args: ['bkDialogClose']
+            }] } });
+
+/**
+ * BkDialogModule
+ *
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Follows the exact same pattern as Angular Material's `MatDialogModule`
+ * and `@brickclay-org/ui`'s `CalendarModule`:
+ *
+ *  • All components/directives are **standalone**.
+ *  • This module simply imports + re-exports them for convenience.
+ *  • `DialogService` is `providedIn: 'root'`, so it does NOT need to
+ *    be listed in `providers` here — it is tree-shakeable and available
+ *    app-wide automatically.
+ *
+ * Two usage styles:
+ *
+ * ───────── Module-based (NgModule) ─────────
+ * ```ts
+ * import { BkDialogModule } from '@shared/components/dialog';
+ *
+ * @NgModule({ imports: [BkDialogModule] })
+ * export class FuelCostModule {}
+ * ```
+ *
+ * ───────── Standalone ──────────────────────
+ * ```ts
+ * @Component({
+ *   standalone: true,
+ *   imports: [BkDialogContent, BkDialogActions, BkDialogClose],
+ * })
+ * export class MyDialog {}
+ * ```
+ *
+ * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-module.ts
+ */
+class BkDialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule,
+            // ── Our standalone pieces ───────────────────────────────────────
+            DialogContainerComponent,
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose], exports: [
+            // ── Public API for template usage ───────────────────────────────
+            // Consumers import BkDialogModule and get these directives in
+            // their templates automatically — just like MatDialogModule.
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // ── CDK foundations ──────────────────────────────────────────────
+                        DialogModule,
+                        OverlayModule,
+                        PortalModule,
+                        // ── Our standalone pieces ───────────────────────────────────────
+                        DialogContainerComponent,
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                    exports: [
+                        // ── Public API for template usage ───────────────────────────────
+                        // Consumers import BkDialogModule and get these directives in
+                        // their templates automatically — just like MatDialogModule.
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -4031,5 +5267,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogTitle, BkGrid, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_GLOBAL_CONFIG, DialogRef, DialogService, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map