@brickclay-org/ui 0.0.36 → 0.0.38

package/ASSETS_SETUP.md

@@ -0,0 +1,59 @@
+# Brickclay Library - Assets Setup
+
+When installing `brickclay-lib` from npm, you need to configure your Angular project to copy the library's assets to your application.
+
+## Method 1: Configure angular.json (Recommended)
+
+Add the following to your `angular.json` under the `build` target's `assets` array:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/brickclay-lib/assets",
+                "output": "/assets/brickclay-lib/"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+This will copy all assets from `node_modules/brickclay-lib/assets` to your app's `/assets/brickclay-lib/` folder during build.
+
+## Method 2: Manual Copy (Alternative)
+
+If you prefer to customize the icons, you can manually copy them:
+
+```bash
+# Copy icons to your assets folder
+cp -r node_modules/brickclay-lib/assets/icons src/assets/brickclay-lib/
+```
+
+## Verification
+
+After setup, the icons should be accessible at:
+
+- `assets/brickclay-lib/icons/calender.svg`
+- `assets/brickclay-lib/icons/chevron-left.svg`
+- `assets/brickclay-lib/icons/chevron-right.svg`
+- `assets/brickclay-lib/icons/timer.svg`
+
+## Troubleshooting
+
+If icons don't load:
+
+1. Check that the assets are copied to `dist/your-app/assets/brickclay-lib/icons/` after build
+2. Verify the `angular.json` configuration is correct
+3. Clear your build cache and rebuild: `ng build --no-cache`

package/ng-package.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/brickclay-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib/styles"]
+  },
+  "assets": [
+    "src/assets/**/*",
+    "src/styles.css",
+    "src/lib/toggle/toggle.css",
+    "src/lib/checkbox/checkbox.css",
+    "src/lib/radio/radio.css",
+    "src/lib/pill/pill.css",
+    "src/lib/badge/badge.css",
+    "src/lib/spinner/spinner.css",
+    "src/lib/ui-button/ui-button.css",
+    "src/lib/ui-icon-button/ui-icon-button.css",
+    "src/lib/button-group/button-group.css",
+    "src/lib/textarea/textarea.css",
+    "src/lib/grid/components/grid/grid.css",
+    "src/lib/select/select.css",
+    "src/lib/input/input.css",
+    "src/lib/chips/chips.css",
+    "src/lib/tabs/tabs.css"
+  ]
+}
+
+

package/package.json

@@ -1,26 +1,15 @@
-{
-  "name": "@brickclay-org/ui",
-  "version": "0.0.36",
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0 <=21.0.0",
-    "@angular/core": ">=17.0.0 <=21.0.0",
-    "@angular/cdk": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "moment": "^2.29.0",
-    "ngx-mask": "^20.0.3"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/brickclay-org-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/brickclay-org-ui.mjs"
-    }
-  }
-}
+{
+  "name": "@brickclay-org/ui",
+  "version": "0.0.38",
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0 <=21.0.0",
+    "@angular/core": ">=17.0.0 <=21.0.0",
+    "@angular/cdk": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "moment": "^2.29.0",
+    "ngx-mask": "^20.0.3"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/assets/icons.ts

@@ -0,0 +1,8 @@
+// Icon paths that will be resolved relative to the library's assets folder
+// When published to npm, users will need to configure their angular.json to include these assets
+export const BrickclayIcons = {
+  arrowleft: 'assets/icons/chevron-left.svg',
+  arrowRight: 'assets/icons/chevron-right.svg',
+  calenderIcon: 'assets/icons/calender.svg',
+  timerIcon: 'assets/icons/timer.svg',
+} as const;

package/src/lib/badge/badge.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="badge-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/badge/badge.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type BadgeVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
+export type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
+export type BadgeSize = 'xsm' |'sm' | 'md' | 'lg';
+
+@Component({
+  selector: 'bk-badge',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './badge.html',
+  styleUrls: ['./badge.css'],
+})
+export class BkBadge {
+  @Input() label: string = '';
+  @Input() variant: BadgeVariant = 'Light';
+  @Input() color: BadgeColor = 'Gray';
+  @Input() size: BadgeSize = '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 = `badge-${this.size}`;
+
+    // 2. Color/Variant Class (Dynamic Generation)
+    const styleClass = `${this.color}-${this.variant}`;
+
+    // 3. customClasses
+    const customClass = `${this.customClass}`;
+    return `badge ${sizeClass} ${styleClass} ${customClass}`;
+  }
+
+  onRemove(e: Event) {
+    e.stopPropagation();
+    this.clicked.emit(this.label);
+  }
+}

