@brickclay-org/ui 0.0.39 → 0.0.40

package/src/lib/select/select.html

@@ -0,0 +1,111 @@
+<div class="ng-select-container">
+
+  <label
+    class="input-label"
+    (click)="openFromLabel($event)">
+    {{ label }}
+    @if(required){
+      <span class="input-label-required">*</span>
+    }
+  </label>
+
+  <div
+    #controlWrapper
+    class="ng-select-control"
+    [class.focused]="isOpen()"
+    [class.disabled]="disabled()"
+    (mousedown)="toggleDropdown($event)"
+  >
+    <!-- Icon (Always visible if set) -->
+    @if(iconSrc){
+      <img [src]="iconSrc" [alt]="iconAlt" class="shrink-0" />
+    }
+    <div class="ng-value-container">
+      @if (selectedOptions().length === 0)
+      {
+         <div class="ng-placeholder">{{ placeholder() }}</div>
+        }
+      @if
+      (multiple() && selectedOptions().length > 0) {
+        <div class="ng-value-chips">
+          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {
+            <div class="ng-value-chip">
+              <span class="ng-value-label">{{ resolveLabel(opt) }}</span>
+              <span class="ng-value-icon" (mousedown)="removeOption(opt, $event)">×</span>
+            </div>
+          }
+          @if (selectedOptions().length > maxLabels()) {
+            <div class="ng-value-chip remaining-count"><span class="ng-value-label">+{{ selectedOptions().length - maxLabels() }} more</span></div>
+          }
+        </div>
+      }
+      @if (!multiple() && selectedOptions().length > 0) {
+        <div class="ng-value-label-single">{{ resolveLabel(selectedOptions()[0]) }}</div>
+      }
+    </div>
+    <div class="ng-actions">
+      @if (clearable() && selectedOptions().length > 0 && !disabled()) {
+        <span class="ng-clear-wrapper" (mousedown)="handleClear($event)" title="Clear">
+          <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>
+        </span>
+      }
+      <span class="ng-arrow-wrapper" [class.open]="isOpen()">
+        <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>
+      </span>
+    </div>
+  </div>
+
+  @if (isOpen()) {
+    <div
+      #dropdownPanel
+      class="custom-ng-dropdown-panel"
+      [attr.data-position]="dropdownPosition()"
+      (scroll)="onScroll($event)"
+
+      [style.position]="appendToBody() ? 'fixed' : 'absolute'"
+      [style.top]="getTop()"
+      [style.bottom]="getBottom()"
+      [style.left]="appendToBody() ? dropdownStyle().left : null"
+      [style.width]="appendToBody() ? dropdownStyle().width : '100%'"
+    >
+
+
+    @if (searchable()) {
+        <div class="ng-dropdown-search">
+          <div class="ng-search-wrapper">
+            <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>
+            <input #searchInput type="text" class="ng-search-input" [value]="searchTerm()" [placeholder]="'Search...'" (input)="onSearchInput($event)" (keydown)="onKeyDown($event)" (click)="$event.stopPropagation()">
+          </div>
+        </div>
+      }
+      @if (multiple() && filteredItems().length > 0) {
+        <div class="ng-option select-all-option" (mousedown)="toggleSelectAll($event)">
+          <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()">
+            @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> }
+          </div>
+          <span class="font-semibold">Select All</span>
+        </div>
+      }
+      <div #optionsListContainer class="ng-options-list">
+        @if (loading()) { <div class="ng-option-disabled">{{ loadingText() }}</div> }
+        @else {
+          @for (item of filteredItems(); track $index) {
+            <div #optionsRef class="ng-option" [class.selected]="isItemSelected(item)" [class.marked]="$index === markedIndex()" (click)="handleSelection(item, $event)" (click)="markedIndex.set($index)">
+              @if (multiple()) {
+                <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)">
+                  @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> }
+                </div>
+              }
+              <span class="flex-1">{{ resolveLabel(item) }}</span>
+              @if (!multiple() && isItemSelected(item)) {
+                <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>
+              }
+            </div>
+          }
+          @if (filteredItems().length === 0) { <div class="ng-option-disabled">{{ notFoundText() }}</div> }
+        }
+      </div>
+
+    </div>
+  }
+</div>

package/src/lib/select/select.ts

