@brickclay-org/ui 0.0.39 → 0.0.40

package/src/lib/chips/chips.ts

@@ -0,0 +1,222 @@
+import { Component, Input, forwardRef, ViewChild, ElementRef, AfterViewInit, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'bk-chips',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './chips.html',
+  styleUrl: './chips.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkChips),
+      multi: true
+    }
+  ]
+})
+export class BkChips implements ControlValueAccessor, AfterViewInit {
+  @ViewChild('badgeInput') badgeInput!: ElementRef<HTMLInputElement>;
+  @ViewChild('fieldWrapper') fieldWrapper!: ElementRef<HTMLDivElement>;
+
+  // --- Configuration Inputs ---
+  @Input() id!: string ;
+  @Input() name!: string ;
+  @Input() label: string = '';
+  @Input() placeholder: string = '';
+  @Input() hint: string = '';
+  @Input() required: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() readOnly: boolean = false;
+  /**
+   * If true, displays the component in an error state (red border).
+   * It also replaces the hint text with the error message.
+   */
+  @Input() hasError: boolean = false;
+  @Input() errorMessage: string = 'This is a error message';
+  // =================== Output Emitter ===================
+  @Output() input = new EventEmitter<Event>();
+  @Output() change = new EventEmitter<string[]>();
+
+  @Output() focus = new EventEmitter<Event>();
+  @Output() blur = new EventEmitter<Event>();
+  // --- State Properties ---
+  badges: string[] = [];
+  inputValue: string = '';
+  isFocused: boolean = false;
+  needsScroll: boolean = false;
+
+  // --- ControlValueAccessor Methods ---
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  // Get input state for styling variants
+  get inputState(): 'default' | 'focused' | 'filled' | 'error' | 'disabled' {
+    if (this.disabled) return 'disabled';
+    if (this.hasError) return 'error';
+    if (this.isFocused) return 'focused';
+    if (this.badges.length > 0 || this.inputValue.length > 0) return 'filled';
+    return 'default';
+  }
+
+
+
+  // Handle keydown events (Enter to add badge, Backspace to remove)
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) return;
+
+    // Add badge on Enter or comma
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      this.addBadge();
+    }
+    // Remove last badge on Backspace when input is empty
+    else if (event.key === 'Backspace' && this.inputValue === '' && this.badges.length > 0) {
+      this.removeBadge(this.badges.length - 1);
+    }
+  }
+
+  // Add a badge from the current input value
+  addBadge(): void {
+    const trimmedValue = this.inputValue.trim();
+    if (trimmedValue && !this.badges.includes(trimmedValue)) {
+      this.badges.push(trimmedValue);
+      this.inputValue = '';
+      this.updateValue();
+      // Check if scroll is needed after adding badge (with delay for DOM update)
+      setTimeout(() => this.checkScrollNeeded(), 10);
+    } else if (trimmedValue && this.badges.includes(trimmedValue)) {
+      // Optionally show a message that badge already exists
+      this.inputValue = '';
+    }
+  }
+
+  // Remove a badge at the given index
+  removeBadge(index: number): void {
+    if (this.disabled) return;
+    this.badges.splice(index, 1);
+    this.updateValue();
+    // Check if scroll is needed after removing badge (with delay for DOM update)
+    setTimeout(() => {
+      this.checkScrollNeeded();
+      if (this.badgeInput) {
+        this.badgeInput.nativeElement.focus();
+      }
+    }, 10);
+  }
+
+  // Check if scrolling is needed (when content wraps)
+  checkScrollNeeded(): void {
+    if (this.fieldWrapper && this.fieldWrapper.nativeElement) {
+      const wrapper = this.fieldWrapper.nativeElement;
+
+      // Get all badge items
+      const badgeItems = wrapper.querySelectorAll('.input-badge-item');
+
+      if (badgeItems.length === 0) {
+        // No badges, no scroll needed
+        this.needsScroll = false;
+        return;
+      }
+
+      // Get the first badge's top position
+      const firstBadge = badgeItems[0] as HTMLElement;
+      const firstBadgeTop = firstBadge.offsetTop;
+
+      // Check if any badge is on a different line (different top position)
+      let hasWrapped = false;
+      for (let i = 1; i < badgeItems.length; i++) {
+        const badge = badgeItems[i] as HTMLElement;
+        // If a badge's top position is different, it means it wrapped to a new line
+        if (Math.abs(badge.offsetTop - firstBadgeTop) > 5) {
+          hasWrapped = true;
+          break;
+        }
+      }
+
+      // Also check if the input field is on a different line
+      if (!hasWrapped && this.badgeInput && this.badgeInput.nativeElement) {
+        const inputTop = this.badgeInput.nativeElement.offsetTop;
+        if (Math.abs(inputTop - firstBadgeTop) > 5) {
+          hasWrapped = true;
+        }
+      }
+
+      // Only enable scroll if content actually wrapped
+      this.needsScroll = hasWrapped;
+    }
+  }
+
+  // Update the value and notify Angular Forms
+  updateValue(): void {
+    this.onChange([...this.badges]);
+    this.change.emit([...this.badges]);
+  }
+
+  // Focus the input field
+  focusInput(): void {
+    if (!this.disabled && this.badgeInput) {
+      this.badgeInput.nativeElement.focus();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Check scroll after view initializes
+    setTimeout(() => this.checkScrollNeeded(), 10);
+  }
+
+  // Called when Angular writes a value TO the component (e.g. initial value)
+  writeValue(value: any): void {
+    if (Array.isArray(value)) {
+      this.badges = [...value];
+    } else {
+      this.badges = [];
+    }
+    this.inputValue = '';
+    // Check scroll after value is written (with delay for DOM update)
+    setTimeout(() => this.checkScrollNeeded(), 10);
+  }
+
+  // Register function to call when value changes
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  // Register function to call when component is touched/blurred
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // Called when the component is disabled via the form control
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  // =================== Event Handlers ===================
+
+  // Called when the value in the UI changes (user types)
+  handleInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.inputValue = input.value;
+  }
+
+
+  handleFocus(event: Event): void {
+    if (!this.disabled) {
+    this.isFocused = true;
+    }
+    this.onChange([...this.badges]);
+    this.focus.emit(event);
+  }
+
+  handleBlur(event:Event): void {
+    this.isFocused = false;
+    this.onTouched();
+    this.onChange([...this.badges]);
+    this.blur.emit(event);
+  }
+
+
+
+}

