@brickclay-org/ui 0.0.38 → 0.0.39

package/src/lib/select/select.html

@@ -1,111 +0,0 @@
-<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

@@ -1,401 +0,0 @@
-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

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

package/src/lib/spinner/spinner.ts

@@ -1,22 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-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

@@ -1,80 +0,0 @@
-<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>