@brickclay-org/ui 0.0.39 → 0.0.40

package/src/lib/input/input.ts

@@ -0,0 +1,394 @@
+import { CommonModule } from '@angular/common';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  HostListener,
+  ElementRef,
+  ViewChild,
+  forwardRef,
+  Output,
+  EventEmitter
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+
+export type BkInputType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'url'
+  | 'tel';
+export type BkInputAutoComplete =
+  | 'on'
+  | 'off'
+  | 'name'
+  | 'honorific-prefix'
+  | 'given-name'
+  | 'additional-name'
+  | 'family-name'
+  | 'honorific-suffix'
+  | 'nickname'
+  | 'email'
+  | 'username'
+  | 'new-password'
+  | 'current-password'
+  | 'organization-title'
+  | 'organization'
+  | 'street-address'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'address-level4'
+  | 'address-level3'
+  | 'address-level2'
+  | 'address-level1'
+  | 'country'
+  | 'country-name'
+  | 'postal-code'
+  | 'cc-name'
+  | 'cc-given-name'
+  | 'cc-additional-name'
+  | 'cc-family-name'
+  | 'cc-number'
+  | 'cc-exp'
+  | 'cc-exp-month'
+  | 'cc-exp-year'
+  | 'cc-csc'
+  | 'cc-type'
+  | 'transaction-currency'
+  | 'transaction-amount'
+  | 'language'
+  | 'bday'
+  | 'bday-day'
+  | 'bday-month'
+  | 'bday-year'
+  | 'sex'
+  | 'tel'
+  | 'tel-country-code'
+  | 'tel-national'
+  | 'tel-area-code'
+  | 'tel-local'
+  | 'tel-extension'
+  | 'impp'
+  | 'url'
+  | 'photo';
+
+export type BkInputAutoCapitalize =
+  | 'off'
+  | 'none'
+  | 'on'
+  | 'sentences'
+  | 'words'
+  | 'characters';
+
+export type BkInputMode =
+  | 'none'
+  | 'text'
+  | 'tel'
+  | 'url'
+  | 'email'
+  | 'numeric'
+  | 'decimal'
+  | 'search';
+
+export type IconOrientation = 'left' | 'right';
+export interface CountryOption {
+  code: string;
+  name: string;
+  mask: string;
+  prefix:string;
+  placeholder:string;
+}
+@Component({
+  selector: 'bk-input',
+  imports: [CommonModule,NgxMaskDirective,FormsModule],
+  templateUrl: './input.html',
+  styleUrl: './input.css',
+  standalone: true,
+  providers: [
+    provideNgxMask(),
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkInput),
+      multi: true
+    }
+  ]
+})
+export class BkInput implements OnInit, OnDestroy, ControlValueAccessor {
+
+  // =================== Inputs (all your original ones) ===================
+  @Input() id!: string ;
+  @Input() name!: string ;
+  @Input() mask: string | null= null;
+  @Input() autoComplete : BkInputAutoComplete = 'off';
+  @Input() label: string = '';
+  @Input() placeholder: string = 'stephend@i2cinc.com';
+  @Input() hint: string = '';
+  @Input() required: boolean = false;
+  @Input() type: BkInputType = 'text';
+  @Input() value: string = '';
+  @Input() hasError: boolean = false;
+  @Input() showErrorIcon:boolean=false;
+  @Input() errorMessage: string = '';
+  @Input() disabled: boolean = false;
+  @Input() tabIndex: number | null = null;
+  @Input() readOnly: boolean = false;
+  @Input() autoCapitalize: BkInputAutoComplete | null = null;
+  @Input() inputMode: BkInputMode | null = null;
+  @Input() iconSrc?: string;
+  @Input() iconAlt: string = 'icon';
+  @Input() showIcon: boolean = true;
+  @Input() phone: boolean = false;
+  @Input() countryCode: string = 'US';
+  @Input() countryOptions: CountryOption[] = [
+  { code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ',placeholder:'(000) 000-0000' },
+  { code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ',placeholder:'(000) 000-0000' },
+  { code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ',placeholder:'(000) 000-0000' },
+  { code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ' ,placeholder:'(000) 000-0000'},
+  { code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ' ,placeholder:'(000) 000-0000'},
+  { code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ',placeholder:'(000) 000-0000' },
+  { code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ',placeholder:'(000) 000-0000' }
+];
+
+  selectedCountry: CountryOption= this.countryOptions[0];
+  @Input() iconOrientation: IconOrientation = 'left'
+
+  @Input() password: boolean = false;
+  @Input() showPassword: boolean = false;
+
+  @Input() pattern?: string|null;
+  @Input() max: number|null = null;
+  @Input() min: number|null = null;
+  @Input() step: number|null = null;
+  @Input() maxlength: number|null = null;
+  @Input() minlength: number|null = null;
+  // =================== ViewChild ===================
+  @ViewChild('dropdownRef') dropdownRef?: ElementRef;
+  @ViewChild('selectRef') selectRef?: ElementRef;
+  @ViewChild('inputField') inputField?: ElementRef<HTMLInputElement>;
+
+  // =================== Internal State ===================
+  isFocused: boolean = false;
+  inputValue: string = '';
+  isDropdownOpen: boolean = false;
+
+
+  // =================== Output Emitter ===================
+  @Output() input = new EventEmitter<Event>();
+  @Output() change = new EventEmitter<Event>();
+  @Output() focus = new EventEmitter<Event>();
+  @Output() blur = new EventEmitter<Event>();
+  @Output() clicked = new EventEmitter<boolean>();
+
+  get placeHolderText(): string {
+   if (this.phone) {
+      const country = this.countryOptions.find(c => c.code === this.countryCode);
+      return country?.placeholder || '';
+    }
+    return this.placeholder;
+  }
+
+   get maskValue(): string {
+    if (this.mask) return this.mask;
+    if (this.phone) {
+      const country = this.countryOptions.find(c => c.code === this.countryCode);
+      return country?.mask || '';
+    }
+    return '';
+  }
+
+  get maskPrefixValue(): string {
+    if (this.phone) {
+
+      const country = this.countryOptions.find(c => c.code === this.countryCode);
+      return country?.prefix || '';
+    }
+    return '';
+  }
+
+  // =================== CVA Callbacks ===================
+  private onChange = (value: any) => {};
+  private onTouched = () => {};
+
+  writeValue(value: any): void {
+    this.value = value || '';
+    this.inputValue = this.value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  // =================== Lifecycle ===================
+  private closeAllDropdownsHandler = () => {
+    if (this.phone && this.isDropdownOpen) this.isDropdownOpen = false;
+  };
+
+  ngOnInit(): void {
+    if (this.value) this.inputValue = this.value;
+    if (this.password && this.type !== 'password') this.type = 'password';
+    if (this.phone) {
+      const country = this.countryOptions.find(c => c.code === this.countryCode);
+
+      if (country) this.selectedCountry = country;
+      document.addEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.phone) {
+      document.removeEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
+    }
+  }
+
+  // =================== Host Listener ===================
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (this.phone && this.isDropdownOpen) {
+      const target = event.target as HTMLElement;
+      if (this.selectRef?.nativeElement && this.dropdownRef?.nativeElement) {
+        const clickedInside =
+          this.selectRef.nativeElement.contains(target) ||
+          this.dropdownRef.nativeElement.contains(target);
+        if (!clickedInside) this.isDropdownOpen = false;
+      }
+    }
+  }
+
+  // =================== Event Handlers ===================
+  handleFocus(event: Event): void {
+    this.focus.emit(event);
+    if (!this.disabled) this.isFocused = true;
+  }
+
+  handleBlur(event:Event): void {
+    this.isFocused = false;
+    this.onTouched();
+    this.blur.emit(event);
+  }
+  handleInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.inputValue = val;
+    this.value = val;       // update CVA value
+    this.onChange(val);     // propagate to parent form
+    this.input.emit(event); // emit raw event
+  }
+
+  handleClicked():void {
+    this.clicked.emit(true);
+  }
+
+  handleChange(event: Event) {
+    this.change.emit(event); // emit raw change event
+  }
+
+  toggleDropdown(event?: Event): void {
+    if (!this.disabled && this.phone) {
+      if (!this.isDropdownOpen) {
+        document.dispatchEvent(new CustomEvent('closeAllPhoneDropdowns'));
+        setTimeout(() => (this.isDropdownOpen = true), 0);
+      } else {
+        this.isDropdownOpen = false;
+      }
+      event?.stopPropagation();
+    }
+  }
+
+selectCountry(country: CountryOption): void {
+  const oldCountry = this.selectedCountry;
+  this.selectedCountry = country;
+  this.countryCode = country.code;
+  this.isDropdownOpen = false;
+
+  const currentRaw = this.inputField?.nativeElement?.value || this.inputValue;
+  let newPhone = '';
+
+  if (currentRaw && currentRaw.trim() !== '') {
+    // Input has some value → replace old prefix
+    if (oldCountry?.prefix && oldCountry.code !== country.code) {
+      const oldPrefixEscaped = oldCountry.prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`^${oldPrefixEscaped}\\s?`);
+      const oldMaskedValue = currentRaw.replace(regex, '');
+      newPhone = country.prefix + oldMaskedValue;
+    } else {
+      newPhone = country.prefix + currentRaw;
+    }
+  } else {
+    // Input is empty → show only the new prefix OR empty
+    newPhone = ''; // optionally: newPhone = country.prefix;
+  }
+
+  this.inputValue = newPhone;
+  this.value = newPhone;
+  this.onChange(newPhone);
+
+  setTimeout(() => {
+    if (this.inputField?.nativeElement) {
+      this.inputField.nativeElement.value = newPhone;
+      this.inputField.nativeElement.dispatchEvent(
+        new Event('input', { bubbles: true })
+      );
+    }
+  }, 0);
+}
+
+
+
+
+
+  togglePasswordVisibility(event: Event): void {
+    if (!this.disabled && this.password) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.showPassword = !this.showPassword;
+      this.type = this.showPassword ? 'text' : 'password';
+    }
+  }
+
+  handleIconClick(event: Event): void {
+    if (this.disabled || this.readOnly) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.clicked.emit(true);
+  }
+
+  // =================== Getters ===================
+  get isFilled(): boolean {
+    return this.inputValue.length > 0;
+  }
+
+  get inputState(): 'default' | 'focused' | 'filled' | 'error' | 'disabled' {
+    if (this.disabled) return 'disabled';
+    if (this.hasError) return 'error';
+    if (this.isFocused || this.isDropdownOpen) return 'focused';
+    if (this.isFilled) return 'filled';
+    return 'default';
+  }
+
+  get currentInputType(): string {
+    if (this.password) return this.showPassword ? 'text' : 'password';
+    return this.type;
+  }
+
+
+
+
+}

package/src/lib/pill/pill.html

@@ -0,0 +1,24 @@
+<span [className]="containerClasses">
+
+  @if (dot === 'left') {
+    <span class="dot"></span>
+  }
+
+  <span>{{ label }}</span>
+
+  @if (dot === 'right') {
+    <span class="dot"></span>
+  }
+
+  @if (removable) {
+    <button
+      (click)="onRemove($event)"
+      class="pill-close "> <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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>
+</button>
+  }
+</span>

package/src/lib/pill/pill.ts

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+export type PillVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
+export type PillColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
+export type PillSize = 'xsm' |'sm' | 'md' | 'lg';
+@Component({
+  selector: 'bk-pill',
+  standalone: true,
+  templateUrl: './pill.html',
+  styleUrl: './pill.css',
+})
+export class BkPill {
+  @Input() label: string = '';
+  @Input() variant: PillVariant = 'Light';
+  @Input() color: PillColor = 'Gray';
+  @Input() size: PillSize = 'md';
+  @Input() dot: 'left' | 'right' | 'none' = 'none';
+  @Input() removable: boolean = false;
+  @Input() customClass: string = '';
+
+  @Output() clicked = new EventEmitter<string>();
+
+  get containerClasses(): string {
+    // 1. Size Class
+    const sizeClass = `pill-${this.size}`;
+
+    // 2. Color/Variant Class (Dynamic Generation)
+    const styleClass = `${this.color}-${this.variant}`;
+
+    // 3. customClasses
+    const customClass = `${this.customClass}`;
+
+    return `pill ${sizeClass} ${styleClass} ${customClass}`;
+  }
+
+  onRemove(e: Event) {
+    e.stopPropagation();
+    this.clicked.emit(this.label);
+  }
+}

package/src/lib/radio/radio.html

@@ -0,0 +1,58 @@
+<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 radio"
+    [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 {{labelClass}}"
+        [ngClass]="disabled ? 'text-gray-400' : ''">
+    {{ label }}
+  </span>
+    }
+</div>

package/src/lib/radio/radio.ts

@@ -0,0 +1,72 @@
+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: 'bk-radio-button',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './radio.html',
+  styleUrl: './radio.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkRadioButton),
+      multi: true,
+    },
+  ],
+})
+export class BkRadioButton 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;
+  }
+}