@brickclay-org/ui 0.0.9 → 0.0.13

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

@@ -1,283 +0,0 @@
-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: 'brickclay-time-picker',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './time-picker.component.html',
-  styleUrls: ['./time-picker.component.css']
-})
-export class TimePickerComponent 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

@@ -1,45 +0,0 @@
-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.css

@@ -1,26 +0,0 @@
-/*---- Checkbox Sizes Class ---- */
-.xsm {
-  @apply size-[14px];
-}
-.sm {
-  @apply size-[16px];
-}
-.md {
-  @apply size-[18px];
-}
-.lg {
-  @apply size-[20px];
-}
-/*---- Tick Sizes Class ---- */
-.xsm svg {
-  @apply size-[10.5px];
-}
-.sm svg {
-  @apply size-[12px];
-}
-.md svg {
-  @apply size-[13.5px];
-}
-.lg svg {
-  @apply size-[14px];
-}

package/src/lib/checkbox/checkbox.html

@@ -1,42 +0,0 @@
-<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"
-    [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

@@ -1,67 +0,0 @@
-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: 'brickclay-checkbox',
-  standalone: true,
-  imports: [CommonModule],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './checkbox.html',
-  styleUrls: ['./checkbox.css'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CheckboxComponent),
-      multi: true
-    }
-  ]
-})
-export class CheckboxComponent 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/radio/radio.css

@@ -1,39 +0,0 @@
-/*---- Checkbox Sizes Class ---- */
-.xsm {
-  @apply size-[14px];
-}
-.sm {
-  @apply size-[16px];
-}
-.md {
-  @apply size-[18px];
-}
-.lg {
-  @apply size-[19px];
-}
-/*---- Dot Sizes Class ---- */
-.xsm .dot {
-  @apply size-[6px];
-}
-.sm .dot {
-  @apply size-[8px];
-}
-.md .dot {
-  @apply size-[10px];
-}
-.lg .dot {
-  @apply size-[11px];
-}
-/*---- Tick Sizes Class ---- */
-.xsm .tick {
-  @apply size-[8px];
-}
-.sm .tick {
-  @apply size-[9px];
-}
-.md .tick {
-  @apply size-[12px];
-}
-.lg .tick {
-  @apply size-[13px];
-}

package/src/lib/radio/radio.html

@@ -1,58 +0,0 @@
-<div
-  class="inline-flex items-center gap-2 cursor-pointer group outline-none"
-  (click)="select()"
-  (keydown.enter)="select()"
-  (keydown.space)="$event.preventDefault(); select()"
-  tabindex="0"
-  [attr.aria-disabled]="disabled">
-
-  <div
-    class="relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0
-           group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2"
-    [ngClass]="[
-      radioClass,
-      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',
-      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',
-      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',
-      disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',
-      disabled && isChecked && variant === 'dot' ? 'border-gray-300 bg-gray-50' : '',
-      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',
-      disabled ? 'cursor-not-allowed' : ''
-    ]"
-  >
-
-    @if (variant === 'dot') {
-      <span
-        class="rounded-full bg-black transition-transform duration-200 transform dot"
-        [class.scale-0]="!isChecked"
-        [class.scale-100]="isChecked"
-        [class.bg-gray-400]="disabled">
-      </span>
-    }
-
-    @if (variant === 'tick') {
-      <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 tick"
-        [class.opacity-0]="!isChecked"
-        [class.opacity-100]="isChecked">
-        <polyline points="20 6 9 17 4 12"></polyline>
-      </svg>
-    }
-
-  </div>
-
-  @if (label) {
-    <span
-      class="font-medium text-xs text-[#1B223A] select-none"
-      [ngClass]="[labelClass, disabled ? 'text-gray-400' : '']">
-      {{ label }}
-    </span>
-  }
-</div>

package/src/lib/radio/radio.ts

@@ -1,77 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  forwardRef,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-  FormsModule
-} from '@angular/forms';
-
-@Component({
-  selector: 'brickclay-radio-button',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './radio.html',
-  styleUrl: './radio.css',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RadioComponent),
-      multi: true
-    }
-  ]
-})
-export class RadioComponent implements ControlValueAccessor {
-
-  @Input() radioClass = '';
-  @Input() label = '';
-  @Input() labelClass = '';
-  @Input() value: any;
-  @Input() disabled = false;
-  @Input() variant: 'dot' | 'tick' = 'dot';
-
-  @Output() change = new EventEmitter<any>();
-
-  modelValue: any;
-
-  onChange = (_: any) => {};
-  onTouched = () => {};
-
-  select(): void {
-    if (this.disabled) return;
-
-    if (this.modelValue !== this.value) {
-      this.modelValue = this.value;
-      this.onChange(this.value);
-      this.onTouched();
-      this.change.emit(this.value);
-    }
-  }
-
-  get isChecked(): boolean {
-    return this.modelValue === this.value;
-  }
-
-  writeValue(value: any): void {
-    this.modelValue = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-}