@brickclay-org/ui 0.0.39 → 0.0.40

package/src/lib/calender/components/time-picker/time-picker.component.ts

@@ -0,0 +1,283 @@
+import { BrickclayIcons } from '../../../assets/icons';
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, AfterViewInit, QueryList, ViewChildren, ElementRef, HostListener, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'bk-time-picker',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './time-picker.component.html',
+  styleUrls: ['./time-picker.component.css']
+})
+export class BkTimePicker implements OnInit, OnChanges, AfterViewInit {
+  @Input() value: string = '1:00 AM'; // Time in format "H:MM AM/PM"
+  @Input() label: string = 'Time';
+  @Input() placeholder: string = 'Select time';
+  @Input() position: 'left' | 'right' = 'left';
+  @Input() pickerId: string = ''; // Unique ID for this picker
+  @Input() closePicker: number = 0; // Close counter from parent (triggers close when changed)
+  @Input() timeFormat: 12 | 24 = 12; // Visual mode: 12h or 24h
+  @Input() showSeconds = false; // Whether to show/edit seconds
+  @Output() timeChange = new EventEmitter<string>();
+  @Output() pickerOpened = new EventEmitter<string>(); // Notify parent when opened
+  @Output() pickerClosed = new EventEmitter<string>(); // Notify parent when closed
+
+  @ViewChildren('timeScroll') timeScrollElements!: QueryList<ElementRef>;
+
+  showPicker = false;
+  currentHour = 1;
+  currentMinute = 0;
+  currentAMPM = 'AM';
+  currentSecond = 0;
+
+  brickclayIcons=BrickclayIcons;
+
+  ngOnInit() {
+    this.parseTimeValue();
+  }
+
+  ngAfterViewInit() {
+    if (this.showPicker) {
+      setTimeout(() => {
+        this.scrollToSelectedTimes();
+      }, 100);
+    }
+  }
+
+  parseTimeValue() {
+    const parsed = this.parseTimeStringToComponents(this.value);
+    this.currentHour = parsed.hour;
+    this.currentMinute = parsed.minute;
+    this.currentSecond = parsed.second;
+    this.currentAMPM = parsed.ampm;
+  }
+
+  getHours(): number[] {
+    // 12-hour: 1-12, 24-hour: 0-23
+    if (this.timeFormat === 24) {
+      return Array.from({ length: 24 }, (_, i) => i);
+    }
+    return Array.from({ length: 12 }, (_, i) => i + 1);
+  }
+
+  getMinutes(): number[] {
+    return Array.from({ length: 60 }, (_, i) => i);
+  }
+
+  getSeconds(): number[] {
+    return Array.from({ length: 60 }, (_, i) => i);
+  }
+
+  getAMPMOptions(): string[] {
+    return ['AM', 'PM'];
+  }
+
+  parseTimeStringToComponents(timeStr: string): { hour: number; minute: number; second: number; ampm: string } {
+    // Supports:
+    // - "H:MM AM/PM"
+    // - "H:MM:SS AM/PM"
+    // - "HH:MM" (24h)
+    // - "HH:MM:SS" (24h)
+    if (!timeStr) {
+      return {
+        hour: this.timeFormat === 24 ? 0 : 12,
+        minute: 0,
+        second: 0,
+        ampm: this.timeFormat === 24 ? '' : 'AM'
+      };
+    }
+
+    const parts = timeStr.trim().split(' ');
+    const timePart = parts[0] || (this.timeFormat === 24 ? '00:00' : '12:00');
+    let ampm = (parts[1] || '').toUpperCase();
+
+    const [hoursStr, minutesStr, secondsStr] = timePart.split(':');
+    let hour = parseInt(hoursStr || (this.timeFormat === 24 ? '0' : '12'), 10);
+    const minute = parseInt(minutesStr || '0', 10);
+    const second = parseInt(secondsStr || '0', 10);
+
+    if (this.timeFormat === 24) {
+      // In 24-hour mode we ignore AM/PM and keep hour as 0-23
+      return {
+        hour: isNaN(hour) ? 0 : Math.min(Math.max(hour, 0), 23),
+        minute: isNaN(minute) ? 0 : Math.min(Math.max(minute, 0), 59),
+        second: isNaN(second) ? 0 : Math.min(Math.max(second, 0), 59),
+        ampm: ''
+      };
+    }
+
+    // 12-hour mode: normalize AM/PM and convert 24h inputs if needed
+    let ampmValue = ampm === 'PM' || ampm === 'AM' ? ampm : '';
+    if (!ampmValue) {
+      // No AM/PM provided -> interpret as 24-hour and convert to 12-hour with AM/PM
+      if (hour >= 12) {
+        ampmValue = 'PM';
+        if (hour > 12) hour -= 12;
+      } else {
+        ampmValue = 'AM';
+        if (hour === 0) hour = 12;
+      }
+    }
+
+    // Clamp to 1-12 range
+    if (hour < 1) hour = 1;
+    if (hour > 12) hour = 12;
+
+    return {
+      hour,
+      minute: isNaN(minute) ? 0 : Math.min(Math.max(minute, 0), 59),
+      second: isNaN(second) ? 0 : Math.min(Math.max(second, 0), 59),
+      ampm: ampmValue
+    };
+  }
+
+  formatTimeFromComponents(hour: number, minute: number, second: number, ampm: string): string {
+    const hStr = hour.toString().padStart(2, '0');
+    const minuteStr = minute.toString().padStart(2, '0');
+    const secondStr = second.toString().padStart(2, '0');
+
+    if (this.timeFormat === 24) {
+      // "HH:mm" or "HH:mm:ss"
+      return this.showSeconds
+        ? `${hStr}:${minuteStr}:${secondStr}`
+        : `${hStr}:${minuteStr}`;
+    }
+
+    // 12-hour: "H:MM" or "H:MM:SS" with AM/PM
+    const displayHour = hour; // already 1-12
+    return this.showSeconds
+      ? `${displayHour}:${minuteStr}:${secondStr} ${ampm}`
+      : `${displayHour}:${minuteStr} ${ampm}`;
+  }
+
+  togglePicker() {
+    if (!this.showPicker) {
+      this.showPicker = true;
+      this.parseTimeValue();
+      this.pickerOpened.emit(this.pickerId);
+      setTimeout(() => {
+        this.scrollToSelectedTimes();
+      }, 100);
+    } else {
+      this.showPicker = false;
+      this.pickerClosed.emit(this.pickerId);
+    }
+  }
+
+  onHourChange(hour: number) {
+    this.currentHour = hour;
+    this.updateTime();
+    setTimeout(() => {
+      this.scrollToSelectedTimes();
+    }, 50);
+  }
+
+  onMinuteChange(minute: number) {
+    this.currentMinute = minute;
+    this.updateTime();
+    setTimeout(() => {
+      this.scrollToSelectedTimes();
+    }, 50);
+  }
+
+  onSecondChange(second: number) {
+    this.currentSecond = second;
+    this.updateTime();
+    setTimeout(() => {
+      this.scrollToSelectedTimes();
+    }, 50);
+  }
+
+  onAMPMChange(ampm: string) {
+    this.currentAMPM = ampm;
+    this.updateTime();
+    setTimeout(() => {
+      this.scrollToSelectedTimes();
+    }, 50);
+  }
+
+  updateTime() {
+    const newTime = this.formatTimeFromComponents(
+      this.currentHour,
+      this.currentMinute,
+      this.currentSecond,
+      this.currentAMPM
+    );
+    this.value = newTime;
+    this.timeChange.emit(newTime);
+  }
+
+  scrollToSelectedTimes() {
+    this.timeScrollElements.forEach((elementRef) => {
+      const element = elementRef.nativeElement;
+      const selectedItem = element.querySelector('.time-item.selected');
+      if (selectedItem) {
+        const scrollTop = selectedItem.offsetTop - element.offsetHeight / 40 + selectedItem.offsetHeight / 40;
+        element.scrollTop = scrollTop;
+      }
+    });
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.time-picker-wrapper') && this.showPicker) {
+      this.showPicker = false;
+      this.pickerClosed.emit(this.pickerId);
+    }
+  }
+
+  private previousCloseCounter: number = 0;
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['value'] && changes['value'].currentValue) {
+      this.parseTimeValue();
+    }
+    if (changes['closePicker'] && this.showPicker) {
+      const newCounter = changes['closePicker'].currentValue;
+      // If counter increased, close the picker
+      if (newCounter > this.previousCloseCounter) {
+        this.showPicker = false;
+        this.pickerClosed.emit(this.pickerId);
+        this.previousCloseCounter = newCounter;
+      }
+    }
+  }
+
+  // Basic keyboard support on the input (combobox behavior)
+  onInputKeydown(event: KeyboardEvent) {
+    const key = event.key;
+
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      this.togglePicker();
+      return;
+    }
+
+    if (key === 'Escape' && this.showPicker) {
+      this.showPicker = false;
+      this.pickerClosed.emit(this.pickerId);
+      return;
+    }
+
+    // Simple hour increment/decrement when closed
+    if (!this.showPicker && (key === 'ArrowUp' || key === 'ArrowDown')) {
+      event.preventDefault();
+      if (this.timeFormat === 24) {
+        if (key === 'ArrowUp') {
+          this.currentHour = (this.currentHour + 1) % 24;
+        } else {
+          this.currentHour = this.currentHour <= 0 ? 23 : this.currentHour - 1;
+        }
+      } else {
+        if (key === 'ArrowUp') {
+          this.currentHour = this.currentHour >= 12 ? 1 : this.currentHour + 1;
+        } else {
+          this.currentHour = this.currentHour <= 1 ? 12 : this.currentHour - 1;
+        }
+      }
+      this.updateTime();
+    }
+  }
+}
+

