ngwr 11.2.0 → 12.1.0

package/radio/styles/_index.scss

@@ -36,7 +36,7 @@
     white-space: nowrap;
 
     &:focus-visible + .wr-radio__dot {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
     }
   }
 
@@ -115,7 +115,7 @@
   &--disabled {
     --wr-radio-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }
 

package/rating/styles/_index.scss

@@ -75,7 +75,7 @@
   }
 
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
 
     .wr-rating__slot {
       cursor: not-allowed;

package/schematics/collection.json

@@ -18,7 +18,7 @@
       "schema": "./use/schema.json"
     },
     "provider": {
-      "description": "Add a `provideWr*()` call to your bootstrap providers (overlay / icons / toast / i18n / date-adapter / density / loading-bar / cookie / storage / theme).",
+      "description": "Add a `provideWr*()` call to your bootstrap providers (overlay / icons / toast / i18n / date-adapter / density / storage / theme).",
       "factory": "./provider/index#default",
       "schema": "./provider/schema.json"
     },

package/schematics/migrations/v12/index.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Anchored with `(?![-\w])` rather than `\b`.
+ *
+ * A word boundary matches between `r` and `-`, so a `\b`-anchored
+ * `ngwr/date-adapter` also matches the first half of `ngwr/date-adapter-fns`.
+ * Ordering alone would hide that here, but the anchor is what makes each
+ * pattern correct on its own — and it is the same trap the v9 migration
+ * documents for `<wr-checkbox` against `<wr-checkbox-group`.
+ */
+const TRANSFORMS = [
+    { pattern: /ngwr\/date-adapter-fns(?![-\w])/g, replacement: 'ngwr/date/adapters/fns' },
+    { pattern: /ngwr\/date-adapter-luxon(?![-\w])/g, replacement: 'ngwr/date/adapters/luxon' },
+    { pattern: /ngwr\/date-adapter(?![-\w])/g, replacement: 'ngwr/date' },
+];
+const IGNORE_DIRS = new Set(['node_modules', 'dist', '.git', '.cache', '.angular', 'coverage', '.next', '.nuxt']);
+function ngUpdateV12() {
+    return (tree, context) => {
+        let touched = 0;
+        visit(tree, '/', filePath => {
+            const lower = filePath.toLowerCase();
+            // `.ts` for imports, `.html` for a rare inline `@import`-style reference,
+            // `.json` because an import map or a jest moduleNameMapper can name them.
+            if (!lower.endsWith('.ts') && !lower.endsWith('.html') && !lower.endsWith('.json'))
+                return;
+            const original = tree.readText(filePath);
+            const next = apply(original, TRANSFORMS);
+            if (next !== original) {
+                tree.overwrite(filePath, next);
+                touched += 1;
+            }
+        });
+        context.logger.info(`ngwr v12 migration: rewrote ${touched} file(s) (ngwr/date-adapter* → ngwr/date/adapters/*).\n` +
+            'Every symbol keeps its name — only the import path moved, so the catalog nests ' +
+            'implementations under their feature the way ngwr/icon/adapters/* already did.');
+        context.logger.info('Verify the result with `git diff`.');
+        return tree;
+    };
+}
+function apply(content, transforms) {
+    let next = content;
+    for (const { pattern, replacement } of transforms) {
+        next = next.replace(pattern, replacement);
+    }
+    return next;
+}
+function visit(tree, dir, visitor) {
+    const entry = tree.getDir(dir);
+    for (const file of entry.subfiles) {
+        visitor(`${dir === '/' ? '' : dir}/${file}`);
+    }
+    for (const sub of entry.subdirs) {
+        if (IGNORE_DIRS.has(sub))
+            continue;
+        visit(tree, `${dir === '/' ? '' : dir}/${sub}`, visitor);
+    }
+}
+exports.default = ngUpdateV12;

package/schematics/migrations/v7/index.js

