ngwr 6.1.1 → 7.1.0

package/rotating-text/styles/_index.scss

@@ -0,0 +1,39 @@
+// Cycling-text rotator (reactbits port). The host clips overflow so the
+// chars can translate above/below without leaking outside the line.
+
+.wr-rotating-text {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  &__inner {
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+
+  &__word {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__char {
+    display: inline-block;
+    will-change: transform, opacity;
+  }
+
+  &__space {
+    display: inline;
+    white-space: pre;
+  }
+}

package/schematics/collection.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Wire ngwr into the workspace — install peer deps, append `@use 'ngwr';` to global styles, and print next-steps for bootstrap providers.",
+      "factory": "./ng-add/index#default",
+      "schema": "./ng-add/schema.json"
+    },
+    "icon-set": {
+      "description": "Scaffold a tree-shaken ngwr icon barrel file.",
+      "factory": "./icon-set/index#default",
+      "schema": "./icon-set/schema.json",
+      "aliases": ["icons"]
+    },
+    "use": {
+      "description": "Add an `import { WrFoo } from 'ngwr/<subpath>';` line and splice WrFoo into the @Component imports array of a component file.",
+      "factory": "./use/index#default",
+      "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).",
+      "factory": "./provider/index#default",
+      "schema": "./provider/schema.json"
+    },
+    "component-style": {
+      "description": "Append `@use 'ngwr/<name>';` to the project's global stylesheet — for opt-in per-component styles.",
+      "factory": "./component-style/index#default",
+      "schema": "./component-style/schema.json",
+      "aliases": ["style"]
+    },
+    "page": {
+      "description": "Scaffold a starter page (form / table / dashboard) wired up with ngwr components.",
+      "factory": "./page/index#default",
+      "schema": "./page/schema.json"
+    }
+  }
+}

package/schematics/component-style/index.js

@@ -0,0 +1,49 @@
+"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 });
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+/**
+ * Append `@use 'ngwr/<name>';` (SCSS) or `@import 'ngwr/<name>';` (CSS)
+ * to the project's first global stylesheet. Pairs with the
+ * `styles: 'none'` choice on `ng add` — you opt into ngwr styles per
+ * component instead of pulling the whole bundle.
+ *
+ * Idempotent: skips when the directive is already present.
+ */
+function componentStyle(options) {
+    return async (tree, context) => {
+        const name = options.name.trim().replace(/^['"]+|['"]+$/g, '');
+        if (!name)
+            throw new schematics_1.SchematicsException('ngwr:component-style: missing `name`.');
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const projectName = options.project ?? workspace.extensions.defaultProject;
+        const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
+        if (!project)
+            throw new schematics_1.SchematicsException('ngwr:component-style: no Angular project found.');
+        const build = project.targets.get('build');
+        const styles = build?.options?.styles ?? [];
+        const stylesPath = typeof styles[0] === 'string' ? styles[0] : styles[0]?.input;
+        if (!stylesPath || !tree.exists(stylesPath)) {
+            throw new schematics_1.SchematicsException(`ngwr:component-style: no global stylesheet wired in angular.json. Add \`@use 'ngwr/${name}';\` manually.`);
+        }
+        const isCss = stylesPath.endsWith('.css') || stylesPath.endsWith('.less');
+        const subpath = `ngwr/${name}`;
+        const directive = isCss ? `@import '${subpath}';` : `@use '${subpath}';`;
+        const existing = tree.readText(stylesPath);
+        if (existing.includes(directive) || new RegExp(`['"]${subpath}['"]`).test(existing)) {
+            context.logger.info(`ngwr: ${stylesPath} already imports ${subpath} — no changes.`);
+            return tree;
+        }
+        const next = existing.length && !existing.endsWith('\n') ? `${existing}\n` : existing;
+        tree.overwrite(stylesPath, `${directive}\n${next}`);
+        context.logger.info(`✓ Added \`${directive}\` to ${stylesPath}.`);
+        return tree;
+    };
+}
+exports.default = componentStyle;

package/{cdk/utils/index.d.ts → schematics/component-style/schema.js}

@@ -1,14 +1,8 @@
+"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
  */
-/**
- * Generates random ID
- *
- * @return {string}
- */
-declare function generateRandomId(): string;
-
-export { generateRandomId };
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/component-style/schema.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngwr-component-style",
+  "title": "ngwr component-style",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Subpath under `ngwr/` — e.g. `button`, `select`, `theme`. Matches the dir name in the lib's `exports` block.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which subpath? (e.g. button, select, theme)"
+    },
+    "project": {
+      "type": "string",
+      "description": "Target Angular project. Defaults to the workspace default.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name"]
+}

