@brickclay-org/ui 0.0.23 → 0.0.24

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, ViewChild } 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 * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -3025,6 +3025,387 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['tableScrollContainer', { static: false }]
             }] } });
 
+class BkSelect {
+    // --- Inputs ---
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    bindLabel = input('label', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    notFoundText = input('No items found', ...(ngDevMode ? [{ debugName: "notFoundText" }] : []));
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    clearAllText = input('Clear all', ...(ngDevMode ? [{ debugName: "clearAllText" }] : []));
+    // iconSrc = input<string>('Clear all');
+    iconAlt = 'icon';
+    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" }] : []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
+    dropdownPosition = input('bottom', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
+    // 1. NEW INPUT: Toggle append-to-body behavior
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    // --- Outputs ---
+    open = output();
+    close = output();
+    focus = output();
+    blur = output();
+    search = output();
+    clear = output();
+    change = output();
+    scrollToEnd = output();
+    // --- Refs ---
+    searchInput;
+    optionsListContainer;
+    optionsRef;
+    controlWrapper;
+    // --- State ---
+    _value = null;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    markedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "markedIndex" }] : []));
+    dropdownStyle = signal({
+        left: '0px',
+        width: 'auto'
+    }, ...(ngDevMode ? [{ debugName: "dropdownStyle" }] : []));
+    filteredItems = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        const list = this.items();
+        if (!term || !this.searchable())
+            return list;
+        return list.filter(item => {
+            const label = this.resolveLabel(item).toLowerCase();
+            return label.includes(term);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    isAllSelected = computed(() => {
+        const filtered = this.filteredItems();
+        const current = this.selectedOptions();
+        if (!filtered.length)
+            return false;
+        return filtered.every(item => this.isItemSelected(item));
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    constructor() {
+        effect(() => {
+            const currentItems = this.items();
+            if (currentItems.length > 0 && this._value !== null) {
+                this.resolveSelectedOptions(this._value);
+            }
+        });
+    }
+    // --- Helpers ---
+    resolveLabel(item) {
+        if (!item)
+            return '';
+        const labelProp = this.bindLabel();
+        return labelProp && typeof item === 'object' ? item[labelProp] : String(item);
+    }
+    resolveValue(item) {
+        const valueProp = this.bindValue();
+        return valueProp && typeof item === 'object' ? item[valueProp] : item;
+    }
+    isItemSelected(item) {
+        const current = this.selectedOptions();
+        const compareFn = this.compareWith();
+        const itemVal = this.resolveValue(item);
+        return current.some(selected => compareFn(itemVal, this.resolveValue(selected)));
+    }
+    compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    // --- Actions ---
+    toggleDropdown(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.disabled() || this.readonly())
+            return;
+        this.isOpen() ? this.closeDropdown() : this.openDropdown();
+    }
+    openDropdown() {
+        if (this.isOpen())
+            return;
+        // Only calculate position if we are appending to body
+        if (this.appendToBody()) {
+            this.updatePosition();
+        }
+        this.isOpen.set(true);
+        this.markedIndex.set(0);
+        this.open.emit();
+        this.focus.emit();
+        setTimeout(() => this.searchInput?.nativeElement.focus());
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.onTouched();
+        this.close.emit();
+        this.blur.emit();
+    }
+    getTop() {
+        if (this.appendToBody()) {
+            return this.dropdownStyle().top ?? null;
+        }
+        // NOT appendToBody
+        return this.dropdownPosition() === 'bottom' ? '100%' : null;
+    }
+    getBottom() {
+        if (this.appendToBody()) {
+            return this.dropdownStyle().bottom ?? null;
+        }
+        // NOT appendToBody
+        return this.dropdownPosition() === 'top' ? '100%' : null;
+    }
+    updatePosition() {
+        const rect = this.controlWrapper.nativeElement.getBoundingClientRect();
+        if (this.dropdownPosition() === 'bottom') {
+            this.dropdownStyle.set({
+                top: `${rect.bottom + 4}px`,
+                bottom: undefined,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`
+            });
+        }
+        else {
+            this.dropdownStyle.set({
+                top: undefined,
+                bottom: `${window.innerHeight - rect.top + 4}px`,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`
+            });
+        }
+    }
+    // 2. FIXED: Removed ['$event'] argument
+    onWindowEvents() {
+        // Only close on scroll if we are in "fixed" mode (append to body)
+        if (this.isOpen() && this.appendToBody()) {
+            this.closeDropdown();
+        }
+    }
+    // ... (toggleSelectAll, handleSelection, removeOption, handleClear logic same as before) ...
+    toggleSelectAll(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const allSelected = this.isAllSelected();
+        const filtered = this.filteredItems();
+        let newSelection = [...this.selectedOptions()];
+        const compareFn = this.compareWith();
+        if (allSelected) {
+            newSelection = newSelection.filter(sel => {
+                const selVal = this.resolveValue(sel);
+                return !filtered.some(fItem => compareFn(this.resolveValue(fItem), selVal));
+            });
+        }
+        else {
+            filtered.forEach(item => {
+                if (!this.isItemSelected(item))
+                    newSelection.push(item);
+            });
+        }
+        this.updateModel(newSelection);
+    }
+    handleSelection(item, event) {
+        if (event)
+            event.stopPropagation();
+        if (this.multiple()) {
+            const isSelected = this.isItemSelected(item);
+            let newSelection = [...this.selectedOptions()];
+            const compareFn = this.compareWith();
+            if (isSelected) {
+                const itemVal = this.resolveValue(item);
+                newSelection = newSelection.filter(sel => !compareFn(this.resolveValue(sel), itemVal));
+            }
+            else {
+                newSelection.push(item);
+            }
+            this.updateModel(newSelection);
+            if (this.closeOnSelect())
+                this.closeDropdown();
+        }
+        else {
+            this.updateModel([item]);
+            if (this.closeOnSelect())
+                this.closeDropdown();
+        }
+    }
+    removeOption(item, event) {
+        event.stopPropagation();
+        const newSelection = this.selectedOptions().filter(i => i !== item);
+        this.updateModel(newSelection);
+    }
+    handleClear(event) {
+        event.stopPropagation();
+        this.updateModel([]);
+        this.clear.emit();
+    }
+    updateModel(items) {
+        this.selectedOptions.set(items);
+        if (this.multiple()) {
+            const values = items.map(i => this.resolveValue(i));
+            this._value = values;
+            this.onChange(values);
+            this.change.emit(values);
+        }
+        else {
+            const item = items[0] || null;
+            const value = item ? this.resolveValue(item) : null;
+            this._value = value;
+            this.onChange(value);
+            this.change.emit(value);
+        }
+    }
+    onSearchInput(event) {
+        const val = event.target.value;
+        this.searchTerm.set(val);
+        this.markedIndex.set(0);
+        this.search.emit({ term: val, items: this.filteredItems() });
+    }
+    onKeyDown(event) {
+        if (!this.isOpen())
+            return;
+        const list = this.filteredItems();
+        const current = this.markedIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (current < list.length - 1) {
+                    this.markedIndex.set(current + 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (current > 0) {
+                    this.markedIndex.set(current - 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (current >= 0 && list[current])
+                    this.handleSelection(list[current]);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeDropdown();
+                break;
+        }
+    }
+    onScroll(event) {
+        const target = event.target;
+        if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
+            this.scrollToEnd.emit();
+        }
+    }
+    scrollToMarked() {
+        setTimeout(() => {
+            const container = this.optionsListContainer?.nativeElement;
+            const options = this.optionsRef?.toArray();
+            const index = this.markedIndex();
+            if (container && options && options[index]) {
+                const el = options[index].nativeElement;
+                if (el.offsetTop < container.scrollTop) {
+                    container.scrollTop = el.offsetTop;
+                }
+                else if ((el.offsetTop + el.clientHeight) > (container.scrollTop + container.clientHeight)) {
+                    container.scrollTop = (el.offsetTop + el.clientHeight) - container.clientHeight;
+                }
+            }
+        });
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) { this._value = value; this.resolveSelectedOptions(value); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(d) { this.disabled.set(d); }
+    resolveSelectedOptions(val) {
+        const list = this.items();
+        if (!list.length)
+            return;
+        if (val === null || val === undefined) {
+            this.selectedOptions.set([]);
+            return;
+        }
+        const valArray = Array.isArray(val) ? val : [val];
+        const bindVal = this.bindValue();
+        const compare = this.compareWith();
+        const matchedItems = list.filter(item => {
+            const itemVal = bindVal ? item[bindVal] : item;
+            return valArray.some(v => compare(v, itemVal));
+        });
+        this.selectedOptions.set(matchedItems);
+    }
+    el = inject(ElementRef);
+    onClickOutside(e) {
+        if (!this.el.nativeElement.contains(e.target))
+            this.closeDropdown();
+    }
+    openFromLabel(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled() || this.readonly())
+            return;
+        this.controlWrapper.nativeElement.focus();
+        this.openDropdown();
+    }
+    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: [
+            {
+                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()\" (mousedown)=\"handleSelection(item, $event)\" (mouseenter)=\"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;}.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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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()\" (mousedown)=\"handleSelection(item, $event)\" (mouseenter)=\"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;}.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: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                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: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], optionsListContainer: [{
+                type: ViewChild,
+                args: ['optionsListContainer']
+            }], optionsRef: [{
+                type: ViewChildren,
+                args: ['optionsRef']
+            }], controlWrapper: [{
+                type: ViewChild,
+                args: ['controlWrapper']
+            }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onWindowEvents: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -3034,5 +3415,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, GridComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
+export { BadgeComponent, BkSelect, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, GridComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
 //# sourceMappingURL=brickclay-org-ui.mjs.map