@open-rlb/ng-bootstrap 3.3.20 → 3.3.22

package/README.md

@@ -1,24 +1,74 @@
-# NgBootstrap
+# @open-rlb/ng-bootstrap
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
+Angular 21 component library built on Bootstrap 5.3 (signals, OnPush), with timezone-aware
+date handling via [`@open-rlb/date-tz`](https://www.npmjs.com/package/@open-rlb/date-tz).
 
-## Code scaffolding
+## Installation
 
-Run `ng generate component component-name --project ng-bootstrap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-bootstrap`.
-> Note: Don't forget to add `--project ng-bootstrap` or else it will be added to the default project in your `angular.json` file. 
+### Recommended — `ng add`
 
-## Build
+```bash
+ng add @open-rlb/ng-bootstrap
+```
 
-Run `ng build ng-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory.
+The schematic will:
 
-## Publishing
+- install the required dependencies (`bootstrap`, `bootstrap-icons`, `@open-rlb/date-tz`,
+  `@ngx-translate/core`, `@angular/cdk`, and `@types/bootstrap`) at compatible versions;
+- register the Bootstrap and Bootstrap Icons stylesheets in `angular.json`;
+- add `provideRlbBootstrap()` to your application providers;
+- scaffold a `RlbStarterComponent` (`src/app/rlb-starter/`) you can render to verify the setup
+  (pass `--skip-starter` to opt out).
+
+### Manual
+
+```bash
+npm install @open-rlb/ng-bootstrap
+```
+
+When installed this way, npm pulls the declared peer dependencies automatically (npm 7+).
+Then register the providers and styles yourself:
+
+```typescript
+// app.config.ts
+import { provideRlbBootstrap } from '@open-rlb/ng-bootstrap';
 
-After building your library with `ng build ng-bootstrap`, go to the dist folder `cd dist/ng-bootstrap` and run `npm publish`.
+export const appConfig: ApplicationConfig = {
+  providers: [provideRlbBootstrap()],
+};
+```
 
-## Running unit tests
+```jsonc
+// angular.json → projects.<app>.architect.build.options.styles
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.min.css",
+  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
+  "src/styles.scss"
+]
+```
 
-Run `ng test ng-bootstrap` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Usage
 
-## Further help
+```html
+<rlb-card>
+  <rlb-card-header>Hello</rlb-card-header>
+  <rlb-card-body>
+    <button rlb-button color="primary">Click me</button>
+  </rlb-card-body>
+</rlb-card>
+```
+
+## Development
+
+- `npm run lib:build` — builds the library **and** its `ng-add` schematics into `dist/rlb/ng-bootstrap`.
+- `npm run lib:test:ng-add` — runs an isolated, in-memory check of the `ng-add` schematic
+  (requires a prior `lib:build`).
+- `npm run lib:pack` — builds and packs a publishable tarball.
+
+## Publishing
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+```bash
+npm run lib:build
+cd dist/rlb/ng-bootstrap
+npm publish
+```

package/package.json

@@ -1,14 +1,30 @@
 {
   "name": "@open-rlb/ng-bootstrap",
-  "version": "3.3.20",
+  "version": "3.3.22",
   "peerDependencies": {
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@ngx-translate/core": "^16.0.0",
+    "@open-rlb/date-tz": ">=2.1.1",
     "bootstrap": ">=5.3.0",
-    "@types/bootstrap": ">5.2.0",
-    "@open-rlb/date-tz": ">=2.1.1"
+    "@types/bootstrap": ">=5.2.0",
+    "rxjs": "^7.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/bootstrap": {
+      "optional": true
+    }
   },
   "dependencies": {
     "tslib": ">=2.3.0"
   },
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
   "sideEffects": false,
   "module": "fesm2022/open-rlb-ng-bootstrap.mjs",
   "typings": "types/open-rlb-ng-bootstrap.d.ts",

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add @open-rlb/ng-bootstrap to an Angular project: install peer dependencies, register Bootstrap styles, wire up provideRlbBootstrap(), and scaffold a starter component.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/files/rlb-starter.component.html.template

@@ -0,0 +1,7 @@
+<rlb-card>
+  <rlb-card-header>@open-rlb/ng-bootstrap is ready 🎉</rlb-card-header>
+  <rlb-card-body>
+    <p class="mb-3">You clicked the button {{ clicks() }} times.</p>
+    <button rlb-button color="primary" (click)="increment()">Click me</button>
+  </rlb-card-body>
+</rlb-card>

package/schematics/ng-add/files/rlb-starter.component.ts.template

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  ButtonComponent,
+  CardBodyComponent,
+  CardComponent,
+  CardHeaderComponent,
+} from '@open-rlb/ng-bootstrap';
+
+/**
+ * Starter component generated by `ng add @open-rlb/ng-bootstrap`.
+ * Render `<app-rlb-starter />` (or route to it) to confirm the library works.
+ */
+@Component({
+  selector: 'app-rlb-starter',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CardComponent, CardHeaderComponent, CardBodyComponent, ButtonComponent],
+  templateUrl: './rlb-starter.component.html',
+})
+export class RlbStarterComponent {
+  clicks = signal(0);
+
+  increment(): void {
+    this.clicks.update(n => n + 1);
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+const utility_1 = require("@schematics/angular/utility");
+/**
+ * Dependencies the library needs at the consumer side. `@angular/{core,common,forms,router}`
+ * and `rxjs` are intentionally omitted: every Angular app already provides them.
+ */
+const DEPENDENCIES = [
+    { name: '@open-rlb/date-tz', version: '^2.1.1', type: utility_1.DependencyType.Default },
+    { name: '@ngx-translate/core', version: '^16.0.0', type: utility_1.DependencyType.Default },
+    { name: '@angular/cdk', version: '^21.0.0', type: utility_1.DependencyType.Default },
+    { name: 'bootstrap', version: '^5.3.0', type: utility_1.DependencyType.Default },
+    { name: 'bootstrap-icons', version: '^1.11.0', type: utility_1.DependencyType.Default },
+    { name: '@types/bootstrap', version: '^5.2.0', type: utility_1.DependencyType.Dev },
+];
+/** Global styles required for the Bootstrap look & feel. */
+const STYLE_PATHS = [
+    'node_modules/bootstrap/dist/css/bootstrap.min.css',
+    'node_modules/bootstrap-icons/font/bootstrap-icons.css',
+];
+function ngAdd(options) {
+    return async (tree, _context) => {
+        const project = await resolveProject(tree, options.project);
+        return (0, schematics_1.chain)([
+            // 1. Install dependencies (a single npm install is scheduled automatically).
+            ...DEPENDENCIES.map(dep => (0, utility_1.addDependency)(dep.name, dep.version, { type: dep.type })),
+            // 2. Register Bootstrap + Bootstrap Icons global styles in angular.json.
+            addBootstrapStyles(project),
+            // 3. Wire up the library providers (modals/toasts registry, etc.).
+            (0, utility_1.addRootProvider)(project, ({ code, external }) => code `${external('provideRlbBootstrap', '@open-rlb/ng-bootstrap')}()`),
+            // 4. Optionally scaffold a starter component.
+            options.skipStarter ? noop : scaffoldStarter(tree, project),
+            // 5. Print next steps.
+            logNextSteps(project, options.skipStarter),
+        ]);
+    };
+}
+/** Resolves the target project: the provided name, else the first application, else the first project. */
+async function resolveProject(tree, name) {
+    const workspace = await (0, utility_1.readWorkspace)(tree);
+    if (name) {
+        if (!workspace.projects.has(name)) {
+            throw new schematics_1.SchematicsException(`Project "${name}" was not found in the workspace.`);
+        }
+        return name;
+    }
+    for (const [projectName, project] of workspace.projects) {
+        if (project.extensions['projectType'] === 'application') {
+            return projectName;
+        }
+    }
+    const first = workspace.projects.keys().next().value;
+    if (!first) {
+        throw new schematics_1.SchematicsException('No project found in the workspace to add @open-rlb/ng-bootstrap to.');
+    }
+    return first;
+}
+function addBootstrapStyles(project) {
+    return (0, utility_1.updateWorkspace)(workspace => {
+        const target = workspace.projects.get(project)?.targets.get('build');
+        if (!target) {
+            return;
+        }
+        target.options ??= {};
+        const styles = target.options['styles'] ?? [];
+        for (const style of STYLE_PATHS) {
+            const present = styles.some(s => (typeof s === 'string' ? s : s.input) === style);
+            if (!present) {
+                styles.unshift(style);
+            }
+        }
+        target.options['styles'] = styles;
+    });
+}
+function scaffoldStarter(tree, project) {
+    return async () => {
+        const workspace = await (0, utility_1.readWorkspace)(tree);
+        const def = workspace.projects.get(project);
+        const sourceRoot = def?.sourceRoot ?? (def ? `${def.root}/src` : 'src');
+        const templates = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
+            (0, schematics_1.applyTemplates)({ ...core_1.strings }),
+            (0, schematics_1.move)(`${sourceRoot}/app/rlb-starter`),
+        ]);
+        // Skip silently if the files already exist (idempotent re-runs).
+        return (0, schematics_1.mergeWith)(templates, schematics_1.MergeStrategy.Default);
+    };
+}
+function logNextSteps(project, skipStarter) {
+    return (_tree, context) => {
+        const log = context.logger;
+        log.info('');
+        log.info('✅ @open-rlb/ng-bootstrap added successfully.');
+        log.info(`   • Dependencies installed and added to package.json`);
+        log.info(`   • Bootstrap + Bootstrap Icons styles registered in angular.json`);
+        log.info(`   • provideRlbBootstrap() wired into the "${project}" app providers`);
+        if (!skipStarter) {
+            log.info('   • Starter component generated at src/app/rlb-starter/');
+            log.info('     Render it to verify the setup, e.g. add <app-rlb-starter /> to a template.');
+        }
+        log.info('');
+    };
+}
+/** A no-op rule. */
+const noop = tree => tree;

package/schematics/ng-add/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "OpenRlbNgBootstrapNgAdd",
+  "title": "@open-rlb/ng-bootstrap ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the library to.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "skipStarter": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not scaffold the RlbStarterComponent example."
+    }
+  },
+  "required": []
+}

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}