package/src/lib/grid/components/grid/grid.html

@@ -0,0 +1,97 @@
+<div
+  #tableScrollContainer
+  cdkScrollable
+  class="h-[calc(100vh-260px)] overflow-y-auto">
+
+  <table class="min-w-full text-sm text-left text-gray-800 table-auto border-collapse">
+
+    <!-- ================= HEADER ================= -->
+  <thead>
+    <tr>
+      @for (col of columns; track col.header;let i=$index;) {
+        @if (isColumnVisible(col)) {
+          <th
+            class="grid-header sticky top-0 cursor-pointer"
+            [class.action-sticky]="col.sticky"
+            [class.z-10]="col.sticky"
+            [ngClass]="col.headerClass"
+            [ngClass]="col.cellClass"
+            (click)="sort(col,i)"
+          >
+            <span class="flex items-center gap-1"
+              [ngClass]="sortColumn === col.field
+                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')
+                : ''">
+              {{ col.header }}
+              @if (col.sortable) {
+                <span class="grid-sort-icon"></span>
+              }
+            </span>
+          </th>
+        }
+      }
+
+      @if (actions.length) {
+        <th class="grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20">
+          Action
+        </th>
+      }
+    </tr>
+  </thead>
+
+    <!-- ================= BODY ================= -->
+    <tbody
+      cdkDropList
+      [cdkDropListDisabled]="!draggable"
+      [cdkDropListData]="result || []"
+      (cdkDropListDropped)="dropList($event)">
+
+      @for (row of result; track row; let rowIndex = $index) {
+        <tr
+          cdkDrag
+          cdkDragLockAxis="y"
+          [cdkDragDisabled]="!draggable"
+          (cdkDragStarted)="onDragStart($event)"
+          (cdkDragMoved)="onDragMoved($event)"
+          class="" [ngClass]="{ 'cursor-move ': draggable }">
+
+          @for (col of columns; track col.header; let colIndex = $index) {
+            @if (isColumnVisible(col)) {
+              <td class="grid-cell text-nowrap" [ngClass]="col.cellClass">
+                @if (draggable && colIndex === firstVisibleColumnIndex) {
+                  <span cdkDragHandle class="mr-2 text-gray-400" [ngClass]="{ 'cursor-move': draggable }">☰</span>
+                }
+                {{ getCellValue(row, col) }}
+              </td>
+            }
+          }
+
+       @if (actions.length) {
+          <td class="grid-cell action-sticky text-center">
+            <div class="flex items-center justify-center gap-1.5">
+              @for (action of actions; track action.name) {
+                @if (action.hasPermission) {
+                    <!-- appTooltip="{{ action.tooltip }}"
+                    appTooltipPosition="top"                   -->
+                  <button
+                    class="size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]"
+                    (click)="emitAction(action, row)"
+
+                  >
+                    <img
+                      [src]="action.icon"
+                      width="14"
+                      height="14"
+                      alt="action-icon"
+                    />
+                  </button>
+                }
+              }
+            </div>
+          </td>
+        }
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>

package/src/lib/grid/components/grid/grid.ts

@@ -0,0 +1,139 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { TableColumn, TableAction } from '../../models/grid.model';
+import { CdkDragDrop, moveItemInArray, CdkDragMove, CdkDragStart, DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+export type SortDirection = 'asc' | 'desc';
+@Component({
+  selector: 'bk-grid',
+  standalone: true,
+  imports: [CommonModule,DragDropModule,ScrollingModule],
+  templateUrl: './grid.html',
+  styleUrl: './grid.css',
+})
+export class BkGrid<T = any> {
+  @Input() draggable: boolean = false;
+  @Input() columns: TableColumn<T>[] = [];
+  @Input() result!: T[];
+  @Input() actions: TableAction[] = [];
+
+  @Output() actionClick = new EventEmitter<{
+    action: string;
+    row: T;
+  }>();
+
+  @Output() sortChange = new EventEmitter<{
+    columnIndex: number;
+    column: TableColumn<T>;
+    direction: SortDirection;
+  }>();
+  @Output() dragDropChange = new EventEmitter<T[]>();
+  sortColumn?: keyof T;
+  sortDirection:SortDirection = 'asc';
+
+  @ViewChild('tableScrollContainer', { static: false })
+  tableScrollContainer!: ElementRef<HTMLDivElement>;
+
+  get firstVisibleColumnIndex(): number {
+    const index = this.columns.findIndex(col => col.visible !== false);
+    return index >= 0 ? index : 0;
+  }
+  /* ---------- Sorting ---------- */
+  sort(column: TableColumn<T>, index: number) {
+    if (!column.sortable || !column.field) return;
+
+    // Toggle sort direction
+    this.sortDirection =
+      this.sortColumn === column.field ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';
+
+    this.sortColumn = column.field;
+
+    // Emit sort change separately
+    this.sortChange.emit({
+      columnIndex: index,
+      column,
+      direction: this.sortDirection,
+    });
+  }
+
+  /* ---------- Visibility ---------- */
+  isColumnVisible(column: TableColumn<T>): boolean {
+    return column.visible !== false;
+  }
+
+  /* ---------- Cell Value ---------- */
+  getCellValue(row: T, column: TableColumn<T>): string {
+    if (column.formatter) {
+      return column.formatter(row);
+    }
+    if (column.field) {
+      return String(row[column.field] ?? '');
+    }
+    return '';
+  }
+
+  /* ---------- Actions ---------- */
+  emitAction(action: TableAction, row: T) {
+    this.actionClick.emit({
+      action: action.name,
+      row,
+    });
+  }
+
+  dropList(event: CdkDragDrop<T[]>) {
+    if (!this.draggable || !this.result) return;
+
+    moveItemInArray(this.result, event.previousIndex, event.currentIndex);
+
+    // Update existing sortOrder on T
+    this.result.forEach((item: any, index) => {
+      item.sortOrder = index + 1;
+    });
+
+    // Emit reordered list
+    this.dragDropChange.emit(this.result);
+  }
+
+  onDragMoved(event: CdkDragMove<any>) {
+    if (!this.tableScrollContainer) return;
+
+    const container = this.tableScrollContainer.nativeElement;
+    const rect = container.getBoundingClientRect();
+    const pointerY = event.pointerPosition.y - rect.top;
+
+    const threshold = 80;
+    const maxSpeed = 25;
+
+    if (pointerY < threshold) {
+      const intensity = 1 - pointerY / threshold;
+      container.scrollTop -= Math.min(maxSpeed, intensity * maxSpeed);
+    } else if (pointerY > rect.height - threshold) {
+      const intensity = 1 - (rect.height - pointerY) / threshold;
+      container.scrollTop += Math.min(maxSpeed, intensity * maxSpeed);
+    }
+  }
+
+  onDragStart(event: CdkDragStart<any>) {
+    const row = event.source.element.nativeElement as HTMLElement;
+    const cells = Array.from(row.querySelectorAll('td'));
+
+    setTimeout(() => {
+      const preview = document.querySelector('.cdk-drag-preview') as HTMLElement;
+
+      if (!preview) return;
+
+      const previewCells = preview.querySelectorAll('td');
+
+      cells.forEach((cell, index) => {
+        const width = cell.getBoundingClientRect().width + 'px';
+        const previewCell = previewCells[index] as HTMLElement;
+
+        if (previewCell) {
+          previewCell.style.width = width;
+          previewCell.style.minWidth = width;
+          previewCell.style.maxWidth = width;
+        }
+      });
+    });
+  }
+}

package/src/lib/grid/models/grid.model.ts

@@ -0,0 +1,20 @@
+export interface TableColumn<T = any> {
+  header: string;
+  field?: keyof T;
+  width?: string;
+  sticky?: boolean;
+  sortable?: boolean;
+  headerClass?: string;
+  cellClass?: string;
+  formatter?: (row: T) => string;
+
+  /** show / hide both th + td */
+  visible?: boolean; // default: true
+}
+
+export interface TableAction{
+  name: string;       // e.g. edit, delete
+  icon: string;
+  tooltip: string;
+  hasPermission: boolean;
+}

package/src/lib/input/input.html

@@ -0,0 +1,127 @@
+<div class="input-container">
+  @if(label){
+    <label [for]="id" class="input-label">
+      {{ label }}
+      @if(required){
+        <span class="input-label-required">*</span>
+      }
+    </label>
+  }
+
+  <div class="input-wrapper" [ngClass]="{
+    'input-wrapper--url': type === 'url',
+    'input-wrapper--phone': phone,
+    'input-wrapper--password': password,
+    'input-wrapper--icon': iconSrc && showIcon
+  }">
+
+    <input
+      #inputField
+      [type]="currentInputType"
+      [id]="id"
+      [name]="name"
+      [disabled]="disabled"
+      [tabindex]="tabIndex"
+      [readOnly]="readOnly"
+      [attr.maxlength]="maxlength"
+      [attr.minlength]="minlength"
+      [autocomplete]="autoComplete"
+      [autocapitalize]="autoCapitalize"
+
+      [attr.max]="max"
+      [attr.min]="min"
+      [attr.step]="step"
+
+      [placeholder]="placeHolderText"
+      [pattern]="pattern"
+      [autocomplete]="autoComplete"
+      [value]="inputValue"
+
+
+
+      [mask]="maskValue"
+      [prefix]="maskPrefixValue"
+      [showMaskTyped]="false"
+      [dropSpecialCharacters]="false"
+      (change)="handleChange($event)"
+      (input)="handleInput($event)"
+      (focus)="handleFocus($event)"
+      (blur)="handleBlur($event)"
+      class="input-field"
+
+      [ngClass]="{
+        'input-field--url': type === 'url',
+        'input-field--phone': phone,
+        'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',
+        'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',
+        'input-field--password': password,
+        'input-field--default': inputState === 'default',
+        'input-field--focused': inputState === 'focused',
+        'input-field--filled': inputState === 'filled',
+        'input-field--error': inputState === 'error',
+        'input-field--disabled': inputState === 'disabled'
+      }">
+
+    @if(iconSrc && showIcon){
+      <img (click)="handleIconClick($event)" [src]="iconSrc" [alt]="iconAlt" [ngClass]="{
+        'input-search-icon--left': iconOrientation === 'left',
+        'input-search-icon--right': iconOrientation === 'right',
+        'cursor-pointer': !disabled && !readOnly
+      }" class="input-search-icon">
+    }
+
+    @if(showErrorIcon){
+       <img src="../../assets/images/icons/global/info-circle.svg" class="input-search-icon input-search-icon--right">
+    }
+
+    @if(password){
+      <button type="button" (click)="togglePasswordVisibility($event)" class="input-password-toggle" [disabled]="disabled" tabindex="-1">
+        <img [src]="showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'" [alt]="showPassword ? 'Hide password' : 'Show password'" class="input-password-icon">
+      </button>
+    }
+
+    @if(phone){
+      <div #selectRef class="input-phone-selector" [ngClass]="{
+        'input-phone-selector--default': inputState === 'default',
+        'input-phone-selector--focused': inputState === 'focused',
+        'input-phone-selector--filled': inputState === 'filled',
+        'input-phone-selector--error': inputState === 'error',
+        'input-phone-selector--disabled': inputState === 'disabled'
+      }" (click)="toggleDropdown($event)">
+        <span class="input-phone-selector-text">{{ selectedCountry.name }}</span>
+        <img src="../../assets/images/icons/global/input-arrow-down.svg" alt="Dropdown" class="input-phone-selector-arrow" [ngClass]="{'input-phone-selector-arrow--open': isDropdownOpen}">
+      </div>
+    }
+
+    @if(phone && isDropdownOpen){
+      <div #dropdownRef class="input-phone-dropdown" (click)="$event.stopPropagation()">
+        <button *ngFor="let country of countryOptions" type="button" class="input-phone-dropdown-item" [ngClass]="{'input-phone-dropdown-item--active': selectedCountry.code === country.code}" (click)="selectCountry(country); $event.stopPropagation()">
+          {{ country.name }}
+        </button>
+      </div>
+    }
+
+
+
+    @if(type === 'url'){
+      <span class="input-url-prefix" [ngClass]="{
+        'input-url-prefix--default': inputState === 'default',
+        'input-url-prefix--focused': inputState === 'focused',
+        'input-url-prefix--filled': inputState === 'filled',
+        'input-url-prefix--error': inputState === 'error',
+        'input-url-prefix--disabled': inputState === 'disabled'
+      }">https</span>
+    }
+  </div>
+
+  @if(hasError){
+    @if (errorMessage) {
+      <p class="input-error">{{ errorMessage }}</p>
+    }
+  }
+  @if(!hasError){
+    @if(hint){
+      <p class="input-hint">{{ hint }}</p>
+    }
+  }
+</div>