@@ -116,7 +116,18 @@ function ngUpdateV7() {
                 return;
             const original = tree.readText(filePath);
             let next = original;
-            if (isHtml)
+            // Inline templates live in .ts files too, so run the element-scoped
+            // transforms there as well — the gate v9 already uses. Skipping them was
+            // worse than leaving a file unmigrated: `applyTs` renames the import and
+            // the symbol in that same file, so a component with
+            // `template: '<wr-autocomplete …>'` came out importing WrSelect with a tag
+            // that now matches no directive, and the build failed NG8001 after the
+            // migration reported success. Every pattern in HTML_TRANSFORMS is anchored
+            // on `<wr-…`, `[wrTooltip]` or `wrTooltip=`, so the only TypeScript they
+            // can reach is a line that already reads like markup — an unspaced
+            // `this.wrTooltip="x"` assignment being the one shape that qualifies and
+            // is not, which is what the `git diff` advice below is for.
+            if (isHtml || isTs)
                 next = applyHtml(next);
             if (isTs)
                 next = applyTs(next);

package/schematics/migrations/v8/index.js

@@ -71,7 +71,16 @@ function ngUpdateV8() {
                 return;
             const original = tree.readText(filePath);
             let next = original;
-            if (isHtml)
+            // Inline templates live in .ts files too, so the attribute rewrites run
+            // there as well. `wrDensity="compact"` left in one is not a cosmetic miss:
+            // `WrDensityDirective.wrDensity` is `input.required<WrDensityValue>()` and
+            // `'compact'` is not in that union, so the app stops compiling under
+            // strictTemplates after the upgrade. Every pattern is anchored on
+            // `wrDensity=`, `data-wr-density=` or `<wr-pagination`, so the only
+            // TypeScript they can reach is a line that already reads like markup — an
+            // unspaced `this.wrDensity="compact"` assignment being the one shape that
+            // qualifies and is not, which is what the `git diff` advice below is for.
+            if (isHtml || isTs)
                 next = apply(next, HTML_TRANSFORMS);
             if (isTs)
                 next = apply(next, TS_TRANSFORMS);

package/schematics/migrations.json

@@ -15,6 +15,11 @@
       "version": "9.0.0",
       "description": "Rename the <wr-checkbox> group-membership input value \u2192 checkboxValue (also [value] / [(value)]). The standalone checkbox is now a signal-forms FormCheckboxControl whose contract reserves `value` for the form value \u2014 its boolean state is the `checked` model. Touches .html and .ts files.",
       "factory": "./migrations/v9/index#default"
+    },
+    "migration-v12": {
+      "version": "12.0.0",
+      "description": "Move the date entry points under one namespace: ngwr/date-adapter \u2192 ngwr/date, ngwr/date-adapter-fns \u2192 ngwr/date/adapters/fns, ngwr/date-adapter-luxon \u2192 ngwr/date/adapters/luxon. Import paths only \u2014 every exported symbol keeps its name. Touches .ts, .html and .json files.",
+      "factory": "./migrations/v12/index#default"
     }
   }
 }

package/schematics/ng-add/index.js

@@ -16,6 +16,11 @@ const workspace_1 = require("@schematics/angular/utility/workspace");
  * `lucide` is here because the bootstrap snippet this schematic prints registers
  * icons through the lucide adapter — leaving it out made the very first snippet
  * a consumer pastes fail to resolve.