package/src/lib/calender/services/calendar-manager.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CalendarManagerService {
+  private calendarInstances: Set<() => void> = new Set();
+  private closeAllSubject = new Subject<void>();
+  
+  closeAll$ = this.closeAllSubject.asObservable();
+
+  /**
+   * Register a calendar instance with its close function
+   */
+  register(closeFn: () => void): () => void {
+    this.calendarInstances.add(closeFn);
+    
+    // Return unregister function
+    return () => {
+      this.calendarInstances.delete(closeFn);
+    };
+  }
+
+  /**
+   * Close all calendars except the one being opened
+   */
+  closeAllExcept(exceptCloseFn: () => void): void {
+    this.calendarInstances.forEach(closeFn => {
+      if (closeFn !== exceptCloseFn) {
+        closeFn();
+      }
+    });
+  }
+
+  /**
+   * Close all calendars
+   */
+  closeAll(): void {
+    this.closeAllSubject.next();
+    this.calendarInstances.forEach(closeFn => closeFn());
+  }
+}
+
+

package/src/lib/checkbox/checkbox.html

@@ -0,0 +1,42 @@
+<div
+  class="inline-flex items-center gap-2 cursor-pointer group outline-none"
+  (click)="toggle()"
+  (keydown.enter)="toggle()"
+  (keydown.space)="$event.preventDefault(); toggle()"
+  tabindex="0"
+  [attr.aria-disabled]="disabled">
+  <div
+    class="relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 checkbox"
+    [ngClass]="[
+    checkboxClass,
+      isChecked && !disabled ? 'bg-black border-black' : '',
+      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',
+      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',
+      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',
+      disabled ? 'cursor-not-allowed' : ''
+    ]"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="text-white pointer-events-none transition-opacity duration-200"
+      [class.opacity-0]="!isChecked"
+      [class.opacity-100]="isChecked"
+    >
+    <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  </div>
+@if(label){
+  <span
+    [ngClass]="disabled ? 'text-gray-400' : ''"
+    class="font-medium text-xs text-[#1B223A] select-none {{labelClass}}"
+  >
+    {{ label }}
+  </span>
+}
+</div>

