@letsprogram/ng-oat 0.1.1 → 0.1.2

package/README.md

@@ -73,7 +73,7 @@ Open `angular.json` and add the stylesheet, tokens, and script:
 
 ### 3. Configure the provider
 
-Add `provideNgOat()` to your application config:
+Add `provideNgOat()` to your application config. Since CSS and JS are already loaded via `angular.json`, the provider only sets up internal injection tokens — no runtime asset loading occurs by default.
 
 ```typescript
 // src/app/app.config.ts

package/fesm2022/letsprogram-ng-oat.mjs

@@ -3,7 +3,7 @@ import { makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, I
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 
 const DEFAULT_OPTIONS = {
-    assets: { css: 'auto', js: 'auto' },
+    assets: { css: false, js: false },
     registerWebComponents: true,
     basePath: 'assets/oat',
 };
@@ -22,14 +22,18 @@ function injectTag(doc, tag, attrs, id) {
     });
 }
 /**
- * Provides Oat UI assets and initialisation.
+ * Provides Oat UI core initialisation.
+ *
+ * By default, CSS and JS are **not** injected at runtime — add them via
+ * `angular.json` `styles` / `scripts` arrays instead (recommended).
  *
- * Include in your app config providers array:
  * ```ts
- * provideNgOat()                                  // auto-inject CSS + JS
- * provideNgOat({ assets: { css: false } })        // user imported CSS manually
- * provideNgOat({ basePath: '/custom/oat' })       // custom asset location
+ * provideNgOat()                                          // recommended (CSS/JS via angular.json)
+ * provideNgOat({ assets: { css: 'link', js: 'script' } }) // opt-in runtime injection *
  * ```
+ *
+ * \* Runtime injection requires an assets glob in angular.json to copy files:
+ * `{ glob: '**\/*', input: 'node_modules/@letsprogram/ng-oat/assets/oat', output: '/assets/oat' }`
  */
 function provideNgOat(options) {
     const opts = {
@@ -46,15 +50,13 @@ function provideNgOat(options) {
             const base = opts.basePath.replace(/\/+$/, '');
             const promises = [];
             // CSS
-            const cssMode = opts.assets.css === 'auto' ? 'link' : opts.assets.css;
-            if (cssMode === 'link') {
+            if (opts.assets.css === 'link') {
                 promises.push(injectTag(doc, 'link', { rel: 'stylesheet', href: `${base}/oat.min.css` }, 'ng-oat-css'));
                 // Also inject the token layer CSS
                 promises.push(injectTag(doc, 'link', { rel: 'stylesheet', href: `${base}/tokens.css` }, 'ng-oat-tokens-css'));
             }
             // JS
-            const jsMode = opts.assets.js === 'auto' ? 'script' : opts.assets.js;
-            if (jsMode === 'script') {
+            if (opts.assets.js === 'script') {
                 promises.push(injectTag(doc, 'script', { src: `${base}/oat.min.js`, defer: '' }, 'ng-oat-js'));
             }
             return Promise.all(promises).then(() => { });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsprogram/ng-oat",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Angular component library built on top of the Oat CSS framework — signals-first, lightweight, and accessible.",
   "license": "MIT",
   "author": "SashiKumar Yadav",
@@ -36,9 +36,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "fesm2022/letsprogram-ng-oat.mjs",
-  "typings": "types/letsprogram-ng-oat.d.ts",
   "exports": {
+    "./assets/*": {
+      "default": "./assets/*"
+    },
+    "./src/lib/styles/*": {
+      "default": "./src/lib/styles/*"
+    },
+    "./src/lib/tokens/*": {
+      "default": "./src/lib/tokens/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -50,5 +57,7 @@
       "types": "./types/letsprogram-ng-oat-cdk.d.ts",
       "default": "./fesm2022/letsprogram-ng-oat-cdk.mjs"
     }
-  }
+  },
+  "module": "fesm2022/letsprogram-ng-oat.mjs",
+  "typings": "types/letsprogram-ng-oat.d.ts"
 }

package/types/letsprogram-ng-oat.d.ts

@@ -5,25 +5,43 @@ import { FormCheckboxControl, FormValueControl, ValidationError, FieldState } fr
 /** Configuration for provideNgOat() */
 interface NgOatOptions {
     assets?: {
-        /** How to load Oat CSS. 'auto' = 'link'. false = skip. */
-        css?: 'auto' | 'link' | 'import' | false;
-        /** How to load Oat JS. 'auto' = 'script'. false = skip. */
-        js?: 'auto' | 'script' | false;
+        /**
+         * How to load Oat CSS at runtime.
+         * - `false` (default) — CSS is loaded via angular.json styles array (recommended).
+         * - `'link'` — dynamically inject a `<link>` tag (requires assets glob in angular.json).
+         * - `'import'` — reserved for future use.
+         */
+        css?: 'link' | 'import' | false;
+        /**
+         * How to load Oat JS at runtime.
+         * - `false` (default) — JS is loaded via angular.json scripts array (recommended).
+         * - `'script'` — dynamically inject a `<script>` tag (requires assets glob in angular.json).
+         */
+        js?: 'script' | false;
     };
     /** Register ot-tabs/ot-dropdown custom elements from Oat JS (default: true). */
     registerWebComponents?: boolean;
-    /** Base path for vendored Oat assets (default: 'assets/oat'). */
+    /**
+     * Base path for vendored Oat assets when using dynamic injection (`css: 'link'` or `js: 'script'`).
+     * Only relevant if you opted into runtime injection AND configured an assets glob
+     * to copy files from `node_modules/@letsprogram/ng-oat/assets/oat` to this path.
+     * Default: `'assets/oat'`.
+     */
     basePath?: string;
 }
 /**
- * Provides Oat UI assets and initialisation.
+ * Provides Oat UI core initialisation.
+ *
+ * By default, CSS and JS are **not** injected at runtime — add them via
+ * `angular.json` `styles` / `scripts` arrays instead (recommended).
  *
- * Include in your app config providers array:
  * ```ts
- * provideNgOat()                                  // auto-inject CSS + JS
- * provideNgOat({ assets: { css: false } })        // user imported CSS manually
- * provideNgOat({ basePath: '/custom/oat' })       // custom asset location
+ * provideNgOat()                                          // recommended (CSS/JS via angular.json)
+ * provideNgOat({ assets: { css: 'link', js: 'script' } }) // opt-in runtime injection *
  * ```
+ *
+ * \* Runtime injection requires an assets glob in angular.json to copy files:
+ * `{ glob: '**\/*', input: 'node_modules/@letsprogram/ng-oat/assets/oat', output: '/assets/oat' }`
  */
 declare function provideNgOat(options?: NgOatOptions): EnvironmentProviders;