@brickclay-org/ui 0.0.39 → 0.0.40

package/src/lib/textarea/textarea.ts

@@ -0,0 +1,172 @@
+import { Component, EventEmitter, Input, Optional, Output, Self } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+export type BkTextAreaAutoComplete =
+  | '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 BkTextAreaAutoCapitalize =
+  | 'off'
+  | 'none'
+  | 'on'
+  | 'sentences'
+  | 'words'
+  | 'characters';
+
+export type BkTextAreaInputMode =
+  | 'none'
+  | 'text'
+  | 'tel'
+  | 'url'
+  | 'email'
+  | 'numeric'
+  | 'decimal'
+  | 'search';
+@Component({
+  selector: 'bk-textarea',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './textarea.html'
+})
+export class BkTextarea implements ControlValueAccessor {
+  @Input() autoComplete : BkTextAreaAutoComplete = 'off';
+  @Input() name!: string;
+  @Input() id!: string;
+  @Input() label: string = '';
+  @Input() placeholder: string = '';
+  @Input() rows: number = 4;
+  @Input() hint: string = '';
+  @Input() required: boolean = false;
+  @Input() maxlength: number | null = null;
+  @Input() minlength: number | null = null;
+  @Input() hasError: boolean | null = false;
+  @Input() disabled: boolean = false;
+  @Input() errorMessage: string = '';
+  @Input() tabIndex: number | null = null;
+  @Input() readOnly: boolean = false;
+  @Input() autoCapitalize: BkTextAreaAutoCapitalize | null = null;
+  @Input() inputMode: BkTextAreaInputMode | null = null;
+  @Output() input = new EventEmitter<Event>();
+  @Output() change = new EventEmitter<Event>();
+  @Output() blur = new EventEmitter<Event>();
+  @Output() focus = new EventEmitter<Event>();
+  value: string = '';
+
+
+  // --- ControlValueAccessor ---
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  constructor(@Optional() @Self() private ngControl: NgControl) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+
+
+  // --- Expose FormControl state ---
+  get control(): any {
+    return this.ngControl?.control;
+  }
+
+  get touched(): boolean {
+    return this.control?.touched;
+  }
+
+  get dirty(): boolean {
+    return this.control?.dirty;
+  }
+
+  get errors(): any {
+    return this.control?.errors;
+  }
+
+
+
+
+  handleFocus(event: Event): void {
+    this.focus.emit(event);
+  }
+
+  handleBlur(event:Event): void {
+    this.onTouched();
+    this.blur.emit(event);
+  }
+  handleInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.value = val;       // update CVA value
+    this.onChange(val);     // propagate to parent form
+    this.input.emit(event); // emit raw event
+  }
+
+  handleChange(event: Event) {
+    this.change.emit(event); // emit raw change event
+  }
+
+
+  writeValue(value: any): void {
+    this.value = value ?? '';
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+
+}

package/src/lib/toggle/toggle.html

@@ -0,0 +1,24 @@
+<div class="inline-flex items-center gap-2 cursor-pointer" (click)="toggle()">
+  <button
+    type="button"
+    role="switch"
+    [attr.aria-checked]="isChecked"
+    [disabled]="disabled"
+    class="toggle-base"
+    [ngClass]="toggleClass"
+    [class.toggle-on]="isChecked"
+    [class.toggle-off]="!isChecked"
+    [class.toggle-disabled]="disabled"
+  >
+    <span
+      class="toggle-knob"
+      [class.knob-on]="isChecked"
+      [class.knob-off]="!isChecked"
+    ></span>
+  </button>
+  @if (label){
+  <span class="text-sm font-medium text-[#1B223A] select-none" [class.opacity-70]="disabled">
+    {{ label }}
+  </span>
+  }
+</div>

package/src/lib/toggle/toggle.ts