+ *
+ * `@angular/forms` is a REQUIRED peer in `projects/lib/package.json` and is
+ * deliberately NOT here: every `ng new` app already depends on it, so installing
+ * it would be a no-op write to the consumer's manifest. The manifest declares it
+ * because a consumer can remove it; this list is about what `ng add` has to add.
  */
 const BASE_PEERS = [
     ['@angular/cdk', '>=22.0.0'],
@@ -145,12 +150,12 @@ function printNextSteps(options, context) {
         const providers = ['provideWrOverlay()', 'provideWrIcons(lucideIcons({ plus: Plus, trash: Trash2 }))'];
         const adapterCall = DATE_ADAPTER_PROVIDER[adapter];
         if (adapterCall) {
-            imports.push("import { provideWrDateAdapter } from 'ngwr/date-adapter';");
+            imports.push("import { provideWrDateAdapter } from 'ngwr/date';");
             if (adapter === 'date-fns') {
-                imports.push("import { WrDateFnsAdapter } from 'ngwr/date-adapter-fns';");
+                imports.push("import { WrDateFnsAdapter } from 'ngwr/date/adapters/fns';");
             }
             else if (adapter === 'luxon') {
-                imports.push("import { WrLuxonAdapter } from 'ngwr/date-adapter-luxon';");
+                imports.push("import { WrLuxonAdapter } from 'ngwr/date/adapters/luxon';");
             }
             providers.push(adapterCall);
         }

package/schematics/provider/index.js

@@ -34,7 +34,7 @@ const PROVIDERS = {
     },
     i18n: { subpath: 'ngwr/i18n', factory: 'provideWrI18n', call: 'provideWrI18n()' },
     'date-adapter': {
-        subpath: 'ngwr/date-adapter',
+        subpath: 'ngwr/date',
         factory: 'provideWrDateAdapter',
         call: 'provideWrDateAdapter()',
     },
@@ -47,13 +47,26 @@ function provider(options) {
         const spec = PROVIDERS[options.name];
         if (!spec)
             throw new schematics_1.SchematicsException(`ngwr:provider: unknown provider "${options.name}".`);
-        const filePath = await resolveMainFile(tree, options);
+        const filePath = await resolveTargetFile(tree, options);
         if (!filePath) {
             context.logger.info(printSnippet(spec));
             return tree;
         }
         const original = tree.readText(filePath);
-        let next = original;
+        // Splice FIRST, and bail before touching the file if there is nowhere to
+        // splice into. The imports used to go in ahead of this, so by the time the
+        // splice found no array the buffer already differed from the original and
+        // the `next === original` guard below could not catch it: the file was
+        // overwritten with an unused import and reported as `✓ Added <call>`. On a
+        // stock app that made `ng g ngwr:provider overlay` print success and leave
+        // it with no overlay container.
+        const spliced = ensureProviderCall(original, spec.call);
+        if (spliced === null) {
+            context.logger.info(`ngwr:provider: no providers array in ${filePath}.`);
+            context.logger.info(printSnippet(spec));
+            return tree;
+        }
+        let next = spliced;
         next = ensureImport(next, spec.factory, spec.subpath);
         // Drive the extra imports off `extras` rather than special-casing a provider
         // name here: the two used to drift apart, and the hard-coded branch was
@@ -61,7 +74,6 @@ function provider(options) {
         for (const [symbols, subpath] of spec.extras ?? []) {
             next = ensureImport(next, symbols, subpath);
         }
-        next = ensureProviderCall(next, spec.call);
         if (next === original) {
             context.logger.info(`ngwr:provider: ${filePath} already has ${spec.factory} — no changes.`);
             return tree;
@@ -71,17 +83,70 @@ function provider(options) {
         return tree;
     };
 }
-async function resolveMainFile(tree, options) {
+/** The providers array of a `bootstrapApplication` call or an `ApplicationConfig`. */
+const PROVIDERS_ARRAY = /(\bproviders\s*:\s*\[)([\s\S]*?)(\])/m;
+/**
+ * The file that actually holds `providers: [ … ]`.
+ *
+ * Resolving the build target's entry file and stopping there is only right for
+ * the pre-v17 shape, where `bootstrapApplication` and its providers sit in
+ * `main.ts` together. `ng new` has since split them: `main.ts` is two lines
+ * ending in `bootstrapApplication(App, appConfig)` and the array lives in
+ * `app/app.config.ts` — the layout `projects/showcase/main.ts` uses as well. So
+ * follow the entry file's own RELATIVE imports one level and prefer whichever of
+ * them owns the array; one level is what `ng new` generates, and a path alias
+ * (`#root`, `@app/…`) is deliberately not followed, since resolving one needs
+ * the tsconfig. When nothing found this way has an array, the entry file is
+ * handed back and the caller prints a snippet rather than editing it.
+ */
+async function resolveTargetFile(tree, options) {
+    const entry = await resolveEntryFile(tree, options);
+    if (!entry)
+        return null;
+    if (PROVIDERS_ARRAY.test(tree.readText(entry)))
+        return entry;
+    return followConfigImport(tree, entry) ?? entry;
+}
+/** The first module `entry` imports relatively that declares a providers array. */
+function followConfigImport(tree, entry) {
+    const dir = entry.slice(0, entry.lastIndexOf('/') + 1);
+    for (const [, specifier] of tree.readText(entry).matchAll(/from\s*['"](\.[^'"]*)['"]/g)) {
+        // TypeScript module specifiers carry no extension; `.ts` is the only one
+        // `ng new` produces for this file, and a wrong guess just misses.
+        const candidate = normalisePath(`${dir}${specifier}.ts`);
+        if (tree.exists(candidate) && PROVIDERS_ARRAY.test(tree.readText(candidate)))
+            return candidate;
+    }
+    return null;
+}
+/** Collapse `.` / `..` in a joined workspace path — `Tree` resolves neither. */
+function normalisePath(path) {
+    const out = [];
+    for (const part of path.split('/')) {
+        if (part === '' || part === '.')
+            continue;
+        if (part === '..')
+            out.pop();
+        else
+            out.push(part);
+    }
+    return `${path.startsWith('/') ? '/' : ''}${out.join('/')}`;
+}
+async function resolveEntryFile(tree, options) {
     if (options.path && tree.exists(options.path))
         return options.path;
     const workspace = await (0, workspace_1.getWorkspace)(tree);
-    const projectName = options.project ?? workspace.extensions.defaultProject;
+    // Both bags are `Record<string, JsonValue>`. Named through a shape rather than
+    // read with `foo['bar']`, because this file compiles under two configs: its own
+    // CommonJS tsconfig, and — since the spec beside it imports it — the root one,
+    // which sets `noPropertyAccessFromIndexSignature`.
+    const extensions = workspace.extensions;
+    const projectName = options.project ?? extensions.defaultProject;
     const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
     if (!project)
         return null;
-    const main = project.targets.get('build')?.options?.main;
-    const browser = project.targets.get('build')?.options?.browser;
-    const candidate = main ?? browser ?? `${project.sourceRoot ?? 'src'}/main.ts`;
+    const build = project.targets.get('build')?.options;
+    const candidate = build?.main ?? build?.browser ?? `${project.sourceRoot ?? 'src'}/main.ts`;
     return tree.exists(candidate) ? candidate : null;
 }
 function ensureImport(source, symbol, subpath) {
@@ -105,12 +170,14 @@ function ensureImport(source, symbol, subpath) {
     }
     return `${newLine}${source}`;
 }
+/** The source with `call` spliced in, or `null` when there is no array to splice into. */
 function ensureProviderCall(source, call) {
-    // Splice into the providers array of bootstrapApplication / ApplicationConfig.
-    const arrayRe = /(\bproviders\s*:\s*\[)([\s\S]*?)(\])/m;
-    const match = arrayRe.exec(source);
+    const match = PROVIDERS_ARRAY.exec(source);
+    // `null`, not the untouched source: "nothing to do" and "already done" are
+    // different answers, and returning the same value for both is what let the
+    // caller report a successful edit it had not made.
     if (!match)
-        return source;
+        return null;
     // Already present?
     const callBase = call.split('(')[0];
     if (new RegExp(`\\b${escapeRegExp(callBase)}\\s*\\(`).test(match[2]))

package/schematics/use/index.js

@@ -6,142 +6,22 @@
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-const schematics_1 = require("@angular-devkit/schematics");
+const rule_1 = require("./rule");
 // Bundled at build time by `scripts/build-symbol-map.ts`. Map of every
 // `Wr*` public symbol → the subpath it lives under.
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const SYMBOL_MAP = require('./symbol-map.json');
 /**
- * Add `import { WrFoo } from 'ngwr/<subpath>';` to the given component
- * file and splice `WrFoo` into the `@Component({ imports: [...] })`
- * array. Saves the subpath-lookup dance for newcomers — `ng g ngwr:use
- * WrButton --path src/app/my-page.ts`.
+ * `ng g ngwr:use WrButton --path src/app/my-page.ts` — the rule itself is in
+ * `./rule`, which takes the map as an argument.
  *
- * Only `symbol` is positional (see schema.json); `path` is a named option, so
- * the bare `ng g ngwr:use WrButton src/app/my-page.ts` form fails with
- * `Unknown argument`.
- *
- * Regex-based on purpose to avoid pulling in the TS compiler as a runtime
- * dep. Covers the common standalone-component shape; an unusual file
- * shape gets a clear warning + a copy-pasteable snippet.
+ * The split is what makes the rule testable: `symbol-map.json` is generated
+ * into `dist/lib/schematics/use/` and does not exist in the source tree, so
+ * anything reading this file from source — the unit-test builder included —
+ * fails to resolve the `require` above. Keeping it alone in this file leaves
+ * one un-runnable line instead of the whole schematic.
  */
 function use(options) {
-    return (tree, context) => {
-        const symbol = options.symbol.trim();
-        if (!symbol)
-            throw new schematics_1.SchematicsException('ngwr:use: missing required `symbol`.');
-        const subpath = SYMBOL_MAP[symbol];
-        if (!subpath) {
-            throw new schematics_1.SchematicsException(`ngwr:use: unknown symbol "${symbol}". Check the catalog at https://ngwr.dev or use the literal import: \`import { ${symbol} } from 'ngwr/<subpath>';\``);
-        }
-        const filePath = resolveTargetFile(tree, options.path);
-        if (!filePath) {
-            // No file passed: just print the import snippet and stop.
-            context.logger.info(printManualSnippet(symbol, subpath));
-            return tree;
-        }
-        if (!tree.exists(filePath)) {
-            throw new schematics_1.SchematicsException(`ngwr:use: file ${filePath} not found.`);
-        }
-        const original = tree.readText(filePath);
-        let next = original;
-        next = addImport(next, symbol, subpath);
-        next = addToImportsArray(next, symbol);
-        if (next === original) {
-            context.logger.info(`ngwr:use: ${filePath} already has ${symbol} — no changes.`);
-            return tree;
-        }
-        tree.overwrite(filePath, next);
-        context.logger.info(`✓ Added ${symbol} (from ${subpath}) to ${filePath}.`);
-        return tree;
-    };
-}
-function resolveTargetFile(tree, candidate) {
-    if (!candidate)
-        return null;
-    const path = candidate.startsWith('/') ? candidate : `/${candidate}`;
-    if (tree.exists(path))
-        return path;
-    if (tree.exists(candidate))
-        return candidate;
-    return null;
-}
-/**
- * Insert `import { Symbol } from 'subpath';` near the existing imports,
- * or merge into an existing line that already references the same path.
- * Idempotent — returns the source untouched if the symbol is already in.
- */
-function addImport(source, symbol, subpath) {
-    // Already imported from somewhere?
-    const importedAnywhere = new RegExp(`\\bimport\\s*\\{[^}]*\\b${symbol}\\b[^}]*\\}\\s*from`).test(source);
-    if (importedAnywhere)
-        return source;
-    // Existing import from the same subpath? — splice the symbol in.
-    const sameSubpathRe = new RegExp(`(import\\s*\\{)([^}]*)(\\}\\s*from\\s*['"]${escapeRegExp(subpath)}['"])`, 'm');
-    const sameSubpathMatch = sameSubpathRe.exec(source);
-    if (sameSubpathMatch) {
-        const head = sameSubpathMatch[1];
-        const body = sameSubpathMatch[2].trim().replace(/,\s*$/, '');
-        const tail = sameSubpathMatch[3];
-        const merged = body ? `${head} ${body}, ${symbol} ${tail}` : `${head} ${symbol} ${tail}`;
-        return source.replace(sameSubpathMatch[0], merged);
-    }
-    // No related import — prepend a new line after the last top-of-file
-    // import we can find.
-    const importBlockRe = /(^|\n)(import\s[^;]+;\s*\n)+/m;
-    const block = importBlockRe.exec(source);
-    const newLine = `import { ${symbol} } from '${subpath}';\n`;
-    if (block) {
-        // Splice in immediately after the last import in the block.
-        const end = (block.index ?? 0) + block[0].length;
-        return `${source.slice(0, end)}${newLine}${source.slice(end)}`;
-    }
-    // No existing imports — just prepend.
-    return `${newLine}${source}`;
-}
-/**
- * Find `imports: [...]` inside a `@Component({...})` decorator (single or
- * multi-line) and splice the symbol in. Skips if the symbol is already
- * listed.
- */
-function addToImportsArray(source, symbol) {
-    // Match `imports: [ ... ]` allowing multi-line + trailing commas.
-    const arrayRe = /(\bimports\s*:\s*\[)([\s\S]*?)(\])/m;
-    const match = arrayRe.exec(source);
-    if (!match) {
-        // No imports array — try to insert one after the `@Component({`
-        // opening brace. Heuristic, not foolproof.
-        const componentRe = /@Component\s*\(\s*\{/;
-        const compMatch = componentRe.exec(source);
-        if (compMatch?.index === undefined) {
-            // No @Component decorator at all — leave the file alone, the user
-            // probably wants the import only.
-            return source;
-        }
-        const insertAt = compMatch.index + compMatch[0].length;
-        return `${source.slice(0, insertAt)}\n  imports: [${symbol}],${source.slice(insertAt)}`;
-    }
-    const body = match[2];
-    if (new RegExp(`\\b${escapeRegExp(symbol)}\\b`).test(body))
-        return source;
-    const trimmed = body.replace(/\s+$/, '');
-    const sep = trimmed.length && !trimmed.endsWith(',') ? ', ' : trimmed.length ? ' ' : '';
-    const replaced = `${match[1]}${trimmed}${sep}${symbol}${match[3]}`;
-    return source.replace(match[0], replaced);
-}
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-function printManualSnippet(symbol, subpath) {
-    return `
-ngwr:use — copy this into your component:
-
-  import { ${symbol} } from '${subpath}';
-
-  @Component({
-    imports: [/* …, */ ${symbol}],
-    /* … */
-  })
-`;
+    return (0, rule_1.useRule)(options, SYMBOL_MAP);
 }
 exports.default = use;