package/src/lib/checkbox/checkbox.ts

@@ -0,0 +1,67 @@
+import { Component, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'bk-checkbox',
+  standalone: true,
+  imports: [CommonModule],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './checkbox.html',
+  styleUrls: ['./checkbox.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkCheckbox),
+      multi: true
+    }
+  ]
+})
+export class BkCheckbox implements ControlValueAccessor {
+
+  @Input() checkboxClass: string = '';
+  @Input() label: string = '';
+  @Input() labelClass: string = '';
+  @Input() disabled: boolean = false;
+
+  @Output() change = new EventEmitter<boolean>();
+
+  // This is the value bound via ngModel
+  isChecked: boolean = false;
+
+  // ControlValueAccessor callbacks
+  private onChange = (_: any) => {};
+  private onTouched = () => {};
+
+  // Toggle function for click / keyboard
+  toggle() {
+    if (this.disabled) return;
+
+    this.isChecked = !this.isChecked;
+
+    // Update ngModel value
+    this.onChange(this.isChecked);
+    this.onTouched();
+
+    // Emit the change event
+    this.change.emit(this.isChecked);
+  }
+
+  /** ------------------ ControlValueAccessor methods ------------------ */
+
+  writeValue(value: boolean): void {
+    this.isChecked = value ?? false; // handle null/undefined safely
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/src/lib/chips/chips.html

@@ -0,0 +1,74 @@
+<div class="input-badge-container">
+  @if (label) {
+    <label
+      [for]="id"
+      class="input-badge-label">
+      {{ label }}
+      @if (required) {
+        <span class="input-badge-label-required">*</span>
+      }
+    </label>
+  }
+
+  <div class="input-badge-wrapper">
+    <div
+      #fieldWrapper
+      class="input-badge-field-wrapper"
+      [ngClass]="{
+        'input-badge-field-wrapper--default': inputState === 'default',
+        'input-badge-field-wrapper--focused': inputState === 'focused',
+        'input-badge-field-wrapper--filled': inputState === 'filled',
+        'input-badge-field-wrapper--error': inputState === 'error',
+        'input-badge-field-wrapper--disabled': inputState === 'disabled',
+        'input-badge-field-wrapper--scrollable': needsScroll
+      }"
+      (click)="focusInput()"
+    >
+      <!-- Badges -->
+      @for (badge of badges; track badge; let i = $index) {
+        <div class="input-badge-item">
+          <span class="input-badge-item-text">{{ badge }}</span>
+          @if (!disabled) {
+            <button type="button" (click)="removeBadge(i); $event.stopPropagation()"class="input-badge-item-close" >
+              <img src="../../../../assets/images/icons/global/badge-close.svg" alt="Remove" class="input-badge-item-close-icon"/>
+            </button>
+          }
+        </div>
+      }
+
+      <!-- Input Field -->
+      <input
+        #badgeInput
+        type="text"
+        [id]="id"
+        [name]="name"
+        [value]="inputValue"
+        (keydown)="onKeyDown($event)"
+        (input)="handleInput($event)"
+        (focus)="handleFocus($event)"
+        (blur)="handleBlur($event)"
+        [placeholder]="badges.length === 0 ? placeholder : ''"
+        [disabled]="disabled"
+        [readOnly]="readOnly"
+        class="input-badge-input"
+        [ngClass]="{
+          'input-badge-input--default': inputState === 'default',
+          'input-badge-input--focused': inputState === 'focused',
+          'input-badge-input--filled': inputState === 'filled',
+          'input-badge-input--error': inputState === 'error',
+          'input-badge-input--disabled': inputState === 'disabled'
+        }"
+      />
+    </div>
+  </div>
+
+  <div class="input-badge-footer">
+    <div class="input-badge-footer-content">
+      @if (hasError) {
+        <span class="input-badge-error"> {{ errorMessage }}</span>
+      } @else if (hint) {
+        <span class="input-badge-hint"> {{ hint }}</span>
+      }
+    </div>
+  </div>
+</div>