@koobiq/components 20.1.0 → 20.2.0

package/schematics/migrations/alert-signals/README.md

@@ -0,0 +1,64 @@
+# alert-signals
+
+Migration schematic invoked automatically by `ng update @koobiq/components`.
+Migrates consumers of `KbqAlert` to its finished signal-based public API.
+
+## Why
+
+`KbqAlert` finished its migration to signals and tightened its public surface. Some breaking changes can be
+auto-fixed, others require manual attention. Template _bindings_ (`[compact]`, `[alertStyle]`, `[alertColor]`)
+keep working — only programmatic reads/writes and template-reference reads break.
+
+| Member                                                                             | Before                     | After                                                   | Auto-fix       |
+| ---------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------- | -------------- |
+| `compact`                                                                          | `boolean` input            | `InputSignalWithTransform` (`booleanAttribute`)         | ✅ read → call |
+| `alertStyle`                                                                       | `KbqAlertStyles \| string` | `InputSignal<'default' \| 'colored'>`                   | ✅ read → call |
+| `alertColor`                                                                       | `get`/`set` accessor       | read-only `InputSignalWithTransform`, **value changed** | ⚠️ warn        |
+| `icon` / `iconItem` / `button` / `title` / `control` / `closeButton` / `isColored` | `public`                   | `protected`                                             | ⚠️ warn        |
+
+## What it does (auto-fix)
+
+The schematic walks every `.ts` and `.html` file in the project (skipping `node_modules` and `dist`) and, for
+files that reference the alert:
+
+- **TypeScript reads.** For a receiver whose static type is annotated `KbqAlert` (method/function params, class
+  fields — including `@ViewChild(KbqAlert) x: KbqAlert` and constructor parameter-properties — and typed locals),
+  a read of a value-safe signal member becomes a call:
+    - `alert.compact` → `alert.compact()` (incl. optional chain `alert?.compact` → `alert.compact()`)
+    - `alert.alertStyle` → `alert.alertStyle()`
+- **Template reference reads.** For a `#ref` bound to `<kbq-alert>`, reads of `compact`/`alertStyle` through that
+  ref are rewritten in the same template (external `.html` and inline `template:` strings): `ref.compact` →
+  `ref.compact()`.
+
+All rewrites are idempotent — running twice does not double the call. `compact`/`alertStyle` keep the same value,
+so appending `()` is safe.
+
+## What it does _not_ do (warn-only)
+
+These changes can't be rewritten safely and are surfaced as warnings (in both `fix` and dry-run mode):
+
+| Change                                                                                   | Manual migration                                                                                                                                                                                                                      |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `alert.alertColor` read                                                                  | Now a read-only `InputSignal`: read as `alert.alertColor()`. **Value changed** — the getter used to return the CSS class `kbq-alert_<color>`, it now returns the raw color (`error`). Update any code that expected the class string. |
+| `alert.alertColor = …` write                                                             | The input is read-only. Drive it with the `[alertColor]` binding (or a signal in your own component), not an assignment.                                                                                                              |
+| `alert.icon` / `iconItem` / `button` / `title` / `control` / `closeButton` / `isColored` | Now `protected` — inaccessible from outside. Refactor to avoid reading component internals.                                                                                                                                           |
+| `[alertColor]` / `[alertStyle]` with a custom string                                     | The inputs are narrowed to the enum literals (`'error' \| 'warning' \| 'success' \| 'info'`, `'default' \| 'colored'`). Replace typos/custom strings with a valid value.                                                              |
+| `<kbq-alert compact>` (bare attribute)                                                   | Now applies the `booleanAttribute` transform, so the bare attribute really enables compact (it used to be a silent no-op). Verify this is intended.                                                                                   |
+| Projected content wrapped in an element                                                  | Content queries are now `descendants: false`. Project `kbq-alert-title` / `-control` / `-close-button` / the icon as **direct children** of `<kbq-alert>`, not inside a wrapper.                                                      |
+| `viewChild(KbqAlert)` / `contentChild(KbqAlert)`                                         | Returns the instance whose `compact`/`alertStyle` are signals — reads are a double call (`this.alert().compact()`). Verify manually.                                                                                                  |
+| `KbqAlertModule`                                                                         | No longer re-exports `A11yModule` / `PlatformModule`. Import `@angular/cdk/a11y` / `@angular/cdk/platform` directly if you relied on them.                                                                                            |
+
+## Running it manually
+
+```
+ng generate @koobiq/components:alert-signals --project my-app
+```
+
+Pass `--fix=false` to see what would change without writing files.
+
+## Limitations
+
+Receivers are matched by explicit `KbqAlert` type annotation only (no cross-package type inference), so
+aliased/inferred receivers (`const a = this.alert; a.compact`) are left untouched. `alertColor` is intentionally
+**not** auto-rewritten because its value semantics changed. After running, **always inspect the diff** and act on
+the warnings before committing.

