@brickclay-org/ui 0.0.41 → 0.0.42

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.41",
+  "version": "0.0.42",
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
   "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",
+    "@angular/common": ">=17.0.0 <22.0.0",
+    "@angular/core": ">=17.0.0 <22.0.0",
+    "@angular/cdk": ">=17.0.0 <22.0.0",
     "moment": "^2.29.0",
     "ngx-mask": "^20.0.3"
   },
+  "peerDependenciesMeta": {
+    "@angular/cdk": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "tslib": "^2.3.0"
   },
@@ -22,5 +31,6 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/brickclay-org-ui.mjs"
     }
-  }
+  },
+  "description": "A comprehensive Angular UI component library with calendar, checkbox, radio, and toggle components"
 }

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add @brickclay-org/ui library to an Angular project and install matching Angular CDK version",
+      "factory": "./ng-add/index",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const dependencies_1 = require("@schematics/angular/utility/dependencies");
+function default_1(options) {
+    return (tree, context) => {
+        context.logger.info('🚀 Setting up @brickclay-org/ui library...');
+        // 1. Read user's Angular version from package.json
+        const angularCore = (0, dependencies_1.getPackageJsonDependency)(tree, '@angular/core');
+        if (!angularCore) {
+            throw new Error('❌ Cannot find @angular/core in package.json. Make sure this is an Angular project.');
+        }
+        // 2. Extract major version (e.g., "^19.0.0" -> "19" or "~18.2.0" -> "18")
+        const angularVersion = angularCore.version;
+        const majorVersionMatch = angularVersion.match(/(\d+)/);
+        if (!majorVersionMatch) {
+            throw new Error(`❌ Could not determine Angular version from ${angularVersion}`);
+        }
+        const majorVersion = parseInt(majorVersionMatch[0], 10);
+        // 3. Validate Angular version is in supported range (17-21)
+        if (majorVersion < 17 || majorVersion > 21) {
+            throw new Error(`❌ @brickclay-org/ui library supports Angular versions 17-21, but found Angular ${majorVersion}.\n` +
+                `Please upgrade or downgrade your Angular version.`);
+        }
+        context.logger.info(`✅ Detected Angular version: ${majorVersion}`);
+        // 4. Check if user already has CDK installed
+        const existingCdk = (0, dependencies_1.getPackageJsonDependency)(tree, '@angular/cdk');
+        if (existingCdk) {
+            const existingCdkMajor = existingCdk.version.match(/(\d+)/)?.[0];
+            // Check if existing CDK version matches Angular version
+            if (existingCdkMajor && parseInt(existingCdkMajor) === majorVersion) {
+                context.logger.info(`✅ Using existing @angular/cdk@${existingCdk.version}`);
+            }
+            else {
+                context.logger.warn(`⚠️  Found @angular/cdk@${existingCdk.version} but you have Angular ${majorVersion}.\n` +
+                    `   Consider updating CDK to match your Angular version: npm install @angular/cdk@^${majorVersion}.0.0`);
+            }
+        }
+        else {
+            // Install matching CDK version
+            const cdkVersion = `^${majorVersion}.0.0`;
+            (0, dependencies_1.addPackageJsonDependency)(tree, {
+                type: dependencies_1.NodeDependencyType.Default,
+                name: '@angular/cdk',
+                version: cdkVersion,
+            });
+            context.logger.info(`✅ Installing @angular/cdk@${cdkVersion} to match Angular ${majorVersion}`);
+        }
+        // 5. Schedule npm install
+        context.addTask(new tasks_1.NodePackageInstallTask());
+        context.logger.info('');
+        context.logger.info('🎉 Brickclay library has been successfully configured!');
+        context.logger.info('');
+        context.logger.info('📚 Next steps:');
+        context.logger.info('  1. Import components from "@brickclay-org/ui" in your modules or standalone components');
+        context.logger.info('');
+        return tree;
+    };
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NgAddBrickclaySchema",
+  "title": "Brickclay Library ng-add Schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  }
+}

package/src/lib/dialog/dialog-container.css

@@ -0,0 +1,102 @@
+/*
+ * Dialog Container Styles (CDK-based)
+ *
+ * All class names use the `bk-` prefix to avoid collisions when
+ * published as an npm package.
+ *
+ * CDK Overlay manages the overlay container, backdrop, pane sizing, and
+ * z-index stacking.  We only style:
+ *
+ *  1. The container host (`:host`) — this IS the visual panel.
+ *  2. `.bk-dialog-content` and `.bk-dialog-actions` — drop-in
+ *     replacements for `<mat-dialog-content>` and `<mat-dialog-actions>`.
+ */
+
+/* ══════════════════════════════════════════════════════════════════════
+   Panel — the container host IS the dialog box
+   ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;                  /* fill the CDK overlay pane */
+  min-height: 0;
+  max-height: inherit;      /* respect CDK pane's max-height */
+
+  background: var(--bk-dialog-panel-bg, #ffffff);
+  border-radius: var(--bk-dialog-panel-radius, 8px);
+  box-shadow:
+    var(
+      --bk-dialog-panel-shadow,
+      0 11px 15px -7px rgba(0, 0, 0, 0.2),
+      0 24px 38px 3px rgba(0, 0, 0, 0.14),
+      0 9px 46px 8px rgba(0, 0, 0, 0.12)
+    );
+  outline: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  will-change: transform, opacity;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Dynamic component host
+   ──────────────────────
+   CdkPortalOutlet creates the user's component as a direct child of
+   :host.  Angular's emulated view encapsulation prevents scoped CSS
+   from reaching dynamically-created elements, so we use ::ng-deep.
+   ══════════════════════════════════════════════════════════════════════ */
+
+:host ::ng-deep > :first-child {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Drop-in replacements for Material dialog layout directives
+   ──────────────────────────────────────────────────────────
+   Use these CSS classes inside your dialog component templates:
+     <div class="bk-dialog-content">  →  replaces <mat-dialog-content>
+     <div class="bk-dialog-actions">  →  replaces <mat-dialog-actions>
+   ══════════════════════════════════════════════════════════════════════ */
+
+:host ::ng-deep .bk-dialog-content {
+  flex: 1 1 auto;
+  overflow: auto;                      /* ← only layer that scrolls */
+  min-height: 0;                       /* allow shrinking in flex col */
+  display: block;
+  -webkit-overflow-scrolling: touch;
+}
+
+:host ::ng-deep .bk-dialog-actions {
+  flex: 0 0 auto;                      /* ← never shrinks, pinned    */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  min-height: 52px;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Title — stays pinned at the top (like mat-dialog-title)
+   ══════════════════════════════════════════════════════════════════════ */
+
+:host ::ng-deep .bk-dialog-title {
+  flex: 0 0 auto;                      /* ← never shrinks, pinned    */
+  margin: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Action alignment variants (set via BkDialogActions.align input)
+   ══════════════════════════════════════════════════════════════════════ */
+
+:host ::ng-deep .bk-dialog-actions-align-start {
+  justify-content: flex-start;
+}
+
+:host ::ng-deep .bk-dialog-actions-align-center {
+  justify-content: center;
+}
+
+/* align-end is the default (already flex-end above) */

package/src/styles.css

@@ -14,3 +14,4 @@
 @import './lib/input/input.css';
 @import './lib/chips/chips.css';
 @import './lib/tabs/tabs.css';
+@import './lib/dialog/dialog-container.css';