package/schematics/icon-set/index.js

@@ -0,0 +1,96 @@
+"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 });
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+/**
+ * Curated common icon sets. Identifiers match `ngwr/icon` exports — kept
+ * short on purpose so the generated file stays readable.
+ */
+const SETS = {
+    basic: ['checkmark', 'close', 'add', 'edit', 'trash', 'search', 'copy'],
+    navigation: [
+        'chevronDown',
+        'chevronLeft',
+        'chevronRight',
+        'chevronUp',
+        'arrowBack',
+        'arrowForward',
+        'arrowTop',
+        'arrowBottom',
+        'menu',
+        'dotsHorizontal',
+        'dotsVertical',
+    ],
+    forms: ['eye', 'eyeOff', 'lock', 'lockOpened', 'calendar', 'time', 'filter', 'checkmark', 'close'],
+    feedback: ['alert', 'alertCircle', 'infoCircleOutline', 'checkmarkCircle', 'closeCircle', 'warning', 'bell'],
+};
+/** Default fallback when neither `set` nor `icons` is supplied. */
+const DEFAULT_SET = 'basic';
+function iconSet(options) {
+    return async (tree, context) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const projectName = options.project ?? workspace.extensions.defaultProject;
+        const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
+        if (!project) {
+            throw new schematics_1.SchematicsException('ngwr:icon-set: no Angular project found.');
+        }
+        const sourceRoot = project.sourceRoot ?? `${project.root || ''}/src`.replace(/^\//, '');
+        const dirPath = options.path ?? `${sourceRoot}/app`;
+        const fileName = (options.name ?? 'icons').replace(/\.ts$/, '');
+        const filePath = `${dirPath}/${fileName}.ts`;
+        // Build the deduped icon list — set + explicit icons, or default fallback.
+        const fromSet = options.set ? (SETS[options.set] ?? []) : [];
+        const fromList = options.icons
+            ? options.icons
+                .split(',')
+                .map(s => s.trim())
+                .filter(Boolean)
+            : [];
+        const icons = unique([...fromSet, ...fromList]);
+        if (icons.length === 0)
+            icons.push(...SETS[DEFAULT_SET]);
+        if (tree.exists(filePath)) {
+            context.logger.warn(`ngwr: ${filePath} already exists — skipping. Pass --name to write a different file, or delete it first.`);
+            return tree;
+        }
+        const exportName = options.exportName ?? 'APP_ICONS';
+        const importList = icons.join(', ');
+        const arrayList = icons.join(', ');
+        tree.create(filePath, renderFile(importList, exportName, arrayList));
+        context.logger.info(`✓ Created ${filePath} with ${icons.length} icons.`);
+        context.logger.info(printWiringHint(fileName, exportName));
+        return tree;
+    };
+}
+function renderFile(importList, exportName, arrayList) {
+    return `/**
+ * Tree-shaken ngwr icon set. Generated by \`ng g ngwr:icon-set\`.
+ * Edit freely — re-running with --name=<other> writes a separate file.
+ */
+import { ${importList} } from 'ngwr/icon';
+
+export const ${exportName} = [${arrayList}] as const;
+`;
+}
+function printWiringHint(fileName, exportName) {
+    return `
+Next step — wire the set into bootstrap:
+
+  import { provideWrIcons } from 'ngwr/icon';
+  import { ${exportName} } from './${fileName}';
+
+  bootstrapApplication(AppComponent, {
+    providers: [provideWrIcons(${exportName})],
+  });
+`;
+}
+function unique(list) {
+    return Array.from(new Set(list));
+}
+exports.default = iconSet;

package/schematics/icon-set/schema.js

@@ -0,0 +1,8 @@
+"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 });