package/src/lib/brickclay-lib.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BrickclayLib } from './brickclay-lib';
+
+describe('BrickclayLib', () => {
+  let component: BrickclayLib;
+  let fixture: ComponentFixture<BrickclayLib>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrickclayLib]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BrickclayLib);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/brickclay-lib.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-brickclay-lib',
+  imports: [],
+  template: `
+    <p>
+      brickclay-lib works!
+    </p>
+  `,
+  styles: ``,
+})
+export class BrickclayLib {
+
+}

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

@@ -0,0 +1,12 @@
+<div [class]="containerClass">
+  @for (item of items; track item.value) {
+    <div
+      class="group-item"
+      [class.active]="isActive(item.value)"
+      [class.inactive]="!isActive(item.value)"
+      (click)="onItemClick(item.value)"
+    >
+      {{ item.label }}
+    </div>
+  }
+</div>

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

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface GroupItem {
+  label: string;
+  value: any;
+}
+
+export type GroupMode = 'single' | 'multiple';
+
+@Component({
+  selector: 'bk-button-group',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button-group.html',
+  styleUrl: './button-group.css',
+})
+export class BkButtonGroup {
+  // --- Inputs ---
+  @Input() items: GroupItem[] = [];
+  @Input() mode: GroupMode = 'single';
+  @Input() disabled: boolean = false;
+
+  // Holds the current selection.
+  // For 'single', it's a single value. For 'multiple', it's an array.
+  @Input() value: any | any[] = null;
+
+  // --- Outputs ---
+  @Output() valueChange = new EventEmitter<any>();
+
+  // --- Logic ---
+
+  onItemClick(itemValue: any) {
+    if (this.disabled) return;
+
+    if (this.mode === 'single') {
+      // 1. Single Mode: Just set the value
+      if (this.value !== itemValue) {
+        this.value = itemValue;
+        this.valueChange.emit(this.value);
+      }
+    } else {
+      // 2. Multiple Mode: Toggle value in array
+      let currentValues = Array.isArray(this.value) ? [...this.value] : [];
+
+      if (currentValues.includes(itemValue)) {
+        // Remove if exists
+        currentValues = currentValues.filter(v => v !== itemValue);
+      } else {
+        // Add if not exists
+        currentValues.push(itemValue);
+      }
+
+      this.value = currentValues;
+      this.valueChange.emit(this.value);
+    }
+  }
+
+  // Helper to check active state for UI
+  isActive(itemValue: any): boolean {
+    if (this.mode === 'single') {
+      return this.value === itemValue;
+    } else {
+      return Array.isArray(this.value) && this.value.includes(itemValue);
+    }
+  }
+
+  // --- Styles ---
+
+  get containerClass(): string {
+    return `group-container ${this.disabled ? 'disabled' : ''}`;
+  }
+}

package/src/lib/calender/calendar.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BkCustomCalendar } from './components/custom-calendar/custom-calendar.component';
+import { BkScheduledDatePicker } from './components/scheduled-date-picker/scheduled-date-picker.component';
+import { BkTimePicker } from './components/time-picker/time-picker.component';
+
+
+
+/**
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Note:
+ * - The components themselves are standalone, so you can also import them
+ *   directly into any standalone component without using this module.
+ * - This module is mainly for:
+ *   - Existing apps that still use feature modules
+ *   - Easier "plug-and-play" integration: import CalendarModule once and use
+ *     the three exported components anywhere in your templates.
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+    BkCustomCalendar,
+    BkScheduledDatePicker,
+    BkTimePicker
+  ],
+  exports: [
+    BkCustomCalendar,
+    BkScheduledDatePicker,
+    BkTimePicker
+  ]
+})
+export class CalendarModule {}
+
+