package/schematics/migrations/alert-signals/data.js

@@ -0,0 +1,70 @@
+'use strict';
+
+/**
+ * Data for the `alert-signals` migration.
+ *
+ * `KbqAlert` finished its migration to a signal-based public API. Two members are safe, value-preserving
+ * property → signal reads (only the call syntax changed) and are auto-fixed. `alertColor` also changed its
+ * *value* semantics and became read-only, and the content-query members became `protected` — those cannot be
+ * rewritten safely and are surfaced as warnings.
+ *
+ * - `alert.compact`     → `alert.compact()`      (value unchanged — auto-fixed)
+ * - `alert.alertStyle`  → `alert.alertStyle()`   (value unchanged — auto-fixed)
+ * - `alert.alertColor`  → read-only signal; getter now returns the raw color, not `kbq-alert_<color>` (warn)
+ * - `alert.icon` / `iconItem` / `button` / `title` / `control` / `closeButton` / `isColored` → `protected` (warn)
+ *
+ * Template *bindings* (`[compact]`, `[alertStyle]`, `[alertColor]`) keep working — only programmatic reads and
+ * template-reference reads break.
+ */
+/** Members of `KbqAlert` whose value is unchanged; a read must become a call. Auto-fixed. */
+const SIGNAL_MEMBERS = ['compact', 'alertStyle'];
+/**
+ * Signal members that are writable via `.set(...)`. `KbqAlert.compact`/`alertStyle` are `input()` (read-only),
+ * so this is empty — a programmatic write is left untouched and covered by the warnings.
+ */
+const WRITABLE_MEMBERS = new Set();
+/** TypeScript type annotation that marks a receiver as an alert. */
+const ALERT_TYPE = 'KbqAlert';
+/** Element selector whose template reference variables (`#ref`) point at an alert. */
+const ALERT_ELEMENT = 'kbq-alert';
+/**
+ * `alertColor` became a read-only `InputSignal` AND changed its value: the getter used to return the CSS class
+ * `kbq-alert_<color>`, it now returns the raw color (e.g. `error`). Because a mechanical `()` append would
+ * silently change the value, this is warned on rather than auto-fixed.
+ */
+const VALUE_CHANGED_MEMBERS = ['alertColor'];
+/** Members that moved from `public` to `protected` and can no longer be read from outside the component. */
+const PROTECTED_MEMBERS = [
+    'icon',
+    'iconItem',
+    'button',
+    'title',
+    'control',
+    'closeButton',
+    'isColored'
+];
+/**
+ * File-scoped patterns that can't be auto-fixed reliably — surfaced with file locations (in both `fix` and
+ * dry-run mode). Only evaluated for files that reference the alert, so the patterns stay scoped.
+ */
+const warnPatterns = [
+    {
+        pattern: '(?:viewChild|ViewChild|contentChild|ContentChild)[^\\n;]*\\bKbqAlert\\b',
+        message: 'A KbqAlert view/content query returns the component instance, whose `compact`/`alertStyle` are now ' +
+            'signals — reading them is a double call, e.g. `this.alert().compact()`. Verify query reads manually.'
+    },
+    {
+        pattern: '\\bKbqAlertModule\\b',
+        message: 'KbqAlertModule no longer re-exports A11yModule / PlatformModule. If you relied on them transitively ' +
+            '(e.g. cdkTrapFocus), import @angular/cdk/a11y or @angular/cdk/platform directly. Prefer importing the ' +
+            'standalone KbqAlert and its directives over the NgModule.'
+    }
+];
+
+exports.ALERT_ELEMENT = ALERT_ELEMENT;
+exports.ALERT_TYPE = ALERT_TYPE;
+exports.PROTECTED_MEMBERS = PROTECTED_MEMBERS;
+exports.SIGNAL_MEMBERS = SIGNAL_MEMBERS;
+exports.VALUE_CHANGED_MEMBERS = VALUE_CHANGED_MEMBERS;
+exports.WRITABLE_MEMBERS = WRITABLE_MEMBERS;
+exports.warnPatterns = warnPatterns;