package/schematics/icon-set/schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngwr-icon-set",
+  "title": "ngwr icon-set generator",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "default": "icons",
+      "description": "Output file name (without extension).",
+      "$default": { "$source": "argv", "index": 0 }
+    },
+    "project": {
+      "type": "string",
+      "description": "Target Angular project. Defaults to the workspace default project.",
+      "$default": { "$source": "projectName" }
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "Path the file is written to. Defaults to `<project>/<sourceRoot>/app`."
+    },
+    "set": {
+      "type": "string",
+      "enum": ["basic", "navigation", "forms", "feedback"],
+      "description": "Curated icon set. Combined with `icons` if both are passed."
+    },
+    "icons": {
+      "type": "string",
+      "description": "Comma-separated list of ngwr icon names (e.g. `plus,trash,checkmark`). Unknown names are flagged but not blocked."
+    },
+    "exportName": {
+      "type": "string",
+      "default": "APP_ICONS",
+      "description": "Identifier exported as the icon array."
+    }
+  },
+  "required": []
+}

package/schematics/migrations/v7/index.js

@@ -0,0 +1,187 @@
+"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 });
+const HTML_TRANSFORMS = [
+    // wr-autocomplete → wr-select mode="search"
+    { pattern: /<wr-autocomplete(\s|>|\/)/g, replacement: '<wr-select mode="search"$1' },
+    { pattern: /<\/wr-autocomplete>/g, replacement: '</wr-select>' },
+    // wr-chips-input → wr-select mode="tag"
+    { pattern: /<wr-chips-input(\s|>|\/)/g, replacement: '<wr-select mode="tag"$1' },
+    { pattern: /<\/wr-chips-input>/g, replacement: '</wr-select>' },
+    // wr-time-picker → wr-date-picker mode="time"
+    { pattern: /<wr-time-picker(\s|>|\/)/g, replacement: '<wr-date-picker mode="time"$1' },
+    { pattern: /<\/wr-time-picker>/g, replacement: '</wr-date-picker>' },
+    // wr-date-time-picker → wr-date-picker mode="datetime"
+    { pattern: /<wr-date-time-picker(\s|>|\/)/g, replacement: '<wr-date-picker mode="datetime"$1' },
+    { pattern: /<\/wr-date-time-picker>/g, replacement: '</wr-date-picker>' },
+    // [wrTooltip] directive → [wrPopover] + mode="tooltip"
+    { pattern: /\[wrTooltip\]="([^"]+)"/g, replacement: '[wrPopover]="$1" mode="tooltip"' },
+    { pattern: /\[wrTooltip\]='([^']+)'/g, replacement: '[wrPopover]=\'$1\' mode="tooltip"' },
+    // String literal form: wrTooltip="some text"  →  [wrPopover]="'some text'" mode="tooltip"
+    // (Plain string attr is rare; covered as a best-effort.)
+    { pattern: /\bwrTooltip="([^"]+)"/g, replacement: `[wrPopover]="'$1'" mode="tooltip"` },
+    // wr-tree-select → wr-tree openOn="overlay"
+    { pattern: /<wr-tree-select(\s|>|\/)/g, replacement: '<wr-tree openOn="overlay"$1' },
+    { pattern: /<\/wr-tree-select>/g, replacement: '</wr-tree>' },
+    // wr-bottom-sheet → wr-drawer position="bottom"
+    { pattern: /<wr-bottom-sheet(\s|>|\/)/g, replacement: '<wr-drawer position="bottom"$1' },
+    { pattern: /<\/wr-bottom-sheet>/g, replacement: '</wr-drawer>' },
+    // wr-count-up-text → wr-count-up (just a rename — same surface)
+    { pattern: /<wr-count-up-text(\s|>|\/)/g, replacement: '<wr-count-up$1' },
+    { pattern: /<\/wr-count-up-text>/g, replacement: '</wr-count-up>' },
+    // wr-select's deprecated [multi] alias → mode="multi"
+    { pattern: /(<wr-select\b[^>]*?)\s\[multi\]="true"/g, replacement: '$1 mode="multi"' },
+    { pattern: /(<wr-select\b[^>]*?)\s\[multi\]="false"/g, replacement: '$1' },
+    { pattern: /(<wr-select\b[^>]*?)\smulti(?=[\s>/])/g, replacement: '$1 mode="multi"' },
+    // wr-image → wr-lightbox (rename — same surface)
+    { pattern: /<wr-image(\s|>|\/)/g, replacement: '<wr-lightbox$1' },
+    { pattern: /<\/wr-image>/g, replacement: '</wr-lightbox>' },
+    // wr-animated-text → mode-specific target. Handles the self-closing and
+    // empty-pair element forms (the component never projected content). The
+    // attribute form (`<h1 wr-animated-text …>`) has no 1:1 target and is
+    // left for manual migration; a bound `[mode]` falls back to typewriter.
+    {
+        pattern: /<wr-animated-text\b([^>]*?)\s*(\/>|>\s*<\/wr-animated-text>)/g,
+        replacement: (_match, attrs) => {
+            const mode = /\bmode\s*=\s*"(\w+)"/.exec(attrs)?.[1] ?? 'typewriter';
+            const tag = mode === 'split' ? 'wr-split-text' : mode === 'scramble' ? 'wr-decrypt-text' : 'wr-typewriter';
+            let rest = attrs.replace(/\s*\[?mode\]?\s*=\s*"[^"]*"/, '');
+            // Inputs that changed names downstream — `loop` carries over only
+            // to the typewriter; elsewhere it had no equivalent and is dropped.
+            if (tag === 'wr-typewriter') {
+                rest = rest
+                    .replace(/(\s)speed=/, '$1typingSpeed=')
+                    .replace(/(\s)\[speed\]=/, '$1[typingSpeed]=')
+                    .replace(/(\s)startDelay=/, '$1initialDelay=')
+                    .replace(/(\s)\[startDelay\]=/, '$1[initialDelay]=');
+            }
+            else {
+                rest = rest.replace(/\s*\[?loop\]?(=\s*"[^"]*")?(?=\s|$)/, '').replace(/\s*\[?startDelay\]?\s*=\s*"[^"]*"/, '');
+                if (tag === 'wr-split-text') {
+                    rest = rest.replace(/(\s)speed=/, '$1delay=').replace(/(\s)\[speed\]=/, '$1[delay]=');
+                }
+            }
+            return `<${tag}${rest.replace(/\s+$/, '')} />`;
+        },
+    },
+];
+/** TS imports: module-path rewrites + symbol renames. */
+const MODULE_RENAMES = new Map([
+    ['ngwr/autocomplete', 'ngwr/select'],
+    ['ngwr/chips-input', 'ngwr/select'],
+    ['ngwr/time-picker', 'ngwr/date-picker'],
+    ['ngwr/date-time-picker', 'ngwr/date-picker'],
+    ['ngwr/tooltip', 'ngwr/popover'],
+    ['ngwr/tree-select', 'ngwr/tree'],
+    ['ngwr/bottom-sheet', 'ngwr/drawer'],
+    ['ngwr/count-up-text', 'ngwr/counter'],
+    ['ngwr/count-up', 'ngwr/counter'],
+    ['ngwr/tag', 'ngwr/badge'],
+    ['ngwr/image', 'ngwr/lightbox'],
+    ['ngwr/form-field', 'ngwr/form'],
+    // Best-effort: typewriter was animated-text's default mode. Scramble /
+    // split users need ngwr/decrypt-text / ngwr/split-text instead — the
+    // HTML transform above already points the template at the right tag.
+    ['ngwr/animated-text', 'ngwr/typewriter'],
+]);
+const SYMBOL_RENAMES = new Map([
+    ['WrAutocomplete', 'WrSelect'],
+    ['WrChipsInput', 'WrSelect'],
+    ['WrTimePicker', 'WrDatePicker'],
+    ['WrDateTimePicker', 'WrDatePicker'],
+    ['WrTooltip', 'WrPopover'],
+    ['WrTreeSelect', 'WrTree'],
+    ['WrBottomSheet', 'WrDrawer'],
+    ['WrCountUpText', 'WrCountUp'],
+    ['WrImage', 'WrLightbox'],
+    ['WrAnimatedText', 'WrTypewriter'],
+]);
+/** SCSS subpath imports — `@use 'ngwr/X';` and `@import 'ngwr/X';` forms. */
+const SCSS_RENAMES = MODULE_RENAMES;
+const IGNORE_DIRS = new Set(['node_modules', 'dist', '.git', '.cache', '.angular', 'coverage', '.next', '.nuxt']);
+function ngUpdateV7() {
+    return (tree, context) => {
+        const summary = { html: 0, ts: 0, scss: 0 };
+        visit(tree, '/', filePath => {
+            const lower = filePath.toLowerCase();
+            const isHtml = lower.endsWith('.html');
+            const isTs = lower.endsWith('.ts');
+            const isScss = lower.endsWith('.scss') || lower.endsWith('.sass') || lower.endsWith('.css');
+            if (!isHtml && !isTs && !isScss)
+                return;
+            const original = tree.readText(filePath);
+            let next = original;
+            if (isHtml)
+                next = applyHtml(next);
+            if (isTs)
+                next = applyTs(next);
+            if (isScss)
+                next = applyScss(next);
+            if (next !== original) {
+                tree.overwrite(filePath, next);
+                if (isHtml)
+                    summary.html += 1;
+                if (isTs)
+                    summary.ts += 1;
+                if (isScss)
+                    summary.scss += 1;
+            }
+        });
+        context.logger.info(`ngwr v7 migration: rewrote ${summary.html} .html, ${summary.ts} .ts, ${summary.scss} stylesheet file(s).`);
+        context.logger.info('Verify the result with `git diff` — a few edge cases (e.g. tooltip directives applied via host bindings) may need manual touch-up.');
+        return tree;
+    };
+}
+function applyHtml(content) {
+    let next = content;
+    for (const { pattern, replacement } of HTML_TRANSFORMS) {
+        next = typeof replacement === 'string' ? next.replace(pattern, replacement) : next.replace(pattern, replacement);
+    }
+    return next;
+}
+function applyTs(content) {
+    let next = content;
+    // WrValidators.email was removed — Angular's own Validators.email is the
+    // replacement. The @angular/forms import is left to the consumer.
+    next = next.replace(/\bWrValidators\.email\b/g, 'Validators.email');
+    // Module path strings — handle both single and double quoted.
+    for (const [from, to] of MODULE_RENAMES) {
+        next = next
+            .replace(new RegExp(`(['"])${escapeRegExp(from)}\\1`, 'g'), `$1${to}$1`)
+            .replace(new RegExp(`(\`)${escapeRegExp(from)}(\`)`, 'g'), `\`${to}\``);
+    }
+    // Symbol renames — word-boundary safe.
+    for (const [from, to] of SYMBOL_RENAMES) {
+        next = next.replace(new RegExp(`\\b${from}\\b`, 'g'), to);
+    }
+    return next;
+}
+function applyScss(content) {
+    let next = content;
+    for (const [from, to] of SCSS_RENAMES) {
+        // Match `@use 'ngwr/X';`, `@use "ngwr/X";`, `@import 'ngwr/X';`, etc.
+        const escFrom = escapeRegExp(from);
+        next = next.replace(new RegExp(`(@(?:use|import|forward)\\s+)(['"])${escFrom}\\2`, 'g'), `$1$2${to}$2`);
+    }
+    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);
+    }
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+exports.default = ngUpdateV7;

package/schematics/migrations.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "migration-v7": {
+      "version": "7.0.0",
+      "description": "Rewrite the v6 entry-points consolidated in v7: wr-autocomplete/chips-input \u2192 wr-select; wr-time-picker/date-time-picker \u2192 wr-date-picker; wr-tooltip \u2192 wr-popover; wr-tree-select \u2192 wr-tree; wr-bottom-sheet \u2192 wr-drawer; wr-count-up(-text) \u2192 wr-counter; ngwr/tag \u2192 ngwr/badge; wr-image \u2192 wr-lightbox; wr-animated-text \u2192 wr-typewriter/wr-decrypt-text/wr-split-text (per mode). Touches .html, .ts, and .scss files.",
+      "factory": "./migrations/v7/index#default"
+    }
+  }
+}