@@ -0,0 +1,401 @@
+import {
+  Component,
+  input,
+  output,
+  signal,
+  model,
+  forwardRef,
+  ElementRef,
+  HostListener,
+  inject,
+  computed,
+  effect,
+  ViewChild,
+  ViewChildren,
+  QueryList, Input
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'bk-select',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './select.html',
+  styleUrls: ['./select.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkSelect),
+      multi: true
+    }
+  ]
+})
+export class BkSelect implements ControlValueAccessor {
+  // --- Inputs ---
+  items = input<any[]>([]);
+  bindLabel = input<string>('label');
+  bindValue = input<string>('');
+  placeholder = input<string>('');
+  notFoundText = input<string>('No items found');
+  loadingText = input<string>('Loading...');
+  clearAllText = input<string>('Clear all');
+  // iconSrc = input<string>('Clear all');
+  @Input() iconAlt: string = 'icon';
+  @Input() label: string = 'Label';
+  @Input() required: Boolean = false;
+
+
+  @Input() iconSrc?: string; // optional icon
+
+  // Config
+  multiple = input<boolean>(false);
+  maxLabels = input<number>(2);
+  searchable = input<boolean>(true);
+  clearable = input<boolean>(true);
+  readonly = input<boolean>(false);
+  disabled = model<boolean>(false);
+  loading = input<boolean>(false);
+  closeOnSelect = input<boolean>(true);
+  dropdownPosition = input<'bottom' | 'top'>('bottom');
+
+
+  // 1. NEW INPUT: Toggle append-to-body behavior
+  appendToBody = input<boolean>(false);
+
+  // --- Outputs ---
+  open = output<void>();
+  close = output<void>();
+  focus = output<void>();
+  blur = output<void>();
+  search = output<{ term: string, items: any[] }>();
+  clear = output<void>();
+  change = output<any>();
+  scrollToEnd = output<void>();
+
+  // --- Refs ---
+  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
+  @ViewChild('optionsListContainer') optionsListContainer!: ElementRef<HTMLDivElement>;
+  @ViewChildren('optionsRef') optionsRef!: QueryList<ElementRef>;
+  @ViewChild('controlWrapper') controlWrapper!: ElementRef<HTMLDivElement>;
+
+  // --- State ---
+  private _value: any = null;
+
+  isOpen = signal(false);
+  selectedOptions = signal<any[]>([]);
+  searchTerm = signal<string>('');
+  markedIndex = signal(-1);
+
+  dropdownStyle = signal<{
+    top?: string;
+    bottom?: string;
+    left: string;
+    width: string;
+  }>({
+    left: '0px',
+    width: 'auto'
+  });
+
+
+  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);
+    });
+  });
+
+  isAllSelected = computed(() => {
+    const filtered = this.filteredItems();
+    const current = this.selectedOptions();
+    if (!filtered.length) return false;
+    return filtered.every(item => this.isItemSelected(item));
+  });
+
+  constructor() {
+    effect(() => {
+      const currentItems = this.items();
+      if (currentItems.length > 0 && this._value !== null) {
+        this.resolveSelectedOptions(this._value);
+      }
+    });
+  }
+
+  // --- Helpers ---
+  resolveLabel(item: any): string {
+    if (!item) return '';
+    const labelProp = this.bindLabel();
+    return labelProp && typeof item === 'object' ? item[labelProp] : String(item);
+  }
+
+  resolveValue(item: any): any {
+    const valueProp = this.bindValue();
+    return valueProp && typeof item === 'object' ? item[valueProp] : item;
+  }
+
+  isItemSelected(item: any): boolean {
+    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: any, b: any) => boolean>((a, b) => a === b);
+
+  // --- Actions ---
+
+  toggleDropdown(event: Event | null) {
+    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(): string | null {
+    if (this.appendToBody()) {
+      return this.dropdownStyle().top ?? null;
+    }
+
+    // NOT appendToBody
+    return this.dropdownPosition() === 'bottom' ? '105%' : null;
+  }
+
+  getBottom(): string | null {
+    if (this.appendToBody()) {
+      return this.dropdownStyle().bottom ?? null;
+    }
+
+    // NOT appendToBody
+    return this.dropdownPosition() === 'top' ? '105%' : 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
+  @HostListener('window:scroll')
+  @HostListener('window:resize')
+  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) {
+    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: any, event?: 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: any, event: Event) {
+    event.stopPropagation();
+    const newSelection = this.selectedOptions().filter(i => i !== item);
+    this.updateModel(newSelection);
+  }
+
+  handleClear(event: Event) {
+    event.stopPropagation();
+    this.updateModel([]);
+    this.clear.emit();
+  }
+
+  private updateModel(items: any[]) {
+    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: Event) {
+    const val = (event.target as HTMLInputElement).value;
+    this.searchTerm.set(val);
+    this.markedIndex.set(0);
+    this.search.emit({ term: val, items: this.filteredItems() });
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    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: Event) {
+    const target = event.target as HTMLElement;
+    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: any = () => {};
+  onTouched: any = () => {};
+  writeValue(value: any): void { this._value = value; this.resolveSelectedOptions(value); }
+  registerOnChange(fn: any) { this.onChange = fn; }
+  registerOnTouched(fn: any) { this.onTouched = fn; }
+  setDisabledState(d: boolean) { this.disabled.set(d); }
+
+  private resolveSelectedOptions(val: any) {
+    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);
+  }
+
+  private el = inject(ElementRef);
+  @HostListener('document:click', ['$event'])
+  onClickOutside(e: Event) {
+    if (!this.el.nativeElement.contains(e.target)) this.closeDropdown();
+  }
+
+  openFromLabel(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.disabled() || this.readonly()) return;
+
+    this.controlWrapper.nativeElement.focus();
+    this.openDropdown();
+  }
+
+}

package/src/lib/spinner/spinner.html

@@ -0,0 +1,5 @@
+@if (show) {
+<span [class]="classes" role="status" aria-label="loading">
+  <span class="sr-only">Loading...</span>
+</span>
+}

