@brickclay-org/ui 0.0.54 → 0.0.56

package/fesm2022/brickclay-org-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -3658,7 +3658,7 @@ class BkSelect {
                 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  @if(label){\r\n  <label\r\n    class=\"select-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <span class=\"select-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    [ngClass]=\"{ 'has-error': hasError }\"\r\n\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  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n\r\n\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.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-select-control.has-error{@apply border-[#d11e14];}.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}.select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.select-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;}.select-hint{@apply text-xs text-[#868997] font-normal;}.select-error{@apply text-xs text-[#E7000B] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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=\"bk-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <span class=\"bk-select-label-required\">*</span>\r\n    }\r\n  </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-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=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-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=\"bk-multi-badge-item\"><span\r\n              class=\"bk-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=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-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=\"bk-arrow-wrapper\" [class.bk-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=\"bk-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.bk-grouped]=\"groupBy()\"\r\n    >\r\n\r\n\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search\">\r\n          <div class=\"bk-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=\"bk-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=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-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=\"bk-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=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-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=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n\r\n\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-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;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-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;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.bk-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];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] 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: BkSelect, decorators: [{
             type: Component,
@@ -3668,7 +3668,7 @@ 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  @if(label){\r\n  <label\r\n    class=\"select-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <span class=\"select-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    [ngClass]=\"{ 'has-error': hasError }\"\r\n\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  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n\r\n\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.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-select-control.has-error{@apply border-[#d11e14];}.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}.select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.select-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;}.select-hint{@apply text-xs text-[#868997] font-normal;}.select-error{@apply text-xs text-[#E7000B] font-normal;}\n"] }]
+                    ], template: "<div class=\"bk-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <span class=\"bk-select-label-required\">*</span>\r\n    }\r\n  </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-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=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-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=\"bk-multi-badge-item\"><span\r\n              class=\"bk-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=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-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=\"bk-arrow-wrapper\" [class.bk-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=\"bk-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.bk-grouped]=\"groupBy()\"\r\n    >\r\n\r\n\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search\">\r\n          <div class=\"bk-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=\"bk-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=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-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=\"bk-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=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-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=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n\r\n\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-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;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-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;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.bk-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];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}\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: [{
@@ -6084,10 +6084,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 // ─── Service ─────────────────────────────────────────────────────────────────
 let _toastId = 0;
 class BkToastrService {
+    appRef;
+    injector;
     _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
     toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    _position = signal('top-right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    position = computed(() => this._position(), ...(ngDevMode ? [{ debugName: "position" }] : []));
+    componentRef = null;
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    initializeContainer() {
+        if (this.componentRef)
+            return;
+        // Check if we're in browser environment
+        if (typeof document === 'undefined' || !document.body) {
+            // If document.body doesn't exist yet, wait for it
+            setTimeout(() => this.initializeContainer(), 0);
+            return;
+        }
+        // Create component dynamically
+        this.componentRef = createComponent(BkToastr, {
+            environmentInjector: this.injector,
+        });
+        // Attach to DOM
+        document.body.appendChild(this.componentRef.location.nativeElement);
+        // Register for change detection
+        // Note: We don't call appRef.tick() here to avoid recursive tick calls
+        // Angular will automatically detect changes for the attached view
+        this.appRef.attachView(this.componentRef.hostView);
+    }
     /** Show a toast with full config */
     show(config) {
+        // Initialize container on first toast
+        this.initializeContainer();
         const id = `toast-${++_toastId}`;
         const toast = {
             ...config,
@@ -6146,19 +6177,25 @@ class BkToastrService {
         this._toasts.update(list => list.map(t => ({ ...t, leaving: true })));
         setTimeout(() => this._toasts.set([]), 300);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** Set the position for toast notifications */
+    setPosition(position) {
+        // Initialize container if not already created
+        this.initializeContainer();
+        this._position.set(position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
 class BkToastr {
-    position = 'top-right';
     svc = inject(BkToastrService);
     /** Convert signal → Observable so AsyncPipe triggers change detection reliably */
     toasts$ = toObservable(this.svc.toasts);
+    position$ = toObservable(this.svc.position);
     onClose(event, id) {
         event.stopPropagation();
         this.svc.close(id);
@@ -6168,14 +6205,12 @@ class BkToastr {
         t.actionCallback?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", inputs: { position: "position" }, ngImport: i0, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
-        }], propDecorators: { position: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
+        }] });
 
 /*
  * Public API Surface of brickclay-lib