@@ -0,0 +1,62 @@
+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-toggle',
+  standalone: true,
+  imports: [CommonModule],
+  encapsulation:ViewEncapsulation.None,
+  templateUrl: './toggle.html',
+  styleUrls: ['./toggle.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BkToggle),
+      multi: true
+    }
+  ]
+})
+export class BkToggle implements ControlValueAccessor {
+
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Input() toggleClass: string = 'toggle-md';
+
+  @Output() change = new EventEmitter<boolean>();
+
+  isChecked: boolean = false;
+
+  // CVA callbacks (placeholders)
+  onChange = (_: boolean) => {};
+  onTouched = () => {};
+
+  toggle() {
+    if (this.disabled) return;
+
+    this.isChecked = !this.isChecked;
+    this.onChange(this.isChecked); // Notify Forms API
+    this.onTouched();              // Notify Validation API
+    this.change.emit(this.isChecked); // Notify standard event listeners
+  }
+
+  // Called by Angular to write value to the view
+  writeValue(value: boolean): void {
+    this.isChecked = value;
+  }
+
+  // Called by Angular to register the function to call when changed
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  // Called by Angular to register the function to call when touched
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // Called by Angular when the disabled state changes
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/src/lib/ui-button/ui-button.html

@@ -0,0 +1,25 @@
+<button
+  [attr.type]="type"
+  [class]="buttonClasses"
+  [disabled]="disabled || loading"
+  (click)="onClick($event)"
+>
+  @if (leftIcon) {
+    <img [src]="leftIcon" [alt]="iconAlt" class="icon shrink-0" />
+  }
+
+      @if (label) {
+    <span [class]="textClass">
+        {{ label }}
+    </span>
+      }
+    @if (loading) {
+      <span [class]="spinnerClass" class="spinner"></span>
+    }
+
+
+  @if (rightIcon) {
+    <img [src]="rightIcon" [alt]="iconAlt" class="icon shrink-0" />
+  }
+
+</button>

package/src/lib/ui-button/ui-button.ts

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type ButtonSize = 'xxsm' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type ButtonVariant = 'primary' | 'secondary';
+
+@Component({
+  selector: 'bk-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './ui-button.html',
+  styleUrl: './ui-button.css',
+})
+export class BkButton {
+  // --- Inputs ---
+
+  // 1. Style & Size Inputs
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'md';
+
+  // 2. Content Inputs
+  @Input() label: string = ''; // Pass text directly
+  @Input() leftIcon?: string;
+  @Input() rightIcon?: string;
+  @Input() iconAlt: string = 'icon';
+
+  // 3. State & Config
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() loading: boolean = false;
+  @Input() disabled: boolean = false;
+
+  // 4. Customization (Optional overrides)
+  @Input() buttonClass: string = ''; // Append extra classes if needed
+  @Input() textClass: string = '';
+  @Input() spinnerClass: string = '';
+
+  // --- Outputs ---
+  @Output() clicked = new EventEmitter<boolean>();
+
+  // --- Logic ---
+  onClick(event: Event) {
+    if (!this.disabled && !this.loading) {
+      this.clicked.emit(true);
+    }
+  }
+
+  // Generate the class string based on Inputs
+  get buttonClasses(): string {
+    const variantClass = this.variant === 'primary' ? 'btn-primary' : 'btn-secondary';
+
+    // Combine: Variant + Size + Custom Classes
+    // Note: The size name (e.g., 'sm') matches your CSS class name exactly
+    return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
+  }
+}

package/src/lib/ui-icon-button/ui-icon-button.html

@@ -0,0 +1,7 @@
+<button
+  [class]="buttonClasses"
+  [disabled]="disabled"
+  (click)="onClick($event)"
+>
+    <img [src]="icon" [alt]="alt" class="icon" />
+</button>

package/src/lib/ui-icon-button/ui-icon-button.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type IconButtonSize = 'xxsm' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type IconButtonVariant = 'primary' | 'secondary';
+
+@Component({
+  selector: 'bk-icon-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './ui-icon-button.html',
+  styleUrl: './ui-icon-button.css',
+})
+export class BkIconButton {
+  // --- Inputs ---
+  @Input() icon!: string; // Required icon path
+  @Input() alt: string = 'icon';
+  @Input() variant: IconButtonVariant = 'primary';
+  @Input() size: IconButtonSize = 'md';
+
+  @Input() disabled: boolean = false;
+
+  // Custom classes
+  @Input() buttonClass: string = '';
+
+  @Output() clicked = new EventEmitter<boolean>();
+
+  onClick(event: Event) {
+    if (!this.disabled) {
+      this.clicked.emit(true);
+    }
+  }
+
+  get buttonClasses(): string {
+    // Maps inputs to CSS classes: .btn-icon .primary .md
+    return `btn-icon ${this.variant} ${this.size} ${this.buttonClass}`;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,43 @@
+/*
+ * Public API Surface of brickclay-lib
+ */
+
+//Icons
+export * from './lib/assets/icons'
+//Library
+export * from './lib/brickclay-lib';
+//Calender
+export * from './lib/calender/components/custom-calendar/custom-calendar.component';
+export * from './lib/calender/components/scheduled-date-picker/scheduled-date-picker.component';
+export * from './lib/calender/components/time-picker/time-picker.component';
+export * from './lib/calender/calendar.module';
+export * from './lib/calender/services/calendar-manager.service';
+//Toggle
+export * from './lib/toggle/toggle';
+//CheckBox
+export * from './lib/checkbox/checkbox';
+//Radio-Button
+export * from './lib/radio/radio'
+//Pill
+export * from './lib/pill/pill'
+//Badge
+export * from './lib/badge/badge'
+//Spinner
+export * from './lib/spinner/spinner'
+//Button
+export * from './lib/ui-button/ui-button'
+export * from './lib/ui-icon-button/ui-icon-button'
+export * from './lib/button-group/button-group'
+//Text-Area
+export * from './lib/textarea/textarea'
+//Table
+export * from './lib/grid/components/grid/grid';
+export * from './lib/grid/models/grid.model';
+//Single Select
+export * from './lib/select/select';
+//Input
+export * from './lib/input/input';
+//Input-Chips
+export * from './lib/chips/chips';
+//Tabs
+export * from './lib/tabs/tabs';

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "sourceMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}