package/src/lib/spinner/spinner.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Mapped names to your 5 sizes
+export type SpinnerSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
+
+@Component({
+  selector: 'bk-spinner',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './spinner.html',
+  styleUrl: './spinner.css',
+})
+export class BkSpinner {
+  @Input() size: SpinnerSize = 'md';
+  @Input() show = true;
+  @Input() color = 'text-blue-600'; // default
+
+  get classes(): string {
+    return `spinner ${this.size} ${this.color}`;
+  }
+}

package/src/lib/tabs/tabs.html

@@ -0,0 +1,28 @@
+<div class="tabs-container">
+  <ul class="tabs-list" role="tablist">
+    @for (tab of list; track tab.id; let i = $index) {
+      <li class="tabs-item" role="presentation">
+        <button
+          type="button"
+          [id]="'tab-' + tab.id"
+          [attr.aria-selected]="isActive(tab.id)"
+          [attr.aria-controls]="'panel-' + tab.id"
+          [disabled]="tab.disabled"
+          [class.tabs-button--active]="isActive(tab.id)"
+          [class.tabs-button--disabled]="disabled || tab.disabled"
+          [class.tabs-button--no-icon]="!getTabIcon(tab)"
+          class="tabs-button"
+          (click)="setActiveTab(tab)"
+          role="tab">
+          @if (getTabIcon(tab)) {
+            <img
+              [src]="getTabIcon(tab)"
+              [alt]="tab.iconAlt || tab.label"
+              class="tabs-icon">
+          }
+          <span class="tabs-label">{{ tab.label }}</span>
+        </button>
+      </li>
+    }
+  </ul>
+</div>

package/src/lib/tabs/tabs.ts

@@ -0,0 +1,48 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface TabItem {
+  id: string;
+  label: string;
+  icon?: string; // Icon for inactive state
+  iconActive?: string; // Icon for active state (optional, falls back to icon if not provided)
+  iconAlt?: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'bk-tabs',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tabs.html',
+  styleUrl: './tabs.css',
+})
+export class BkTabs {
+  @Input() list: TabItem[] = [];
+  @Input() activeTabId: string = '';
+  @Input() disabled: boolean = false;
+
+  @Output() change = new EventEmitter<TabItem>();
+
+  // Set active tab and emit change event
+  setActiveTab(tab:TabItem): void {
+    debugger
+    if (tab?.disabled || this.disabled) return;
+    this.activeTabId = tab.id;
+    this.change.emit(tab);
+
+  }
+
+  // Check if a tab is active
+  isActive(tabId: string): boolean {
+    return this.activeTabId === tabId;
+  }
+
+  // Get the appropriate icon for a tab based on its active state
+  getTabIcon(tab: TabItem): string | undefined {
+    if (this.isActive(tab.id) && tab.iconActive) {
+      return tab.iconActive;
+    }
+    return tab.icon;
+  }
+}

package/src/lib/textarea/textarea.html

@@ -0,0 +1,80 @@
+<div class="flex flex-col gap-1.5 w-full">
+
+  @if (label) {
+    <label
+      class="text-sm font-medium text-[#141414] block" [for]="id">
+      {{ label }}
+      @if (required) {
+        <span class="text-[#E7000B] ml-0.5">*</span>
+      }
+    </label>
+  }
+
+  <div class="relative">
+    <textarea
+      [id]="id"
+      [name]="name"
+      [disabled]="disabled"
+      [tabindex]="tabIndex"
+      [readOnly]="readOnly"
+      [attr.maxlength]="maxlength"
+      [attr.minlength]="minlength"
+      [autocomplete]="autoComplete"
+      [autocapitalize]="autoCapitalize"
+      [inputMode]="inputMode"
+      [value]="value"
+      (input)="handleInput($event)"
+      (change)="handleChange($event)"
+      (blur)="handleBlur($event)"
+      (focus)="handleFocus($event)"
+      [placeholder]="placeholder"
+
+      [autocomplete]="autoComplete"
+
+      rows="{{rows}}"
+      class="
+        w-full
+        px-3 py-2.5
+        text-sm
+        border border-[#E3E3E7] rounded-[4px]
+        outline-none
+        transition-colors duration-200
+        bg-white resize-y
+        placeholder:text-[#6B7080]
+      "
+      [ngClass]="{
+        'border-[#FA727A] text-[#141414]': hasError && !disabled,
+
+        'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,
+
+        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled
+      }"
+    ></textarea>
+  </div>
+
+  <div class="flex justify-between items-start font-normal text-sm">
+
+    <div class="flex-1">
+      @if (hasError) {
+        <span class="text-[#F34050]">
+          {{ errorMessage }}
+        </span>
+      } @else if (hint) {
+        <span class="text-[#868997]">
+          {{ hint }}
+        </span>
+      }
+    </div>
+
+    @if (maxlength) {
+      <div
+        class="text-[#868997] tabular-nums flex-shrink-0"
+      >
+        {{ value.length }}/{{ maxlength }}
+      </div>
+    }
+
+
+  </div>
+
+</div>