package/schematics/migrations/alert-signals/index.js

@@ -0,0 +1,350 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ts = require('typescript');
+var utils_ast = require('../../utils/ast.js');
+var utils_messages = require('../../utils/messages.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var utils_typescript = require('../../utils/typescript.js');
+var migrations_alertSignals_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+const TS_EXT = '.ts';
+const HTML_EXT = '.html';
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/** Applies text-span edits to `content`, right-to-left, so earlier edits don't shift later offsets. */
+function applyEdits(content, edits) {
+    const sorted = [...edits].sort((a, b) => b.start - a.start || b.end - a.end);
+    let result = content;
+    for (const { start, end, text } of sorted) {
+        result = result.slice(0, start) + text + result.slice(end);
+    }
+    return result;
+}
+const isFunctionLike = (node) => ts.isFunctionDeclaration(node) ||
+    ts.isMethodDeclaration(node) ||
+    ts.isConstructorDeclaration(node) ||
+    ts.isArrowFunction(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isGetAccessorDeclaration(node) ||
+    ts.isSetAccessorDeclaration(node);
+/** Walks up from `node` to the nearest ancestor matching `predicate`. */
+function findAncestor(node, predicate) {
+    let current = node.parent;
+    while (current) {
+        if (predicate(current))
+            return current;
+        current = current.parent;
+    }
+    return undefined;
+}
+/** Whether a type annotation refers to the alert (`KbqAlert`). */
+function isAlertType(type) {
+    return (!!type && ts.isTypeReferenceNode(type) && ts.isIdentifier(type.typeName) && type.typeName.text === migrations_alertSignals_data.ALERT_TYPE);
+}
+const FIELD_MODIFIERS = new Set([
+    ts.SyntaxKind.PrivateKeyword,
+    ts.SyntaxKind.PublicKeyword,
+    ts.SyntaxKind.ProtectedKeyword,
+    ts.SyntaxKind.ReadonlyKeyword
+]);
+/**
+ * Collects the receivers whose static type is an alert, by explicit annotation only (no cross-package type
+ * resolution): method/function params, class fields (incl. `@ViewChild(KbqAlert) x: KbqAlert` and constructor
+ * parameter-properties) and typed locals.
+ */
+function collectReceivers(sourceFile) {
+    const receivers = [];
+    const add = (text, scope) => receivers.push({ text, start: scope.getStart(sourceFile), end: scope.getEnd() });
+    const visit = (node) => {
+        if (ts.isParameter(node) && ts.isIdentifier(node.name) && isAlertType(node.type)) {
+            add(node.name.text, findAncestor(node, isFunctionLike) ?? sourceFile);
+            // A constructor parameter-property is also a class field, reachable as `this.<name>`.
+            if (node.modifiers?.some((modifier) => FIELD_MODIFIERS.has(modifier.kind))) {
+                const owner = findAncestor(node, ts.isClassDeclaration);
+                if (owner)
+                    add(`this.${node.name.text}`, owner);
+            }
+        }
+        else if (ts.isPropertyDeclaration(node) && ts.isIdentifier(node.name) && isAlertType(node.type)) {
+            const owner = findAncestor(node, ts.isClassDeclaration);
+            if (owner)
+                add(`this.${node.name.text}`, owner);
+        }
+        else if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && isAlertType(node.type)) {
+            add(node.name.text, findAncestor(node, isFunctionLike) ?? sourceFile);
+        }
+        node.forEachChild(visit);
+    };
+    visit(sourceFile);
+    return receivers;
+}
+/** Whether a property access on a receiver is within one of the receiver's scopes. */
+function inReceiverScope(node, sourceFile, receivers) {
+    const receiverText = node.expression.getText(sourceFile);
+    const start = node.getStart(sourceFile);
+    const end = node.getEnd();
+    return receivers.some((r) => r.text === receiverText && start >= r.start && end <= r.end);
+}
+/** Classifies a matched property access and appends the resulting edit(s). */
+function classifyAccess(node, sourceFile, edits) {
+    const parent = node.parent;
+    // Already migrated: `x.compact()` (call) or `x.compact.set(...)` — leave alone (idempotent).
+    if (ts.isCallExpression(parent) && parent.expression === node)
+        return;
+    if (ts.isPropertyAccessExpression(parent) && parent.expression === node && parent.name.text === 'set')
+        return;
+    // Write target: `x.compact = RHS`. `KbqAlert` signal members are `input()` (read-only), so there is no
+    // writable member — leave the write untouched (it becomes a compile error the consumer fixes by hand).
+    if (ts.isBinaryExpression(parent) &&
+        parent.left === node &&
+        parent.operatorToken.kind === ts.SyntaxKind.EqualsToken) {
+        if (migrations_alertSignals_data.WRITABLE_MEMBERS.has(node.name.text)) {
+            const rhs = parent.right;
+            edits.push({ start: node.getEnd(), end: rhs.getStart(sourceFile), text: '.set(' });
+            edits.push({ start: rhs.getEnd(), end: rhs.getEnd(), text: ')' });
+        }
+        return;
+    }
+    // Read (incl. optional chain `x?.compact`): append `()`.
+    edits.push({ start: node.getEnd(), end: node.getEnd(), text: '()' });
+}
+/** Collects edits for every read/write of a value-safe signal member on a known alert receiver. */
+function collectAccessEdits(sourceFile, receivers) {
+    const edits = [];
+    const visit = (node) => {
+        if (ts.isPropertyAccessExpression(node) &&
+            ts.isIdentifier(node.name) &&
+            migrations_alertSignals_data.SIGNAL_MEMBERS.includes(node.name.text) &&
+            inReceiverScope(node, sourceFile, receivers)) {
+            classifyAccess(node, sourceFile, edits);
+        }
+        node.forEachChild(visit);
+    };
+    visit(sourceFile);
+    return edits;
+}
+/** Collects the manual-migration members (`alertColor`, now-`protected` queries) read on an alert receiver. */
+function collectReceiverWarnings(sourceFile, receivers) {
+    const valueChanged = new Set();
+    const protectedAccess = new Set();
+    const visit = (node) => {
+        if (ts.isPropertyAccessExpression(node) &&
+            ts.isIdentifier(node.name) &&
+            inReceiverScope(node, sourceFile, receivers)) {
+            const name = node.name.text;
+            if (migrations_alertSignals_data.VALUE_CHANGED_MEMBERS.includes(name))
+                valueChanged.add(name);
+            else if (migrations_alertSignals_data.PROTECTED_MEMBERS.includes(name))
+                protectedAccess.add(name);
+        }
+        node.forEachChild(visit);
+    };
+    visit(sourceFile);
+    return { valueChanged, protectedAccess };
+}
+/** Pass A — rewrite value-safe programmatic reads of alert signal members in TypeScript code. */
+function migrateTsExpressions(content, fileName) {
+    const sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const receivers = collectReceivers(sourceFile);
+    if (receivers.length === 0)
+        return content;
+    const edits = collectAccessEdits(sourceFile, receivers);
+    return edits.length > 0 ? applyEdits(content, edits) : content;
+}
+/** Emits precise, receiver-scoped warnings for the members that can't be auto-fixed. */
+function warnReceiverMembers(context, filePath, content) {
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const receivers = collectReceivers(sourceFile);
+    if (receivers.length === 0)
+        return;
+    const { valueChanged, protectedAccess } = collectReceiverWarnings(sourceFile, receivers);
+    if (valueChanged.size > 0) {
+        utils_messages.logMessage(context.logger, [
+            `[alert-signals] ${filePath}`,
+            `  \`alertColor\` is now a read-only InputSignal — read it as \`alert.alertColor()\`. Its value also`,
+            `  changed: the getter used to return the CSS class \`kbq-alert_<color>\`, it now returns the raw color`,
+            `  (e.g. \`error\`). Programmatic writes (\`alert.alertColor = …\`) are no longer possible — bind`,
+            `  \`[alertColor]\` in the template instead. Migrate this by hand.`
+        ]);
+    }
+    if (protectedAccess.size > 0) {
+        utils_messages.logMessage(context.logger, [
+            `[alert-signals] ${filePath}`,
+            `  These KbqAlert members are now \`protected\` and can't be read from outside the component: ` +
+                `${[...protectedAccess].join(', ')}. Refactor to avoid reading them.`
+        ]);
+    }
+}
+/** Collects template reference variable names bound to a `<kbq-alert>` element. */
+class AlertRefCollector {
+    constructor() {
+        this.refs = new Set();
+    }
+    visitElement(element) {
+        if (element.name === migrations_alertSignals_data.ALERT_ELEMENT) {
+            for (const attr of element.attrs ?? []) {
+                if (typeof attr.name !== 'string')
+                    continue;
+                if (attr.name.startsWith('#'))
+                    this.refs.add(attr.name.slice(1));
+                else if (attr.name.startsWith('ref-'))
+                    this.refs.add(attr.name.slice(4));
+            }
+        }
+        this.visitChildren(element);
+    }
+    visitBlock(block) {
+        this.visitChildren(block);
+    }
+    visitChildren(node) {
+        for (const child of node.children ?? []) {
+            child.visit(this);
+        }
+    }
+    visitAttribute() { }
+    visitText() { }
+    visitComment() { }
+    visitExpansion() { }
+    visitExpansionCase() { }
+    visitBlockParameter() { }
+    visitLetDeclaration() { }
+}
+/** Rewrites `ref.member` reads to `ref.member()` for the given refs, scoped to those exact identifiers. */
+function rewriteRefReads(template, refs) {
+    const members = migrations_alertSignals_data.SIGNAL_MEMBERS.join('|');
+    let content = template;
+    let changed = false;
+    for (const ref of refs) {
+        // `\bref\.(member)\b(?!\s*\()` — skip anything already invoked, so the rewrite is idempotent.
+        const pattern = new RegExp(`\\b(${escapeRegExp(ref)})\\.(${members})\\b(?!\\s*\\()`, 'g');
+        const next = content.replace(pattern, '$1.$2()');
+        if (next !== content) {
+            content = next;
+            changed = true;
+        }
+    }
+    return { content, changed };
+}
+/** Pass B (core) — parse a template, discover alert refs, rewrite their value-safe signal reads. */
+async function migrateTemplate(template) {
+    if (!template.includes(migrations_alertSignals_data.ALERT_ELEMENT))
+        return { content: template, changed: false };
+    const parsed = await utils_typescript.parseTemplate(template);
+    if (!parsed.tree)
+        return { content: template, changed: false };
+    const collector = new AlertRefCollector();
+    utils_ast.visitAll(collector, parsed.tree.rootNodes);
+    if (collector.refs.size === 0)
+        return { content: template, changed: false };
+    return rewriteRefReads(template, [...collector.refs]);
+}
+/** Interior `[start, end]` ranges of inline `@Component({ template: '…' })` string literals. */
+function collectInlineTemplateRanges(sourceFile) {
+    const ranges = [];
+    utils_typescript.forEachClass(sourceFile, (node) => {
+        const decorator = ts
+            .getDecorators(node)
+            ?.find((dec) => ts.isCallExpression(dec.expression) &&
+            ts.isIdentifier(dec.expression.expression) &&
+            dec.expression.expression.text === 'Component');
+        if (!decorator || !ts.isCallExpression(decorator.expression))
+            return;
+        const [arg] = decorator.expression.arguments;
+        if (!arg || !ts.isObjectLiteralExpression(arg))
+            return;
+        for (const prop of arg.properties) {
+            if (ts.isPropertyAssignment(prop) &&
+                (ts.isIdentifier(prop.name) || ts.isStringLiteralLike(prop.name)) &&
+                prop.name.text === 'template' &&
+                ts.isStringLiteralLike(prop.initializer) &&
+                prop.initializer.text) {
+                // +1 / -1 to exclude the opening/closing quote characters.
+                ranges.push({ start: prop.initializer.getStart(sourceFile) + 1, end: prop.initializer.getEnd() - 1 });
+            }
+        }
+    });
+    return ranges;
+}
+/** Pass B (inline) — rewrite alert ref reads inside inline component templates. */
+async function migrateInlineTemplates(content, fileName) {
+    const sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const ranges = collectInlineTemplateRanges(sourceFile).sort((a, b) => b.start - a.start);
+    let result = content;
+    for (const { start, end } of ranges) {
+        const { content: rewritten, changed } = await migrateTemplate(result.slice(start, end));
+        if (changed) {
+            result = result.slice(0, start) + rewritten + result.slice(end);
+        }
+    }
+    return result;
+}
+function logWarnings(context, filePath, content) {
+    for (const { pattern, message } of migrations_alertSignals_data.warnPatterns) {
+        if (new RegExp(pattern).test(content)) {
+            utils_messages.logMessage(context.logger, [`[alert-signals] ${filePath}`, `  ${message}`]);
+        }
+    }
+}
+/** A `.ts` file is an alert consumer if it names the type/module or imports the package. */
+function referencesAlert(content) {
+    return /\bKbqAlert\b/.test(content) || content.includes('@koobiq/components/alert');
+}
+function alertSignals(options) {
+    return async (tree, context) => {
+        const { project, fix } = options;
+        const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+        const root = projectDefinition?.root ?? '';
+        const rootDir = root ? tree.getDir(root) : tree.root;
+        const tsPaths = [];
+        const htmlPaths = [];
+        rootDir.visit((filePath) => {
+            if (filePath.includes('node_modules') || filePath.includes('/dist/'))
+                return;
+            if (filePath.endsWith(TS_EXT))
+                tsPaths.push(filePath);
+            else if (filePath.endsWith(HTML_EXT))
+                htmlPaths.push(filePath);
+        });
+        let touched = 0;
+        const commit = (filePath, original, updated) => {
+            if (updated === original)
+                return;
+            touched++;
+            if (fix) {
+                tree.overwrite(filePath, updated);
+            }
+            else {
+                utils_messages.logMessage(context.logger, [`[alert-signals] would update ${filePath} (run with --fix to apply)`]);
+            }
+        };
+        for (const filePath of tsPaths) {
+            const original = tree.read(filePath)?.toString();
+            if (!original || !referencesAlert(original))
+                continue;
+            logWarnings(context, filePath, original);
+            warnReceiverMembers(context, filePath, original);
+            let content = migrateTsExpressions(original, filePath);
+            content = await migrateInlineTemplates(content, filePath);
+            commit(filePath, original, content);
+        }
+        for (const filePath of htmlPaths) {
+            const original = tree.read(filePath)?.toString();
+            if (!original)
+                continue;
+            const { content, changed } = await migrateTemplate(original);
+            if (changed)
+                commit(filePath, original, content);
+        }
+        utils_messages.logMessage(context.logger, [
+            `[alert-signals] processed tree under "${root || '<workspace root>'}", ` +
+                `${fix ? 'updated' : 'would update'} ${touched} file(s).`
+        ]);
+    };
+}
+
+exports.default = alertSignals;

package/schematics/migrations/alert-signals/schema.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-alert-signals",
+    "title": "Koobiq components alert signals migration",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project to migrate. If omitted, the migration runs over the whole tree.",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "default": true,
+            "description": "When true, applies all auto-fix replacements. When false, prints what would change without writing."
+        }
+    }
+}

