@brickclay-org/ui 0.1.79 → 0.1.81

package/index.d.ts

@@ -748,7 +748,7 @@ declare class BkPill {
 }
 
 type BadgeVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
-type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
+type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Orange' | 'Success' | 'Purple' | 'Cyan';
 type BadgeSize = 'xsm' | 'sm' | 'md' | 'lg';
 declare class BkBadge {
     label: string;
@@ -758,11 +758,17 @@ declare class BkBadge {
     dot: 'left' | 'right' | 'none';
     removable: boolean;
     customClass: string;
+    /** Overrides `color`/`variant` with exact CSS colors — any valid CSS color value. */
+    customBg?: string;
+    customBorder?: string;
+    customText?: string;
     clicked: EventEmitter<string>;
+    get hasCustomColor(): boolean;
     get containerClasses(): string;
+    get customStyle(): Record<string, string>;
     onRemove(e: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkBadge, "bk-badge", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkBadge, "bk-badge", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "customBg": { "alias": "customBg"; "required": false; }; "customBorder": { "alias": "customBorder"; "required": false; }; "customText": { "alias": "customText"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 type SpinnerSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
@@ -1022,6 +1028,22 @@ declare function parseColor(input: string | null | undefined): Rgb | null;
  */
 declare function deriveAppearance(color: string | null | undefined, fill?: ColorFill): ColorAppearance;
 
+interface BkSelectGridColumn {
+    /** Property read from each item. Dot-separated paths are supported. */
+    key: string;
+    /** Column heading. */
+    label: string;
+    /** CSS width/min-width values, e.g. `120px` or `25%`. */
+    width?: string;
+    minWidth?: string;
+    align?: 'left' | 'center' | 'right';
+    type?: 'text' | 'badge';
+    /** Optional display transform; the original item is supplied as well. */
+    formatter?: (value: any, item: any) => string;
+    /** Badge colour by cell value, e.g. `{ Active: '#16a34a' }`. */
+    badgeColors?: Record<string, BadgeColor>;
+    badgeVariant?: BadgeVariant;
+}
 declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy {
     items: _angular_core.InputSignal<any[]>;
     bindLabel: _angular_core.InputSignal<string>;
@@ -1034,6 +1056,15 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     clearAllText: _angular_core.InputSignal<string>;
     groupBy: _angular_core.InputSignal<string>;
     colorKey: _angular_core.InputSignal<string>;
+    /** Opt-in table-like dropdown. The existing list is the unchanged default. */
+    dropdownView: _angular_core.InputSignal<"list" | "grid">;
+    gridColumns: _angular_core.InputSignal<BkSelectGridColumn[]>;
+    /** Stage multi-grid changes until Apply is clicked. */
+    gridSelectionActions: _angular_core.InputSignal<boolean>;
+    gridMinWidth: _angular_core.InputSignal<string>;
+    gridMaxHeight: _angular_core.InputSignal<string>;
+    gridApplyText: _angular_core.InputSignal<string>;
+    gridClearText: _angular_core.InputSignal<string>;
     /**
      * Show an accent dot beside each option, driven by `colorKey`.
      *
@@ -1101,6 +1132,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     private static activeInstance;
     isOpen: _angular_core.WritableSignal<boolean>;
     selectedOptions: _angular_core.WritableSignal<any[]>;
+    private gridDraftOptions;
     searchTerm: _angular_core.WritableSignal<string>;
     markedIndex: _angular_core.WritableSignal<number>;
     placement: _angular_core.WritableSignal<"top" | "bottom">;
@@ -1154,6 +1186,12 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     private recomputeVisibleChips;
     resolveLabel(item: any): string;
     resolveValue(item: any): any;
+    resolveGridCell(item: any, column: BkSelectGridColumn): string;
+    gridColumnStyle(column: BkSelectGridColumn): Record<string, string>;
+    gridBadgeColor(item: any, column: BkSelectGridColumn): BadgeColor;
+    isGridItemSelected(item: any): boolean;
+    gridSelectedCount(): number;
+    private usesGridDraft;
     isItemSelected(item: any): boolean;
     isItemDisabled(item: any): boolean;
     compareWith: _angular_core.InputSignal<(a: any, b: any) => boolean>;
@@ -1171,6 +1209,9 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     applyPlacement(): void;
     toggleSelectAll(event: Event): void;
     handleSelection(item: any, event?: Event): void;
+    handleGridSelection(item: any, event?: Event): void;
+    clearGridDraft(): void;
+    applyGridDraft(): void;
     removeOption(item: any, event: Event): void;
     handleClear(event: Event): void;
     private updateModel;
@@ -1235,7 +1276,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     getTooltipIfEllipsed(el: HTMLElement, text: string): string;
     onOptionHover(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindIcon": { "alias": "bindIcon"; "required": false; "isSignal": true; }; "isResponsive": { "alias": "isResponsive"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "avatarKey": { "alias": "avatarKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindIcon": { "alias": "bindIcon"; "required": false; "isSignal": true; }; "isResponsive": { "alias": "isResponsive"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "dropdownView": { "alias": "dropdownView"; "required": false; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "gridSelectionActions": { "alias": "gridSelectionActions"; "required": false; "isSignal": true; }; "gridMinWidth": { "alias": "gridMinWidth"; "required": false; "isSignal": true; }; "gridMaxHeight": { "alias": "gridMaxHeight"; "required": false; "isSignal": true; }; "gridApplyText": { "alias": "gridApplyText"; "required": false; "isSignal": true; }; "gridClearText": { "alias": "gridClearText"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "avatarKey": { "alias": "avatarKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
 }
 
 type BkInputType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
@@ -1277,6 +1318,9 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
     iconAlt: string;
     showIcon: boolean;
     phone: boolean;
+    currency: boolean;
+    currencyDecimals: number;
+    allowNegative: boolean;
     countryCode: string;
     countryOptions: CountryOption[];
     selectedCountry: CountryOption;
@@ -1306,9 +1350,14 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
     get placeHolderText(): string;
     get maskValue(): string;
     get maskPrefixValue(): string;
+    private readonly defaultDecimalMarker;
+    get maskThousandSeparator(): string;
+    get maskDecimalMarker(): '.' | ',' | ['.', ','];
+    get maskAllowNegativeNumbers(): boolean;
     private onChange;
     private onTouched;
     private applyDropSpecialCharacters;
+    private parseCurrencyValue;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -1332,7 +1381,7 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
     get currentInputType(): string;
     private writeMaskedViewValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "dropSpecialCharacters": { "alias": "dropSpecialCharacters"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "showErrorIcon": { "alias": "showErrorIcon"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "countryCode": { "alias": "countryCode"; "required": false; }; "countryOptions": { "alias": "countryOptions"; "required": false; }; "iconOrientation": { "alias": "iconOrientation"; "required": false; }; "password": { "alias": "password"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; }, { "input": "input"; "change": "change"; "focus": "focus"; "blur": "blur"; "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "dropSpecialCharacters": { "alias": "dropSpecialCharacters"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "showErrorIcon": { "alias": "showErrorIcon"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "currencyDecimals": { "alias": "currencyDecimals"; "required": false; }; "allowNegative": { "alias": "allowNegative"; "required": false; }; "countryCode": { "alias": "countryCode"; "required": false; }; "countryOptions": { "alias": "countryOptions"; "required": false; }; "iconOrientation": { "alias": "iconOrientation"; "required": false; }; "password": { "alias": "password"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; }, { "input": "input"; "change": "change"; "focus": "focus"; "blur": "blur"; "clicked": "clicked"; }, never, never, true, never>;
 }
 
 declare class BkInputChips implements ControlValueAccessor, AfterViewInit {
@@ -2323,6 +2372,8 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     /** Runs after the panel has rendered: relocate (append mode) + position + focus. */
     private afterOpenInit;
     isOpen: _angular_core.WritableSignal<boolean>;
+    /** Hidden until its real height has been measured and final placement applied. */
+    panelReady: _angular_core.WritableSignal<boolean>;
     dropdownStyle: _angular_core.WritableSignal<{
         top?: string;
         bottom?: string;
@@ -4158,4 +4209,4 @@ declare class BkTreeDrag<T = any> extends BkTableDrag implements OnDestroy {
 declare const BK_TABLE: readonly [typeof BkTable, typeof BkTableTitle, typeof BkTableFooter, typeof BkVirtualScroll, typeof BkTh, typeof BkTd, typeof BkTrExpand, typeof BkTableSummary, typeof BkTableDrag, typeof BkDragHandle, typeof BkTreeDrag];
 
 export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
-export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkCellAlign, BkColumnRef, BkColumnSelectPosition, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkFilterFn, BkFilterOption, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputSize, BkInputType, BkLoaderVariant, BkPageSize, BkPageSizeVisibility, BkSortDirection, BkSortFn, BkSortOrder, BkTableNoResult, BkTableQueryParams, BkTableScroll, BkTableSelection, BkTableSize, BkTableSizeToken, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, BkTreeDragScope, BkTreeDropEvent, BkTreeDropPosition, BkTreeRow, BreadcrumbItem, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuPopupSide, MenuSize, MenuSubmenuMode, MenuTrigger, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TableRows, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkCellAlign, BkColumnRef, BkColumnSelectPosition, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkFilterFn, BkFilterOption, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputSize, BkInputType, BkLoaderVariant, BkPageSize, BkPageSizeVisibility, BkSelectGridColumn, BkSortDirection, BkSortFn, BkSortOrder, BkTableNoResult, BkTableQueryParams, BkTableScroll, BkTableSelection, BkTableSize, BkTableSizeToken, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, BkTreeDragScope, BkTreeDropEvent, BkTreeDropPosition, BkTreeRow, BreadcrumbItem, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuPopupSide, MenuSize, MenuSubmenuMode, MenuTrigger, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TableRows, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/assets/icons/dollar-icon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39762 14.6024 1.66666 10 1.66666Z" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 5.83334V14.1667" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 7.91666C12.5 6.85609 11.3807 5.99999 10 5.99999C8.61931 5.99999 7.5 6.85609 7.5 7.91666C7.5 8.97723 8.61931 9.83332 10 9.83332C11.3807 9.83332 12.5 10.6894 12.5 11.75C12.5 12.8106 11.3807 13.6667 10 13.6667C8.61931 13.6667 7.5 12.8106 7.5 11.75" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/badge/badge.css

@@ -36,7 +36,8 @@
 .Gray-Solid    { @apply bg-[#6B7080] border-[#6B7080] text-white; }
 .Primary-Solid { @apply bg-[#294FFF] border-[#294FFF] text-white; }
 .Error-Solid   { @apply bg-[#FA727A] border-[#FA727A] text-[#4C0513]; }
-.Warning-Solid { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
+.Orange-Solid  { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
+.Warning-Solid { @apply bg-[#FACC15] border-[#FACC15] text-[#713F12]; }
 /* Fixed Custom Dot color for Success Solid if you want it darker than text, otherwise remove next line */
 .Success-Solid { @apply bg-[#57D175] border-[#57D175] text-[#461C04]; }
 .Success-Solid .dot { @apply bg-[#082B13]; } /* Override bg-current only here */
@@ -49,7 +50,8 @@
 .Gray-Light    { @apply bg-[#F4F4F6] border-transparent text-[#363C51]; }
 .Primary-Light { @apply bg-[#E5F3FF] border-transparent text-[#1434CB]; }
 .Error-Light   { @apply bg-[#FFF1F1] border-transparent text-[#CB1432]; }
-.Warning-Light { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
+.Orange-Light  { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
+.Warning-Light { @apply bg-[#FEFCE8] border-transparent text-[#A16207]; }
 .Success-Light { @apply bg-[#F1FCF3] border-transparent text-[#1E7735]; }
 .Purple-Light  { @apply bg-[#F6EAFD] border-transparent text-[#9130C0]; }
 .Cyan-Light    { @apply bg-[#F1FAFE] border-transparent text-[#096E9B]; }
@@ -59,7 +61,8 @@
 .Gray-Outline    { @apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51]; }
 .Primary-Outline { @apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB]; }
 .Error-Outline   { @apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432]; }
-.Warning-Outline { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
+.Orange-Outline  { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
+.Warning-Outline { @apply bg-[#FEFCE8] border-[#FACC15] text-[#A16207]; }
 .Success-Outline { @apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735]; }
 .Purple-Outline  { @apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0]; }
 .Cyan-Outline    { @apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B]; }
@@ -69,7 +72,8 @@
 .Gray-Transparent    { @apply bg-transparent border-[#BBBDC5] text-[#363C51]; }
 .Primary-Transparent { @apply bg-transparent border-[#3F71FF] text-[#1434CB]; }
 .Error-Transparent   { @apply bg-transparent border-[#FA727A] text-[#CB1432]; }
-.Warning-Transparent { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
+.Orange-Transparent  { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
+.Warning-Transparent { @apply bg-transparent border-[#FACC15] text-[#A16207]; }
 .Success-Transparent { @apply bg-transparent border-[#57D175] text-[#1E7735]; }
 .Purple-Transparent  { @apply bg-transparent border-[#CE8EF2] text-[#9130C0]; }
 .Cyan-Transparent    { @apply bg-transparent border-[#3FC2F1] text-[#096E9B]; }

package/src/lib/input/input.css

@@ -66,6 +66,11 @@
   @apply pl-[72px];
 }
 
+/* Currency Input Field - Add padding-left for the dollar icon box */
+.input-field--currency {
+  @apply pl-[3.5rem];
+}
+
 /* Icon Left - Add padding-left for icon space */
 .input-field--icon-left {
   @apply pl-[48px];
@@ -224,6 +229,38 @@
   @apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];
 }
 
+/* Currency Icon - Bordered box like the URL prefix, holds the dollar icon */
+.input-currency-icon {
+  @apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.input-currency-icon img {
+  @apply w-5 h-5;
+}
+
+/* Currency Icon - State Specific Border Colors (matches input border) */
+.input-currency-icon--default {
+  @apply border-[#E3E3E7];
+}
+
+.input-currency-icon--focused {
+  @apply border-[#6B7080];
+}
+
+.input-currency-icon--filled {
+  @apply border-[#E3E3E7];
+}
+
+.input-currency-icon--error {
+  @apply border-[#E7000B];
+}
+
+.input-currency-icon--disabled {
+  @apply bg-[#F4F4F6] border-[#E3E3E7];
+}
+
 /* Hint text */
 .input-hint {
   @apply text-xs text-[#868997] font-normal;
@@ -295,6 +332,18 @@
   @apply pl-16;
 }
 
+.input-container--sm .input-field--currency {
+  @apply pl-9;
+}
+
+.input-container--sm .input-currency-icon {
+  @apply w-8;
+}
+
+.input-container--sm .input-currency-icon img {
+  @apply w-4 h-4;
+}
+
 .input-container--sm .input-field--icon.input-field--url {
   @apply pl-24;
 }

package/src/lib/select/select.css

@@ -164,6 +164,69 @@
   @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;
 }
 
+/* Opt-in grid dropdown. List-mode selectors above and below remain unchanged. */
+.bk-grid-scroll {
+  @apply overflow-auto -mx-2.5;
+}
+
+.bk-select-grid {
+  @apply w-full border-collapse text-sm text-[#141414];
+  table-layout: fixed;
+}
+
+.bk-select-grid th {
+  @apply sticky top-0 z-10 bg-[#F8F8F8] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];
+}
+
+.bk-select-grid td {
+  @apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;
+}
+
+.bk-select-grid tbody tr {
+  @apply cursor-pointer transition-colors;
+}
+
+.bk-select-grid tbody tr:hover,
+.bk-select-grid tbody tr.bk-marked {
+  @apply bg-[#F8F8F8];
+}
+
+.bk-select-grid tbody tr.bk-selected {
+  background-color: #F8F8F8;
+}
+
+.bk-select-grid tbody tr.bk-option-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.bk-grid-checkbox-column {
+  width: 48px;
+  min-width: 48px;
+  @apply !px-4;
+}
+
+.bk-grid-cell-text {
+  @apply block truncate;
+}
+
+.bk-grid-message {
+  @apply !px-4 !py-4 text-center text-gray-400;
+}
+
+.bk-grid-footer {
+  @apply flex items-center justify-between gap-4 px-1 pt-2.5 text-xs text-[#6B7080];
+}
+
+.bk-grid-footer-actions {
+  @apply flex items-center gap-2;
+}
+
+@media (max-width: 640px) {
+  .bk-grid-scroll {
+    max-width: calc(100vw - 32px);
+  }
+}
+
 .bk-dropdown-search {
   @apply px-2 pt-2;
 }