package/schematics/migrations/autocomplete-panel-width-auto/README.md

@@ -0,0 +1,68 @@
+### Autocomplete Panel Width Auto schematics
+
+This schematic migrates `KbqAutocomplete` templates away from the old meaning of `panelWidth="auto"`. It includes:
+
+- Replacement of `panelWidth="auto"` with `panelWidth="fit-content"`
+
+`panelWidth="auto"` used to be passed through to CSS verbatim, so the panel shrank to fit its content. It now
+means "match the width of the host", which is what it already means on `kbq-select` and `kbq-tree-select`.
+`fit-content` preserves the old behaviour.
+
+The change is silent — `auto` still type-checks and still renders — so templates that are not migrated will
+lay out differently without any error.
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:autocomplete-panel-width-auto --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:autocomplete-panel-width-auto --project <your project>
+```
+
+### Run locally
+
+Build package
+
+```shell
+yarn run build:schematics
+```
+
+Run command (for example, for `koobiq-docs` project)
+
+```shell
+ng g ./dist/components/schematics/collection.json:autocomplete-panel-width-auto --project koobiq-docs
+```
+
+### Result
+
+#### Before
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-autocomplete panelWidth="auto">...</kbq-autocomplete>
+    `
+})
+export class MyComp {}
+```
+
+#### After
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-autocomplete panelWidth="fit-content">...</kbq-autocomplete>
+    `
+})
+export class MyComp {}
+```

package/schematics/migrations/autocomplete-panel-width-auto/index.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var node_path = require('node:path');
+var process = require('node:process');
+var ts = require('typescript');
+var utils_angularParsing = require('../../utils/angular-parsing.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var utils_typescript = require('../../utils/typescript.js');
+require('path');
+require('../../utils/ast.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('../../utils/messages.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
+
+const migrationData = {
+    elementName: 'kbq-autocomplete',
+    attrs: {
+        key: {
+            from: 'panelWidth',
+            to: 'panelWidth'
+        },
+        value: {
+            replacements: [{ from: 'auto', to: 'fit-content' }]
+        }
+    }
+};
+function migrate(options) {
+    return async (tree, context) => {
+        const { project } = options;
+        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
+        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
+            baseUrl: projectDefinition.root,
+            rootDir: projectDefinition.root,
+            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
+            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
+            // Avoid checking libraries to speed up the migration.
+            skipLibCheck: true,
+            skipDefaultLibCheck: true
+        });
+        // Update external html
+        await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
+        // Update inline html
+        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        context.logger.warn('Warning! Run linter in updated files since line breaks or indents may be broken.');
+    };
+}
+
+exports.default = migrate;
+exports.migrationData = migrationData;

package/schematics/migrations/autocomplete-panel-width-auto/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-autocomplete-panel-width-auto",
+    "title": "koobiq-components autocomplete-panel-width-auto schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        }
+    }
+}

package/schematics/migrations/filter-bar-signals/README.md

@@ -1,6 +1,6 @@
 # filter-bar-signals
 
-Migration schematic invoked automatically by `ng update @koobiq/components@21`.
+Migration schematic invoked automatically by `ng update @koobiq/components@20`.
 Migrates consumers of `KbqFilterBar` to its signal-based public API.
 
 ## Why